/* Mizan, the Seller Bridge — glass UI in emerald and pearl */
:root {
  --em-950: #04241b;
  --em-900: #052e22;
  --em-800: #073b2c;
  --em-700: #0a5a42;
  --em-600: #0b8a62;
  --em-500: #12a877;
  --em-300: #6ee7b7;
  --em-100: #ddf5eb;
  --pearl: #f3f5f3;
  --sheen-lilac: #e7e1f4;
  --sheen-blush: #f5e7e3;
  --sheen-aqua: #d6f0e8;
  --ink: #0f241d;
  --muted: #536b62;
  --cut: #b4233a;
  --cut-soft: #fbe3e7;
  --glass: rgba(255, 255, 255, .58);
  --glass-strong: rgba(255, 255, 255, .8);
  --glass-line: rgba(255, 255, 255, .75);
  --glass-dark: rgba(255, 255, 255, .08);
  --glass-dark-line: rgba(255, 255, 255, .18);
  --shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 48px -18px rgba(7, 59, 44, .28);
  --r-xl: 28px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --wrap: 1180px;
  --font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --arabic: "IBM Plex Sans Arabic", "Geeza Pro", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--pearl);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* pearl sheen behind the glass */
.pearl-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40vw 40vw at 8% 30%, var(--sheen-aqua), transparent 70%),
    radial-gradient(36vw 36vw at 92% 18%, var(--sheen-lilac), transparent 70%),
    radial-gradient(34vw 34vw at 70% 85%, var(--sheen-blush), transparent 70%),
    radial-gradient(30vw 30vw at 20% 95%, rgba(18, 168, 119, .16), transparent 70%),
    var(--pearl);
}

img, svg { display: block; max-width: 100%; }
a { color: var(--em-700); }
:focus-visible { outline: 3px solid var(--em-300); outline-offset: 2px; border-radius: 6px; }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
h1, h2, h3 { line-height: 1.1; margin: 0 0 .5em; letter-spacing: -0.025em; }
h1 { font-size: clamp(2.5rem, 5.6vw, 4.4rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 780; }
h3 { font-size: 1.18rem; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1em; max-width: 64ch; }
.lead { font-size: 1.18rem; color: var(--muted); }

/* ---------- Glass primitives ---------- */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}
.glass-dark {
  background: var(--glass-dark);
  border: 1px solid var(--glass-dark-line);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 24px 60px -24px rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
}

/* ---------- Header ---------- */
.site-header { position: sticky; top: 12px; z-index: 30; margin-top: 12px; }
.site-header .bar { display: flex; align-items: center; gap: 26px; height: 64px; padding: 0 10px 0 18px; border-radius: 999px; background: rgba(255,255,255,.72); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--em-800); }
.brand img { width: 38px; height: 38px; }
.brand b { font-weight: 800; font-size: 1.3rem; letter-spacing: -0.03em; line-height: 1; display: block; }
.brand small { display: block; font-size: .72rem; font-weight: 600; color: var(--em-600); letter-spacing: .01em; margin-top: 2px; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { text-decoration: none; color: var(--muted); font-size: .95rem; font-weight: 500; }
.nav a:hover { color: var(--ink); }
.site-header .btn { padding: 11px 20px; font-size: .95rem; }
@media (max-width: 900px) { .nav { display: none; } .site-header .btn { margin-left: auto; } }
@media (max-width: 420px) { .brand small { display: none; } .site-header .btn { padding: 10px 14px; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 26px; border-radius: 999px; border: 1px solid transparent;
  background: linear-gradient(180deg, var(--em-500), var(--em-600));
  color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 24px -10px rgba(11, 138, 98, .7);
  transition: transform .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 14px 30px -10px rgba(11, 138, 98, .8); }
.btn.glassy { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); box-shadow: none; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.btn.glassy:hover { background: rgba(255,255,255,.2); }
.btn.pearl { background: var(--glass-strong); color: var(--em-800); border-color: var(--glass-line); box-shadow: var(--shadow); }
.btn.pearl:hover { background: #fff; }

/* ---------- Hero (dark emerald with glass) ---------- */
.hero {
  position: relative; margin-top: -88px; padding: 160px 0 120px; color: #e6f2ed; overflow: hidden;
  background:
    radial-gradient(50vw 40vw at 85% 10%, rgba(110, 231, 183, .28), transparent 65%),
    radial-gradient(40vw 34vw at 5% 90%, rgba(231, 225, 244, .22), transparent 65%),
    radial-gradient(30vw 30vw at 55% 60%, rgba(18, 168, 119, .35), transparent 65%),
    linear-gradient(160deg, var(--em-950), var(--em-800) 55%, var(--em-700));
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.hero::before { /* pearl orb */
  content: ""; position: absolute; width: 420px; height: 420px; left: 40%; top: -170px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #e8e3f2 45%, #cfe9df 75%, transparent 76%);
  opacity: .1; filter: blur(30px);
}
.hero .wrap { position: relative; display: grid; grid-template-columns: .92fr 1.18fr; gap: 48px; align-items: center; }
.hero h1 { color: #fff; max-width: 15ch; font-size: clamp(2.4rem, 4.4vw, 3.6rem); }
.hero .lead { color: #bcd6cb; max-width: 44ch; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 26px; }
.hero-note { font-size: .95rem; color: #a9c7bb; display: flex; gap: 10px; align-items: center; margin: 0; }
.hero-note .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--em-300); box-shadow: 0 0 0 4px rgba(110,231,183,.2); flex: none; }

.stage { position: relative; padding: 28px 0 40px; }
.screen { padding: 10px; border-radius: 22px; }
.screen img { border-radius: 14px; width: 100%; height: auto; }
.screen .dots { display: flex; gap: 6px; padding: 4px 6px 10px; }
.screen .dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.35); }
.float {
  position: absolute; padding: 14px 16px; border-radius: var(--r-md); color: var(--ink); min-width: 210px;
  background: rgba(255,255,255,.72); border: 1px solid var(--glass-line); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  animation: drift 7s ease-in-out infinite;
}
.float small { display: block; color: var(--muted); font-size: .8rem; }
.float b { font-size: 1.25rem; letter-spacing: -0.02em; }
.float .em { color: var(--em-600); }
.float .cut { color: var(--cut); }
.float.f1 { left: -40px; bottom: 4px; }
.float.f2 { right: -22px; top: -4px; animation-delay: -3.5s; }
@keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 1000px) { .hero .wrap { grid-template-columns: 1fr; } .float.f1 { left: 8px; } .float.f2 { right: 8px; } }
@media (max-width: 560px) { .float { min-width: 0; padding: 10px 12px; } .float b { font-size: 1rem; } .float.f2 { top: -16px; } .float.f1 { bottom: 0; } }

/* channels strip */
.channels { margin-top: -34px; position: relative; z-index: 2; }
.channels .glass { display: flex; gap: 14px 28px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 18px 26px; background: rgba(255,255,255,.75); }
.channels p { margin: 0; font-weight: 600; color: var(--em-800); }
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.8); border: 1px solid rgba(15,36,29,.08); font-size: .9rem; font-weight: 700; color: var(--em-800); }

/* ---------- Sections ---------- */
section { padding: 96px 0; }
.section-intro { max-width: 740px; margin-bottom: 44px; }

/* Calculator */
.calc { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; }
.calc .copy p { color: var(--muted); }
.receipt { padding: 28px; }
.receipt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 2px; }
.receipt-head h3 { margin: 0; }
.receipt-head span { font-size: .85rem; color: var(--muted); }
.receipt-sub { font-size: .9rem; color: var(--muted); margin-bottom: 16px; }
.wf { list-style: none; margin: 0; padding: 0; }
.wf li { display: grid; grid-template-columns: 11.5rem 1fr 5.4rem; align-items: center; gap: 12px; padding: 6px 0; font-size: .95rem; }
.wf .amt { text-align: right; font-weight: 700; }
.wf .track { position: relative; height: 14px; }
.wf .bar { position: absolute; top: 0; height: 100%; border-radius: 7px; transition: left .5s ease, width .5s ease; }
.wf li.sale .bar { background: linear-gradient(90deg, var(--em-800), var(--em-700)); }
.wf li.cut .bar { background: linear-gradient(90deg, #d4566c, var(--cut)); }
.wf li.cut .amt { color: var(--cut); }
.wf li.keep { border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 12px; font-weight: 800; }
.wf li.keep .bar { background: linear-gradient(90deg, var(--em-500), var(--em-300)); }
.wf li.keep .amt { color: var(--em-600); font-size: 1.2rem; }
.wf li.keep.loss .bar { background: var(--cut); }
.wf li.keep.loss .amt { color: var(--cut); }
@media (max-width: 520px) { .wf li { grid-template-columns: 7.2rem 1fr 4.6rem; font-size: .86rem; } }
.verdict { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--r-sm); background: rgba(221, 245, 235, .85); font-size: .95rem; }
.verdict.bad { background: rgba(251, 227, 231, .9); }
.knob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.calc .knob-grid { margin-top: 24px; }
.knob label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: 4px; }
.knob input, .form input, .form select {
  width: 100%; font: inherit; font-size: .97rem; padding: 10px 12px; border-radius: var(--r-sm);
  border: 1px solid rgba(15, 36, 29, .12); background: rgba(255,255,255,.8); color: var(--ink);
}
.knob input:focus, .form input:focus, .form select:focus { outline: none; border-color: var(--em-500); box-shadow: 0 0 0 4px rgba(18,168,119,.15); }
.knob-note { font-size: .82rem; color: var(--muted); margin: 12px 0 0; }
@media (max-width: 960px) { .calc { grid-template-columns: 1fr; } }

/* Dark emerald band */
.band-em {
  color: #e6f2ed; border-radius: var(--r-xl); margin-inline: 12px; position: relative; overflow: hidden;
  background:
    radial-gradient(40vw 30vw at 90% 100%, rgba(110, 231, 183, .22), transparent 65%),
    radial-gradient(36vw 30vw at 0% 0%, rgba(231, 225, 244, .16), transparent 65%),
    linear-gradient(150deg, var(--em-900), var(--em-800));
}
.band-em h2, .band-em h3 { color: #fff; }
.band-em .lead, .band-em p { color: #bcd6cb; }
.bridge { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 18px; align-items: stretch; }
.bridge .side { padding: 26px; }
.bridge .side ul { margin: 0; padding-left: 18px; color: #c4dad1; }
.bridge .side li { margin-bottom: 7px; }
.bridge .span { display: grid; gap: 10px; align-content: center; }
.gap-item { padding: 12px 16px; border-radius: var(--r-md); }
.gap-item b { color: #fff; display: block; font-size: .98rem; }
.gap-item span { color: #a9c7bb; font-size: .88rem; }
.bridge-foot { margin: 30px 0 0; font-size: 1.12rem; color: #fff !important; }
.bridge-foot strong { color: var(--em-300); }
@media (max-width: 960px) { .bridge { grid-template-columns: 1fr; } }

/* Product tour */
.tour-tabs { display: inline-flex; gap: 6px; padding: 6px; border-radius: 999px; margin-bottom: 26px; flex-wrap: wrap; }
.tour-tabs button { font: inherit; font-weight: 600; font-size: .95rem; padding: 10px 18px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.tour-tabs button[aria-selected="true"] { background: #fff; color: var(--em-800); box-shadow: 0 6px 16px -8px rgba(7,59,44,.35); }
.tour { display: grid; grid-template-columns: 1.55fr .8fr; gap: 32px; align-items: center; }
.tour .screen .dots i { background: rgba(7,59,44,.18); }
.tour .screen img { transition: opacity .25s; }
.tour-copy h3 { font-size: 1.5rem; }
.tour-copy p { color: var(--muted); }
.tour-copy ul { padding-left: 20px; margin: 0; }
.tour-copy li { margin-bottom: 6px; }
@media (max-width: 960px) { .tour { grid-template-columns: 1fr; } }

/* Steps — a real sequence */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: step; }
.steps li { counter-increment: step; padding: 24px; }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  font-weight: 800; font-size: 1.1rem; color: #fff; margin-bottom: 16px;
  background: linear-gradient(160deg, var(--em-500), var(--em-700)); box-shadow: 0 8px 18px -8px rgba(11,138,98,.8);
}
.steps p { color: var(--muted); font-size: .97rem; margin: 0; }
@media (max-width: 960px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* Feature grid */
.feat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feat > div { padding: 24px; }
.feat .ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 14px; background: linear-gradient(160deg, var(--em-100), #fff); border: 1px solid var(--glass-line); }
.feat .ic svg { width: 22px; height: 22px; }
.feat ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: .95rem; }
.feat li { margin-bottom: 5px; }
@media (max-width: 1000px) { .feat { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .feat { grid-template-columns: 1fr; } }

/* Audience */
.audience { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.audience > div { padding: 26px; }
.audience p { color: var(--muted); margin: 0; }
@media (max-width: 900px) { .audience { grid-template-columns: 1fr; } }

/* Plans */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.plan { padding: 30px; display: flex; flex-direction: column; }
.plan.pick { background: linear-gradient(170deg, rgba(255,255,255,.9), rgba(221,245,235,.75)); border: 1.5px solid rgba(18,168,119,.45); }
.plan .tag { align-self: flex-start; font-size: .8rem; font-weight: 700; background: var(--em-100); color: var(--em-700); padding: 5px 11px; border-radius: 999px; margin-bottom: 14px; }
.plan .for { color: var(--muted); font-size: .95rem; margin-bottom: 8px; }
.plan .price { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.03em; margin: 4px 0 0; color: var(--em-800); }
.plan .price-note { font-size: .88rem; color: var(--muted); margin: 0; }
.plan ul { padding-left: 20px; margin: 16px 0 26px; flex: 1; }
.plan li { margin-bottom: 6px; font-size: .97rem; }
.plans-note { margin-top: 20px; font-size: .93rem; color: var(--muted); }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }

/* Investor teaser */
.inv { display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px; align-items: center; }
.inv-points { display: grid; gap: 12px; }
.inv-points div { padding: 16px 18px; border-radius: var(--r-md); }
.inv-points b { color: #fff; display: block; }
.inv-points span { color: #a9c7bb; font-size: .95rem; }
@media (max-width: 900px) { .inv { grid-template-columns: 1fr; } }

/* FAQ */
.faq { max-width: 860px; padding: 8px 28px; }
.faq details { border-bottom: 1px solid rgba(15,36,29,.1); padding: 18px 0; }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 1.06rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 1.4rem; line-height: 1; color: var(--em-600); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 10px 0 0; color: var(--muted); }

/* Demo form */
.cta-block { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: start; }
.form { padding: 28px; display: grid; gap: 14px; color: var(--ink); background: rgba(255,255,255,.88); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form label { font-size: .88rem; font-weight: 600; display: block; margin-bottom: 4px; }
.form fieldset { border: 0; padding: 0; margin: 0; }
.form legend { font-size: .88rem; font-weight: 600; margin-bottom: 6px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; border: 1px solid rgba(15,36,29,.12); background: #fff; border-radius: 999px; padding: 6px 12px; margin: 0; cursor: pointer; }
.checks input { width: auto; accent-color: var(--em-600); }
.form .btn { width: 100%; }
.form-msg { font-size: .95rem; padding: 12px 14px; border-radius: var(--r-sm); background: var(--em-100); display: none; margin: 0; }
.form-msg.show { display: block; }
.form-msg.err { background: var(--cut-soft); }
@media (max-width: 900px) { .cta-block { grid-template-columns: 1fr; } .form .row { grid-template-columns: 1fr; } }

/* Footer */
.site-footer { padding: 40px 0 48px; font-size: .9rem; color: var(--muted); }
.site-footer .wrap { display: flex; gap: 20px; justify-content: space-between; flex-wrap: wrap; align-items: center; }
.site-footer .brand img { width: 30px; height: 30px; }
.site-footer .ar { font-family: var(--arabic); font-weight: 700; color: var(--em-600); }

/* ---------- Investor page ---------- */
.inv-hero { padding-bottom: 100px; }
.inv-hero .wrap { grid-template-columns: 1fr; }
.inv-hero h1 { max-width: 16ch; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.facts > div { padding: 22px; }
.facts b { display: block; font-size: 1.4rem; letter-spacing: -0.02em; color: #fff; }
.facts span { color: #a9c7bb; font-size: .95rem; }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr; } }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.two > .glass { padding: 30px; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }
.model { padding: 28px; }
.model-out { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.model-out div { border-radius: var(--r-sm); background: rgba(255,255,255,.75); padding: 14px; }
.model-out small { display: block; color: var(--muted); font-size: .82rem; }
.model-out b { font-size: 1.35rem; letter-spacing: -0.02em; }
.model-out .hl { background: rgba(221,245,235,.9); }
.model-out .hl b { color: var(--em-600); }
@media (max-width: 560px) { .model-out { grid-template-columns: 1fr; } }
.chart { margin-top: 20px; }
.chart svg { width: 100%; height: auto; }
.table-wrap { overflow-x: auto; padding: 6px; }
.table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.table th, .table td { text-align: left; padding: 13px 14px; border-bottom: 1px solid rgba(15,36,29,.08); vertical-align: top; }
.table th { font-weight: 700; color: var(--muted); font-size: .9rem; }
.table tr.us td { background: rgba(221,245,235,.85); font-weight: 600; }
.road { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.road li { padding: 22px; }
.road li.now { border: 1.5px solid rgba(18,168,119,.5); background: linear-gradient(170deg, rgba(255,255,255,.9), rgba(221,245,235,.75)); }
.road small { color: var(--em-600); font-weight: 700; display: block; margin-bottom: 6px; }
.road p { font-size: .95rem; color: var(--muted); margin: 0 0 10px; }
.road .gate { font-size: .88rem; border-top: 1px dashed rgba(15,36,29,.15); padding-top: 10px; margin: 0; color: var(--ink); }
@media (max-width: 900px) { .road { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .road { grid-template-columns: 1fr; } }

/* grid children may shrink on small screens */
.hero .wrap > *, .calc > *, .tour > *, .cta-block > *, .two > *, .inv > *, .bridge > * { min-width: 0; }
.band-em .model.glass { background: rgba(250, 252, 251, .94); }