/* ============================================================
   Resolve — Landing page styles
   Brand: Sora (display) + Inter (body). Slate Indigo / Emerald.
   ============================================================ */

:root {
  --c-primary:       #4F46E5;
  --c-primary-hover: #4338CA;
  --c-primary-light: #6366F1;
  --c-bg:            #F8FAFC;
  --c-surface:       #FFFFFF;
  --c-ink:           #0F172A;
  --c-ink-2:         #1E293B;
  --c-muted:         #64748B;
  --c-muted-2:       #94A3B8;
  --c-border:        #E2E8F0;
  --c-success:       #10B981;
  --c-success-light: #34D399;
  --c-warning:       #F59E0B;
  --c-danger:        #EF4444;
  --c-info:          #0EA5E9;

  --c-primary-050: #EEF2FF;
  --c-success-050: #ECFDF5;
  --c-warning-050: #FFFBEB;
  --c-danger-050:  #FEF2F2;

  --grad-brand: linear-gradient(120deg, #4F46E5 0%, #4338CA 55%, #10B981 130%);
  --grad-ink:   linear-gradient(180deg, #0F172A 0%, #131f3d 100%);

  --radius:      14px;
  --radius-sm:   10px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md: 0 8px 24px -10px rgba(15,23,42,.18);
  --shadow-lg: 0 24px 60px -20px rgba(15,23,42,.28);
  --shadow-brand: 0 20px 46px -18px rgba(79,70,229,.55);

  --ring: 0 0 0 4px rgba(79,70,229,.20);

  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Sora", "Inter", system-ui, sans-serif;

  --maxw: 1160px;
  --gutter: clamp(20px, 5vw, 40px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--c-primary); text-decoration: none; }
a:hover { color: var(--c-primary-hover); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--c-ink);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  font-weight: 700;
}

p { margin: 0 0 1em; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-primary);
  background: var(--c-primary-050);
  border: 1px solid #E0E7FF;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-success); box-shadow: 0 0 0 4px rgba(16,185,129,.18); }

.section { padding: clamp(64px, 9vw, 120px) 0; }
.section-head { max-width: 720px; margin: 0 auto clamp(40px, 6vw, 64px); text-align: center; }
.section-head.left { margin-inline: 0; text-align: left; }
.section-head h2 { font-size: clamp(28px, 4.2vw, 46px); margin-top: 18px; }
.section-head p { font-size: clamp(17px, 2vw, 20px); color: var(--c-muted); margin-bottom: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  padding: 15px 26px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-primary {
  color: #fff;
  background: var(--grad-brand);
  background-size: 160% 160%;
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover { color: #fff; transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 26px 54px -16px rgba(79,70,229,.62); }
.btn-ghost { color: var(--c-ink); background: var(--c-surface); border-color: var(--c-border); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { color: var(--c-ink); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-lg { padding: 18px 34px; font-size: 17px; }
.btn .arrow { transition: transform .18s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(248,250,252,.82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.site-header.scrolled { border-bottom-color: var(--c-border); box-shadow: 0 6px 20px -16px rgba(15,23,42,.4); }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 74px; gap: 24px;
}
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand__mark { width: 38px; height: 38px; border-radius: 11px; box-shadow: var(--shadow-sm); }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; color: var(--c-ink); }
.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__links a { color: var(--c-muted); font-weight: 500; font-size: 15px; }
.nav__links a:hover { color: var(--c-ink); }
.nav__cta { display: flex; align-items: center; gap: 14px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(48px, 8vw, 96px) 0 clamp(56px, 8vw, 104px); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__bg::before {
  content: ""; position: absolute; top: -280px; left: 50%; transform: translateX(-50%);
  width: 1100px; height: 720px;
  background: radial-gradient(closest-side, rgba(99,102,241,.18), transparent 70%);
}
.hero__bg::after {
  content: ""; position: absolute; top: -120px; right: -140px;
  width: 620px; height: 620px;
  background: radial-gradient(closest-side, rgba(16,185,129,.14), transparent 70%);
}
.hero__grid { position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--c-border) 1px, transparent 1px), linear-gradient(90deg, var(--c-border) 1px, transparent 1px);
  background-size: 46px 46px; opacity: .5;
  mask-image: radial-gradient(ellipse 80% 55% at 50% 30%, #000 40%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 30%, #000 40%, transparent 78%);
}
.hero__inner { text-align: center; max-width: 860px; margin-inline: auto; }
.hero h1 {
  font-size: clamp(38px, 6.4vw, 68px);
  line-height: 1.03;
  margin: 22px 0 22px;
}
.hero__sub { font-size: clamp(18px, 2.3vw, 22px); color: var(--c-muted); max-width: 660px; margin: 0 auto 34px; }
.hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero__trust { margin-top: 22px; font-size: 14px; color: var(--c-muted-2); display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hero__trust svg { color: var(--c-success); }

/* ---------- App mockup ---------- */
.mockup-wrap { margin-top: clamp(44px, 6vw, 72px); perspective: 1800px; }
.mockup {
  position: relative;
  max-width: 1040px; margin-inline: auto;
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.mockup__bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--c-border); background: #fff; }
.mockup__bar .dot { width: 11px; height: 11px; border-radius: 50%; }
.mockup__bar .dot.r { background: #FF5F57; } .mockup__bar .dot.y { background: #FEBC2E; } .mockup__bar .dot.g { background: #28C840; }
.mockup__bar .url { margin-left: 14px; font-size: 12.5px; color: var(--c-muted-2); font-family: var(--font-body); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 8px; padding: 5px 12px; }
.mockup__body { display: grid; grid-template-columns: 210px 1fr; min-height: 470px; }

.app-side { background: var(--c-ink); color: #cbd5e1; padding: 18px 14px; }
.app-side .s-brand { display: flex; align-items: center; gap: 9px; padding: 4px 8px 16px; }
.app-side .s-brand img { width: 26px; height: 26px; border-radius: 8px; }
.app-side .s-brand span { font-family: var(--font-display); font-weight: 600; color: #fff; font-size: 15px; }
.app-side .s-group { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #64748B; padding: 14px 10px 6px; }
.app-side .s-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; font-size: 13.5px; color: #cbd5e1; }
.app-side .s-item .ico { width: 16px; height: 16px; opacity: .9; }
.app-side .s-item.active { background: rgba(99,102,241,.22); color: #fff; box-shadow: inset 0 0 0 1px rgba(129,140,248,.3); }
.app-side .s-item .badge { margin-left: auto; background: var(--c-primary); color: #fff; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 7px; }

.app-main { padding: 20px 22px; background: var(--c-bg); }
.app-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.app-h h3 { font-size: 17px; margin: 0; }
.app-h .pill { font-size: 12px; font-weight: 600; color: var(--c-primary); background: var(--c-primary-050); padding: 5px 11px; border-radius: 999px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.kpi { background: #fff; border: 1px solid var(--c-border); border-radius: 12px; padding: 13px 14px; }
.kpi .label { font-size: 11.5px; color: var(--c-muted); margin-bottom: 6px; }
.kpi .num { font-family: var(--font-display); font-size: 23px; font-weight: 700; color: var(--c-ink); line-height: 1; }
.kpi .trend { font-size: 11px; font-weight: 600; margin-top: 5px; display: inline-flex; align-items: center; gap: 3px; }
.kpi .trend.up { color: var(--c-success); } .kpi .trend.warn { color: var(--c-warning); }

.tickets { background: #fff; border: 1px solid var(--c-border); border-radius: 12px; overflow: hidden; }
.trow { display: grid; grid-template-columns: 78px 1fr 88px 74px; gap: 10px; align-items: center; padding: 12px 15px; border-bottom: 1px solid var(--c-border); font-size: 13px; }
.trow:last-child { border-bottom: 0; }
.trow .id { font-family: var(--font-body); font-weight: 600; color: var(--c-muted); font-size: 12px; }
.trow .subj { color: var(--c-ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; text-align: center; justify-self: start; }
.tag.crit { color: #B91C1C; background: var(--c-danger-050); }
.tag.high { color: #B45309; background: var(--c-warning-050); }
.tag.med  { color: #4338CA; background: var(--c-primary-050); }
.tag.low  { color: #0369A1; background: #F0F9FF; }
.sla { font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; justify-self: start; }
.sla .d { width: 7px; height: 7px; border-radius: 50%; }
.sla.ok .d { background: var(--c-success); } .sla.ok { color: var(--c-success); }
.sla.risk .d { background: var(--c-warning); } .sla.risk { color: #B45309; }
.sla.breach .d { background: var(--c-danger); } .sla.breach { color: #B91C1C; }

/* ---------- Marquee / trust strip ---------- */
.strip { border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); background: #fff; padding: 26px 0; }
.strip__inner { display: flex; align-items: center; justify-content: center; gap: clamp(22px, 5vw, 56px); flex-wrap: wrap; text-align: center; }
.strip__item { display: flex; align-items: center; gap: 10px; color: var(--c-muted); font-weight: 500; font-size: 15px; }
.strip__item strong { font-family: var(--font-display); color: var(--c-ink); font-size: 24px; font-weight: 700; }
.strip__item svg { color: var(--c-primary); }

/* ---------- Problem ---------- */
.problem { background: var(--grad-ink); color: #cbd5e1; position: relative; overflow: hidden; }
.problem::before { content:""; position:absolute; top:-160px; left:-120px; width:520px; height:520px; background: radial-gradient(closest-side, rgba(99,102,241,.28), transparent 70%); }
.problem::after { content:""; position:absolute; bottom:-200px; right:-120px; width:560px; height:560px; background: radial-gradient(closest-side, rgba(16,185,129,.18), transparent 70%); }
.problem .section-head h2, .problem h3 { color: #fff; }
.problem .section-head p { color: #94A3B8; }
.problem .eyebrow { color: #c7d2fe; background: rgba(99,102,241,.16); border-color: rgba(129,140,248,.3); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.pain-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.pain-list li { display: flex; gap: 13px; align-items: flex-start; font-size: 16.5px; color: #cbd5e1; }
.pain-list li .x { flex: none; width: 26px; height: 26px; border-radius: 8px; background: rgba(239,68,68,.16); color: #FCA5A5; display: grid; place-items: center; margin-top: 1px; }
.fix-card { background: rgba(255,255,255,.04); border: 1px solid rgba(148,163,184,.16); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 34px); backdrop-filter: blur(6px); }
.fix-card h3 { font-size: 22px; margin-bottom: 18px; }
.fix-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 15px; }
.fix-list li { display: flex; gap: 13px; align-items: flex-start; font-size: 15.5px; color: #e2e8f0; }
.fix-list li .c { flex: none; width: 26px; height: 26px; border-radius: 8px; background: rgba(16,185,129,.18); color: var(--c-success-light); display: grid; place-items: center; margin-top: 1px; }

/* ---------- Pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pillar { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 26px 22px; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #cbd5f5; }
.pillar__ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--c-primary-050); color: var(--c-primary); margin-bottom: 16px; }
.pillar h3 { font-size: 18px; margin-bottom: 8px; }
.pillar p { font-size: 14.5px; color: var(--c-muted); margin: 0; line-height: 1.55; }

/* ---------- Features ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 28px 24px; transition: transform .2s ease, box-shadow .2s ease; position: relative; overflow: hidden; }
.feature::after { content:""; position:absolute; inset:0 0 auto 0; height:3px; background: var(--grad-brand); opacity:0; transition: opacity .2s ease; }
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feature:hover::after { opacity:1; }
.feature__ico { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 16px; background: linear-gradient(135deg, var(--c-primary-050), #fff); border: 1px solid var(--c-border); color: var(--c-primary); }
.feature h3 { font-size: 18.5px; margin-bottom: 9px; }
.feature p { font-size: 14.5px; color: var(--c-muted); margin: 0; line-height: 1.55; }

/* ---------- Steps / how it works ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.step { position: relative; padding: 28px 22px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); }
.step__n { font-family: var(--font-display); font-weight: 700; font-size: 15px; width: 38px; height: 38px; border-radius: 10px; background: var(--grad-brand); color:#fff; display:grid; place-items:center; margin-bottom: 16px; box-shadow: var(--shadow-brand); }
.step h3 { font-size: 17.5px; margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--c-muted); margin: 0; }
.step__line { display:none; }

/* ---------- Roles ---------- */
.roles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.role { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 22px; background: var(--c-surface); }
.role .r-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.role h3 { font-size: 17px; margin: 0; }
.role .perm { font-size: 12px; font-weight: 600; color: var(--c-primary); background: var(--c-primary-050); border-radius: 999px; padding: 3px 9px; }
.role p { font-size: 14px; color: var(--c-muted); margin: 0; }

/* ---------- Security ---------- */
.security { background: var(--c-surface); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.sec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 28px; }
.sec-item { display: flex; gap: 13px; align-items: flex-start; }
.sec-item .k { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--c-success-050); color: var(--c-success); display: grid; place-items: center; }
.sec-item h3 { font-size: 15.5px; margin: 2px 0 4px; }
.sec-item p { font-size: 13.5px; color: var(--c-muted); margin: 0; line-height: 1.5; }

/* ---------- Comparison ---------- */
.cmp { max-width: 860px; margin-inline: auto; border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--c-surface); }
.cmp__row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; }
.cmp__row + .cmp__row { border-top: 1px solid var(--c-border); }
.cmp__row > div { padding: 15px 20px; font-size: 14.5px; }
.cmp__head { background: var(--c-bg); font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.cmp__head .r { color: var(--c-primary); }
.cmp__feat { color: var(--c-muted); }
.cmp__row .r-col { background: linear-gradient(180deg, rgba(79,70,229,.05), rgba(16,185,129,.04)); font-weight: 500; color: var(--c-ink); display:flex; align-items:center; gap:8px; }
.cmp__row .o-col { color: var(--c-muted); display:flex; align-items:center; gap:8px; }
.cmp .yes { color: var(--c-success); } .cmp .no { color: var(--c-muted-2); }

/* ---------- FAQ ---------- */
.faq { max-width: 800px; margin-inline: auto; }
.faq details { border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); margin-bottom: 12px; overflow: hidden; transition: box-shadow .2s ease; }
.faq details[open] { box-shadow: var(--shadow-sm); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 22px; font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--c-ink); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { flex: none; transition: transform .2s ease; color: var(--c-muted); }
.faq details[open] summary .chev { transform: rotate(180deg); color: var(--c-primary); }
.faq .ans { padding: 0 22px 20px; color: var(--c-muted); font-size: 15.5px; line-height: 1.62; }

/* ---------- CTA / demo form ---------- */
.cta { position: relative; overflow: hidden; }
.cta__card {
  background: var(--grad-ink); color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(34px, 5vw, 64px);
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center;
}
.cta__card::before { content:""; position:absolute; top:-180px; right:-120px; width:520px; height:520px; background: radial-gradient(closest-side, rgba(99,102,241,.4), transparent 70%); }
.cta__card::after { content:""; position:absolute; bottom:-200px; left:-140px; width:520px; height:520px; background: radial-gradient(closest-side, rgba(16,185,129,.24), transparent 70%); }
.cta__copy { position: relative; z-index: 1; }
.cta__copy .eyebrow { color: #c7d2fe; background: rgba(99,102,241,.16); border-color: rgba(129,140,248,.3); }
.cta__copy h2 { color: #fff; font-size: clamp(28px, 3.6vw, 42px); margin: 18px 0 14px; }
.cta__copy p { color: #cbd5e1; font-size: 17px; margin-bottom: 22px; }
.cta__bullets { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.cta__bullets li { display: flex; gap: 11px; align-items: center; font-size: 15px; color: #e2e8f0; }
.cta__bullets li svg { color: var(--c-success-light); flex: none; }

.form-card { position: relative; z-index: 1; background: #fff; border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 34px); box-shadow: var(--shadow-lg); }
.form-card h3 { font-size: 21px; margin-bottom: 6px; }
.form-card .sub { font-size: 14px; color: var(--c-muted); margin-bottom: 20px; }
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--c-ink); margin-bottom: 6px; font-family: var(--font-display); }
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--c-ink);
  padding: 12px 14px; border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-bg); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--c-primary); background: #fff; box-shadow: var(--ring); }
.field textarea { resize: vertical; min-height: 84px; }
.form-card .btn { width: 100%; margin-top: 6px; }
.form-note { font-size: 12.5px; color: var(--c-muted-2); text-align: center; margin: 14px 0 0; line-height: 1.5; }
/*  display:none, not off-screen.

    Off-screen (left:-9999px) is still a rendered, focusable field, and password managers
    and browser autofill happily write into it — which silently turned a real person's demo
    request into a discarded "bot" submission. A display:none input is skipped by every
    mainstream autofill, and a bot parsing the DOM still finds it. */
.hp { display: none !important; }
.form-success { display: none; text-align: center; padding: 20px 4px; }
.form-success.show { display: block; }
.form-success .ok { width: 62px; height: 62px; border-radius: 50%; background: var(--c-success-050); color: var(--c-success); display: grid; place-items: center; margin: 0 auto 16px; }
.form-success h3 { font-size: 22px; margin-bottom: 8px; }
.form-success p { color: var(--c-muted); font-size: 15px; margin: 0; }
.field-error { color: var(--c-danger); font-size: 12.5px; margin-top: 5px; display: none; }
.field.invalid input { border-color: var(--c-danger); background: var(--c-danger-050); }
.field.invalid .field-error { display: block; }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-ink); color: #94A3B8; padding: 56px 0 30px; }
.footer-top { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-start; padding-bottom: 32px; border-bottom: 1px solid rgba(148,163,184,.16); }
.footer-brand { max-width: 320px; }
.footer-brand .brand__name { color: #fff; }
.footer-brand p { margin: 14px 0 0; font-size: 14px; color: #94A3B8; line-height: 1.6; }
.footer-cols { display: flex; gap: clamp(30px, 6vw, 72px); flex-wrap: wrap; }
.footer-col h4 { font-family: var(--font-display); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: #cbd5e1; margin: 0 0 14px; }
.footer-col a { display: block; color: #94A3B8; font-size: 14px; margin-bottom: 9px; }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; font-size: 13px; color: #64748B; }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-top: 1px solid var(--c-border); box-shadow: 0 -8px 24px -18px rgba(15,23,42,.5); transform: translateY(120%); transition: transform .3s ease; display: none; }
.sticky-cta.show { transform: translateY(0); }
.sticky-cta .btn { width: 100%; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .pillars, .features, .steps, .sec-grid { grid-template-columns: repeat(2, 1fr); }
  .roles { grid-template-columns: repeat(2, 1fr); }
  .split, .cta__card { grid-template-columns: 1fr; }
  .cta__card { text-align: left; }
  .mockup__body { grid-template-columns: 1fr; }
  .app-side { display: none; }
}
@media (max-width: 760px) {
  .nav__links { display: none; }
  .nav__cta .btn-nav-demo { display: none; }
  .sticky-cta { display: block; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .trow { grid-template-columns: 64px 1fr 70px; }
  .trow .sla { display: none; }
  .cmp__row { grid-template-columns: 1.3fr .85fr .85fr; }
  .cmp__row > div { padding: 12px 13px; font-size: 13px; }
}
@media (max-width: 560px) {
  .pillars, .features, .steps, .sec-grid, .roles { grid-template-columns: 1fr; }
  .hero__cta .btn { width: 100%; }
  .strip__inner { gap: 20px; }
}

/* ============================================================
   Motion system + Localization (added)
   ============================================================ */

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100;
  background: var(--grad-brand); transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
}

/* ---------- Reveal system (richer) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.rev-left  { transform: translateX(-42px); }
.reveal.rev-right { transform: translateX(42px); }
.reveal.rev-scale { transform: scale(.9); }
.reveal.rev-blur  { transform: translateY(30px); filter: blur(6px); }
.reveal.in { opacity: 1; transform: none; filter: none; }

/* ---------- Animated gradient text ---------- */
.grad {
  background: linear-gradient(100deg, #4F46E5, #6366F1 35%, #10B981 75%, #4F46E5);
  background-size: 250% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradShift 9s ease-in-out infinite;
}
@keyframes gradShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ---------- Hero orbs: slow drift ---------- */
.hero__bg::before { animation: drift1 22s ease-in-out infinite; }
.hero__bg::after  { animation: drift2 26s ease-in-out infinite; }
@keyframes drift1 { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(34px); } }
@keyframes drift2 { 0%,100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(40px) translateX(-30px); } }

/* ---------- Mockup gentle float ---------- */
.mockup { animation: floaty 7s ease-in-out infinite; will-change: transform; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.mockup-wrap { will-change: transform; }

/* KPI number pop when revealed */
.kpi .num { transition: transform .5s cubic-bezier(.2,.9,.3,1.4); }

/* ---------- Micro-interactions ---------- */
.feature__ico, .pillar__ico { transition: transform .3s cubic-bezier(.2,.8,.2,1.2), background .3s ease, color .3s ease; }
.feature:hover .feature__ico { transform: translateY(-3px) rotate(-6deg) scale(1.06); }
.pillar:hover .pillar__ico { transform: translateY(-3px) scale(1.08); background: var(--c-primary); color: #fff; }
.nav__links a { position: relative; }
.nav__links a::after { content:""; position:absolute; left:0; right:100%; bottom:-5px; height:2px; background: var(--grad-brand); border-radius:2px; transition: right .25s ease; }
.nav__links a:hover::after { right:0; }
.role { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.role:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color:#cbd5f5; }
.step { transition: transform .2s ease, box-shadow .2s ease; }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.strip__item { transition: transform .2s ease; }
.strip__item:hover { transform: translateY(-3px); }

/* count-up numbers use tabular figures so width doesn't jump */
[data-count] { font-variant-numeric: tabular-nums; }

/* ---------- Localization section ---------- */
.locale { position: relative; overflow: hidden; }
.locale .split { align-items: center; }
.locale__copy .eyebrow { margin-bottom: 18px; }
.locale__copy h2 { font-size: clamp(28px, 4vw, 44px); }
.locale__copy .lead { font-size: clamp(17px, 2vw, 20px); color: var(--c-muted); margin-bottom: 22px; }
.locale__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.locale__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--c-ink); }
.locale__list li .c { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--c-success-050); color: var(--c-success); display: grid; place-items: center; margin-top: 1px; }

.locale__cards { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lcard { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden; }
.lcard__top { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; border-bottom: 1px solid var(--c-border); background: #fff; }
.lcard__lang { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--c-primary); background: var(--c-primary-050); border-radius: 999px; padding: 4px 11px; }
.lcard__dir { font-size: 11px; color: var(--c-muted-2); font-weight: 600; letter-spacing: .04em; }
.lcard__body { padding: 15px; display: grid; gap: 10px; }
.lrow { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--c-ink); }
.lrow .tick { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--c-primary-050); color: var(--c-primary); }
.lrow .badge { margin-left: auto; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.lrow .badge.ok { color: var(--c-success); background: var(--c-success-050); }
.lrow .badge.hi { color: #B45309; background: var(--c-warning-050); }
.lcard.rtl { direction: rtl; }
.lcard.rtl .lrow .badge { margin-left: 0; margin-right: auto; }
.lcard .ar { font-family: "Cairo", "Noto Kufi Arabic", var(--font-body); }
.lcard__title { font-family: var(--font-display); font-weight: 600; font-size: 14px; margin: 0; }
.lcard.rtl .lcard__title { font-family: "Cairo", var(--font-body); }

@media (max-width: 560px) {
  .locale__cards { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion: turn it all off ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .grad { animation: none; }
  .hero__bg::before, .hero__bg::after, .mockup { animation: none; }
  .scroll-progress { display: none; }
  * { scroll-behavior: auto !important; }
}

/* ==========================================================================
   Additions for the in-application version of this page
   ========================================================================== */

/* ---------- Real screenshot in place of the hand-built app imitation ----------
   The .app-side / .kpis / .trow rules above are what styled that imitation. They are
   left alone rather than deleted: the markup is gone, so they cost nothing, and
   deleting them would make this file diverge from the supplied stylesheet for no
   gain. The screenshot sits in the same rounded, clipped frame the fake did. */
.mockup__shot { display: block; background: var(--c-bg); }
.mockup__shot img {
  display: block;
  width: 100%;
  height: auto;
  /*  The capture is wider than it is tall; without a cap a tall screenshot would push
      the whole fold down on narrow screens. */
  max-height: 620px;
  object-fit: cover;
  object-position: top center;
}

/* ---------- Server-side refusals on the demo form ----------
   Distinct from .field-error, which marks one input. This carries what the server
   said — a duplicate address, or too many attempts — and is the only place those
   sentences can appear, so it must not be easy to miss. */
.form-error {
  background: var(--c-danger-050);
  border: 1px solid var(--c-danger);
  color: var(--c-danger);
  border-radius: var(--radius-sm, 10px);
  padding: 11px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.form-error[hidden] { display: none; }

/* ---------- "Already using Resolve?" under the demo copy ---------- */
.cta__alt { margin: 18px 0 0; font-size: 14px; color: var(--c-muted); }
.cta__alt a { color: var(--c-primary); font-weight: 600; text-decoration: none; }
.cta__alt a:hover { text-decoration: underline; }

/* ---------- Busy button ----------
   The same treatment as the application, so a button behaves identically either side
   of the sign-in boundary. Hidden until .is-busy is set by resolve-landing.js. */
.btn .btn-spinner {
  display: none;
  width: .95rem; height: .95rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: resolve-landing-spin .6s linear infinite;
  margin-right: .5rem;
  vertical-align: -2px;
}
.btn.is-busy .btn-spinner { display: inline-block; }
.btn.is-busy { opacity: .75; cursor: progress; pointer-events: none; }
.btn.is-busy .arrow { display: none; }
@keyframes resolve-landing-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn .btn-spinner { animation-duration: 1.6s; }
}

/* ---------- Brand marks ----------
   Two different jobs, so two different treatments.

   The HEADER mark is transparent artwork on a near-white bar: it needs no tile, no
   radius and no shadow, because there is no edge to soften — any of those would put a
   visible container around a logo that is already sitting on the page. Larger than the
   design's 38px so it carries the brand rather than labelling it. */
.brand__mark--plain {
  width: auto;
  height: 48px;
  border-radius: 0;
  box-shadow: none;
  /*  The artwork is 189x174, so height drives it and width follows. Stated so the row
      does not reflow between layout and image decode. */
  aspect-ratio: 189 / 174;
}

/*  The header lockup: mark and wordmark in one piece, backdrop removed.
    1384x463 native, so height drives it and the ratio holds the width — stated rather
    than left to the intrinsic size so the header does not reflow on decode. */
.brand__lockup {
  display: block;
  /*  36px, having tried 48.

      The box is not stretched — the ratio below is the artwork's own 1384x463 — but the
      lockup sets its "R" at full artwork height while "esolve" is only x-height, so the
      mark carries far more of the box than it did when the wordmark was live text beside
      it. At 48px the R stood taller than every other element in the bar and the whole
      thing read as vertically stretched and oversized.

      36px puts the lettering at roughly 19px, which is about where the old 21px text sat,
      and drops the mark below the height of the buttons either side of it. */
  height: 36px;
  width: auto;
  aspect-ratio: 1384 / 463;
  border-radius: 0;
  box-shadow: none;
  /*  Belt and braces against distortion: if the ratio above is ever edited to something
      the file does not match, the artwork letterboxes instead of squashing. */
  object-fit: contain;

  /*  Nudged up so the WORDMARK, not the box, lines up with the nav.

      The artwork is not vertically centred on its own lettering: the "R" runs the full
      height while "esolve" sits low, with descender space under it. Centring the box
      therefore leaves the word sitting below the navigation links beside it. Five pixels
      of visual offset puts the lettering on their line.

      transform rather than margin, so it moves what you see without changing the header's
      layout or its height. */
  transform: translateY(-5px);
}

/*  The FOOTER mark is the white-backed square on a near-black panel, which is the case
    the tile exists for. Same construction as the sign-in screen: white ground, a 2px
    inset (the artwork carries its own optical margin, so more would shrink the mark
    inside its own tile), and a hairline ring plus a lifted shadow — without the ring a
    plain white square reads as a hole punched in the panel rather than something resting
    on it. */
.brand__tile {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  background: #fff;
  border-radius: 13px;
  padding: 2px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .10),
    0 6px 16px -6px rgba(2, 6, 23, .75);
}
.brand__tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* never squash the mark to fill the tile */
  display: block;
  border-radius: 11px;   /* follows the tile's inner corner so no white shows at the arc */
}

/*  The footer wordmark grows with the tile, or a 46px mark beside 21px text looks
    like the two were set at different scales. */
.footer-brand .brand__name { font-size: 23px; }

@media (max-width: 560px) {
  /*  Smaller on a phone: at full size the lockup and the Sign in button compete for the
      same row. The lockup is wide rather than square, so it needs the larger reduction. */
  .brand__mark--plain { height: 40px; }
  .brand__lockup { height: 30px; }
}

/* ---------- Language switch in the header ----------
   Only the language that is NOT current is shown: with two languages a picker
   is unnecessary ceremony, and a single button that says "العربية" is both the
   label and the action. The current one is rendered disabled by the partial,
   so it is hidden here rather than shown greyed. */
.nav__lang { display: inline-flex; align-items: center; }
.nav__lang form { display: inline-flex; }
.nav__lang .btn[disabled] { display: none; }
.nav__lang .btn {
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-pill, 999px);
  color: var(--c-muted);
  background: transparent;
  border: 1px solid var(--c-border);
}
.nav__lang .btn:hover { color: var(--c-ink); background: var(--c-surface); }

@media (max-width: 560px) {
  /*  Kept at every width — it is the control a reader of the other language
      needs first, so it must never be the thing that collapses away. */
  .nav__lang .btn { padding: 7px 11px; font-size: 13px; }
}

/* ---------- Sign in beside Book a demo ----------
   Quieter than the primary button on purpose: the page is selling the demo, and the
   sign-in link is for somebody who already knows what they came for. */
.btn-nav-signin { padding: 11px 20px; font-size: 14.5px; }

/*  The sticky bar now carries two actions, so its single full-width rule above would
    stack them into a two-storey bar on a phone. Side by side, with the demo given the
    larger share. */
@media (max-width: 760px) {
  /*  Overrides the `display: block` set for this breakpoint further up, which would
      stack the two buttons into a two-storey bar. */
  .sticky-cta { display: flex; gap: 10px; align-items: center; }
  .sticky-cta .btn { width: auto; flex: 1 1 0; margin: 0; }
  .sticky-cta .btn-ghost { flex: 0 0 38%; }
}