/* Kayanac Connect — brand styling (Kayanac Design System v1 tokens) */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');

:root {
  /* Brand */
  --ks-brand:#ed1c24; --ks-brand-strong:#c1121f; --ks-brand-deep:#791c24; --ks-brand-soft:#fdecec;
  --ks-brand-grad:linear-gradient(135deg,#ed1c24,#c1121f);
  /* Navy chrome */
  --ks-navy:#1b2233; --ks-navy-2:#232c40; --ks-navy-line:#2f3a56; --ks-navy-ink:#eef1f8; --ks-navy-muted:#98a2bd;
  /* Neutrals */
  --ks-ink:#2d2d2d; --ks-ink-2:#514d49; --ks-muted:#6f6a66; --ks-faint:#a5a09b; --ks-line:#e8e4e1; --ks-line-2:#f1eeeb;
  /* Surfaces */
  --ks-surface:#fff; --ks-surface-2:#f7f6f5; --ks-bg:#fff;
  /* Semantic */
  --ks-ok:#16a34a; --ks-ok-soft:#e7f6ec; --ks-warn:#d97706; --ks-warn-soft:#fdf3e6;
  --ks-danger:#dc2626; --ks-danger-soft:#fdecec; --ks-info:#2563eb; --ks-info-soft:#e9f0fe;
  /* Shape */
  --ks-r:14px; --ks-r-sm:10px; --ks-r-xs:8px; --ks-r-pill:999px;
  /* Spacing */
  --ks-1:4px; --ks-2:8px; --ks-3:12px; --ks-4:16px; --ks-5:20px; --ks-6:24px; --ks-7:32px; --ks-8:40px;
  /* Elevation */
  --ks-shadow-sm:0 1px 2px rgba(27,34,51,.06); --ks-shadow:0 6px 22px rgba(27,34,51,.08);
  --ks-shadow-lg:0 24px 60px rgba(27,34,51,.16); --ks-ring:0 0 0 3px rgba(237,28,36,.18);
  /* Type */
  --ks-font:'Tajawal',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; font-family:var(--ks-font); color:var(--ks-ink); background:var(--ks-bg);
  line-height:1.75; font-size:15px; -webkit-font-smoothing:antialiased;
  /* sticky footer: the footer sits at the bottom even on short pages */
  min-height:100vh; display:flex; flex-direction:column;
}
body > main { flex:1 0 auto; width:100%; }
body > header, body > footer { flex:none; }
a { color:var(--ks-brand-strong); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; }
h1,h2,h3 { color:var(--ks-navy); line-height:1.3; }
code { background:var(--ks-surface-2); border:1px solid var(--ks-line); padding:.12em .45em;
  border-radius:var(--ks-r-xs); font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.9em; }

/* ── Brand mark ── */
.ks-logo { width:34px; height:34px; border-radius:var(--ks-r-sm); background:var(--ks-brand-grad);
  color:#fff; display:grid; place-items:center; font-weight:900; font-size:19px; flex:0 0 auto;
  box-shadow:0 4px 12px rgba(237,28,36,.30); }
.ks-logo.sm { width:28px; height:28px; font-size:16px; border-radius:var(--ks-r-xs); }

/* ── Site header (public) ── */
.site-header { background:var(--ks-surface); border-bottom:1px solid var(--ks-line); position:sticky; top:0; z-index:20; }
.site-header .bar { max-width:900px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:12px; }
.site-header .brand { display:flex; align-items:center; gap:11px; }
.site-header .name { font-weight:800; color:var(--ks-navy); letter-spacing:.2px; font-size:1.05rem; }
.site-header .name b { color:var(--ks-brand); font-weight:900; }
.site-header nav { margin-inline-start:auto; display:flex; gap:6px; flex-wrap:wrap; }
.site-header nav a { color:var(--ks-ink-2); padding:6px 12px; border-radius:var(--ks-r-pill); font-size:.9rem; font-weight:500; }
.site-header nav a:hover { background:var(--ks-brand-soft); color:var(--ks-brand-strong); text-decoration:none; }

/* ── Layout ── */
main { max-width:900px; margin:0 auto; padding:30px 20px 60px; }
.page-title, main > h1 { font-size:1.9rem; font-weight:800; margin:.1em 0 .15em; color:var(--ks-navy); }
.lead { color:var(--ks-muted); margin:0 0 1.8em; font-size:1.05rem; }

/* ── Cards / sections ── */
.card, section.block { background:var(--ks-surface); border:1px solid var(--ks-line);
  border-radius:var(--ks-r); padding:22px 26px; margin:0 0 18px; box-shadow:var(--ks-shadow-sm); }
section.block h2 { font-size:1.12rem; margin:1.3em 0 .45em; padding-inline-start:12px;
  border-inline-start:3px solid var(--ks-brand); }
section.block h2:first-child { margin-top:0; }
section.block[dir="rtl"] { text-align:right; }
ul { padding-inline-start:1.25em; } li { margin:.28em 0; }

.divider { text-align:center; color:var(--ks-faint); font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; margin:28px 0 12px; position:relative; font-weight:700; }
.divider::before,.divider::after { content:""; position:absolute; top:50%; width:38%; height:1px; background:var(--ks-line); }
.divider::before { inset-inline-start:0; } .divider::after { inset-inline-end:0; }

/* ── Hero (home) ── */
.hero { background:linear-gradient(180deg,#fff, var(--ks-surface-2)); border:1px solid var(--ks-line);
  border-radius:var(--ks-r); padding:38px 30px; text-align:center; box-shadow:var(--ks-shadow); }
.hero .ks-logo { width:56px; height:56px; font-size:30px; margin:0 auto 16px; border-radius:16px; }
.hero h1 { font-size:2.1rem; margin:0 0 .2em; }
.hero p { color:var(--ks-muted); max-width:560px; margin:0 auto 1.2em; }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--ks-line);
  background:var(--ks-surface); color:var(--ks-ink); padding:9px 16px; border-radius:var(--ks-r-sm);
  cursor:pointer; font-family:inherit; font-size:.92rem; font-weight:600; transition:.15s; text-decoration:none; }
.btn:hover { text-decoration:none; box-shadow:var(--ks-shadow-sm); }
.btn.primary { background:var(--ks-brand-grad); border-color:transparent; color:#fff;
  box-shadow:0 6px 16px rgba(237,28,36,.24); }
.btn.primary:hover { filter:brightness(1.04); }
.btn.navy { background:var(--ks-navy); border-color:var(--ks-navy); color:#fff; }
.btn.danger { color:var(--ks-danger); border-color:#eecfca; background:var(--ks-danger-soft); }
.btn.sm { padding:5px 11px; font-size:.82rem; }
.btn.block { width:100%; justify-content:center; }

/* ── Footer ── */
.site-footer { background:var(--ks-navy); color:var(--ks-navy-muted); margin-top:20px; }
.site-footer .bar { max-width:900px; margin:0 auto; padding:22px 20px; display:flex; align-items:center;
  gap:12px; flex-wrap:wrap; font-size:.86rem; }
.site-footer a { color:var(--ks-navy-ink); }
.site-footer .links { margin-inline-start:auto; display:flex; gap:16px; flex-wrap:wrap; }

@media (max-width:560px){
  .page-title,.hero h1 { font-size:1.55rem; }
  .card, section.block { padding:18px 18px; }
  .site-header .bar,.site-footer .bar,main { padding-left:16px; padding-right:16px; }
}

/* Real Kayanac mark (image) — replaces the letter tile */
img.ks-logo { background:none; box-shadow:none; object-fit:contain; display:block; }