:root {
--brand-1: #BCA68E;
--brand-2: #312A3D;
--brand-3: #8A6338;
--black:   #000000;
--white:   #FFFFFF;
--brand-3-700: #6E4E32;
--brand-3-300: #B88556;
--brand-1-200: #E7DCCE;
--brand-2-700: #211C29;
--brand-2-300: #4A3473;
--tier-corporate: #6E4E32;
--tier-growth:    #4A3473;
--tier-starter:   #2C4721;
--neutral-0:   #FFFFFF;
--neutral-50:  #FAF7F3;
--neutral-100: #F3EDE5;
--neutral-200: #E7DCCE;
--neutral-300: #D2C3AF;
--neutral-400: #A99478;
--neutral-500: #7E6B52;
--neutral-600: #574936;
--neutral-700: #3A3027;
--neutral-800: #221C18;
--neutral-900: #120F0C;
--color-primary:        var(--brand-3);
--color-primary-hover:  var(--brand-3-700);
--color-accent:         var(--brand-1);
--color-depth:          var(--brand-2);
--surface-page:    var(--white);
--surface-card:    var(--white);
--surface-muted:   var(--neutral-50);
--surface-hero:    var(--brand-3);
--surface-dark:    var(--brand-2);
--surface-inverse: var(--brand-2-700);
--text-strong:   var(--black);
--text-body:     var(--neutral-700);
--text-muted:    var(--neutral-500);
--text-on-dark:  var(--white);
--text-on-brand: var(--white);
--text-accent:   var(--brand-3);
--border-subtle: var(--neutral-200);
--border-default: var(--neutral-300);
--border-strong: var(--neutral-400);
--success: #2C4721;
--warning: #B88556;
--danger:  #8A3A2E;
--info:    #4A3473;
}


:root {
--font-h1:      'Inter', system-ui, sans-serif;
--font-h2:      'Raleway', system-ui, sans-serif;
--font-h3:      'JetBrains Mono', ui-monospace, monospace;
--font-body:    'Cabin', system-ui, sans-serif;
--font-faq:     'Parkinsans', system-ui, sans-serif;
--font-display: 'Krona One', 'Inter', sans-serif;
--font-mono:    'JetBrains Mono', ui-monospace, monospace;
--font-ar-heading: 'El Messiri', 'Cairo', sans-serif;
--font-ar-ui:      'Tajawal', 'Cairo', sans-serif;
--font-ar-body:    'Cairo', 'Tajawal', sans-serif;
--font-sans:    var(--font-h1);
--font-heading: var(--font-h1);
--fs-h1:   64px;   --lh-h1:   1.2;    --fw-h1:   700;
--fs-h2:   48px;   --lh-h2:   1.2;    --fw-h2:   600;
--fs-h3:   32px;   --lh-h3:   1.3;    --fw-h3:   400;
--fs-h4:   20px;   --lh-h4:   1.3;    --fw-h4:   700;
--fs-h5:   18px;   --lh-h5:   1.4;    --fw-h5:   600;
--fs-h6:   16px;   --lh-h6:   1.4;    --fw-h6:   600;
--fs-h6b:  33px;   --lh-h6b:  1.2;    --fw-h6b:  400;
--fs-body: 16px;   --lh-body: 1.4;    --fw-body: 400;
--fs-sm:   14px;
--fs-xs:   12px;
--fs-lg:   18px;
--ls-display: 0.12em;
--ls-tight:   -0.01em;
--ls-normal:  0;
}


:root {
--space-0:  0;
--space-1:  4px;
--space-2:  8px;
--space-3:  12px;
--space-4:  16px;
--space-5:  20px;
--space-6:  24px;
--space-7:  28px;
--space-8:  32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
--pad-card-corporate: 28px 31px;
--pad-card-growth:    26px 25px;
--pad-card-starter:   28px 25px;
--gap-card-corporate: 11px;
--gap-card-growth:    7px;
--gap-pricing-outer:  11px;
--container-max: 1200px;
--section-pad-y: 96px;
--section-pad-x: 24px;
--bp-desktop: 1200px;
--bp-tablet:  810px;
--bp-mobile:  809px;
}


:root {
--radius-0:    0;
--radius-sm:   8px;
--radius-md:   14px;
--radius-lg:   24px;
--radius-pill: 999px;
--radius-card: 55px;
--border-width: 1px;
--shadow-realistic:
0 20px 40px -8px rgba(0, 0, 0, 0.10),
0 8px 16px -6px rgba(0, 0, 0, 0.08);
--shadow-sm:
0 1px 2px rgba(0, 0, 0, 0.06),
0 1px 3px rgba(0, 0, 0, 0.04);
--shadow-md:
0 4px 12px -2px rgba(0, 0, 0, 0.10),
0 2px 6px -2px rgba(0, 0, 0, 0.06);
--shadow-lg:
0 24px 48px -12px rgba(0, 0, 0, 0.18),
0 8px 20px -8px rgba(0, 0, 0, 0.10);
--gradient-pricing:
linear-gradient(157deg,
rgba(0, 0, 0, 0.99) 47%,
rgba(184, 133, 86, 0.34) 100%);
--gradient-hero:
linear-gradient(160deg, #9A6F3F 0%, #8A6338 55%, #6E4E32 100%);
--gradient-depth:
linear-gradient(160deg, #3A3148 0%, #312A3D 60%, #211C29 100%);
--ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast:   140ms;
--dur-base:   240ms;
--dur-slow:   420ms;
}


*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-body);
background: var(--surface-page);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.sb-h1 { font-family: var(--font-h1); font-weight: var(--fw-h1); font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--text-on-dark); letter-spacing: var(--ls-tight); margin: 0; }
.sb-h2 { font-family: var(--font-h2); font-weight: var(--fw-h2); font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--text-strong); margin: 0; }
.sb-h3 { font-family: var(--font-h3); font-weight: var(--fw-h3); font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--text-strong); margin: 0; }
.sb-h4 { font-family: var(--font-h1); font-weight: var(--fw-h4); font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--text-strong); margin: 0; }
.sb-h5 { font-family: var(--font-h1); font-weight: var(--fw-h5); font-size: var(--fs-h5); line-height: var(--lh-h5); color: var(--text-on-dark); margin: 0; }
.sb-h6 { font-family: var(--font-h1); font-weight: var(--fw-h6); font-size: var(--fs-h6); line-height: var(--lh-h6); color: var(--text-strong); margin: 0; }
.sb-brandmark {
font-family: var(--font-display);
font-weight: var(--fw-h6b);
font-size: var(--fs-h6b);
line-height: var(--lh-h6b);
letter-spacing: var(--ls-display);
text-transform: uppercase;
color: var(--text-on-dark);
margin: 0;
}
.sb-body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); }
.sb-faq  { font-family: var(--font-faq);  font-size: var(--fs-body); line-height: var(--lh-body); }
.sb-mono { font-family: var(--font-mono); }
[dir="rtl"] { text-align: right; }
.sb-ar          { font-family: var(--font-ar-body); direction: rtl; }
.sb-ar-heading  { font-family: var(--font-ar-heading); direction: rtl; font-weight: 600; }
.sb-ar-ui       { font-family: var(--font-ar-ui); direction: rtl; }