/* ==========================================================================
   Egyptian Establishment for Cable Manufacturing — Design Tokens & Base
   المؤسسة المصرية لتصنيع الكابلات
   ========================================================================== */

:root{
  /* --- Brand palette (from stationery: banner, business card, price list) --- */
  --maroon-900:#5c1717;
  --maroon-800:#7A1F1F;
  --maroon-700:#8C2323;
  --maroon-600:#a32a2a;
  --graphite-900:#221F1E;
  --graphite-800:#2c2a29;
  --graphite-700:#3A3736;
  --graphite-600:#454140;
  --graphite-500:#5c5754;
  --bronze-600:#A78356;
  --bronze-500:#B08D57;
  --bronze-300:#cba977;
  --bronze-100:#e9dcc4;
  --cream:#F7F4EF;
  --cream-dim:#efe9df;
  --white:#FFFFFF;
  --ink:#221F1E;

  /* --- Semantic tokens --- */
  --bg:var(--cream);
  --bg-panel:var(--white);
  --text:var(--ink);
  --text-muted:#5c5754;
  --text-on-dark:#F7F4EF;
  --text-on-dark-muted:#c9c2ba;
  --border:#e3dccd;
  --accent:var(--bronze-500);
  --focus-ring:#2f7ac0;

  /* --- Type: Tajawal across the board (Arabic + Latin), per client request --- */
  --font-head: 'Tajawal', 'Segoe UI', sans-serif;
  --font-body: 'Tajawal', 'Segoe UI', sans-serif;
  --font-accent: 'Tajawal', 'Segoe UI', sans-serif;

  /* --- Scale --- */
  --container: 1240px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(34,31,30,.08);
  --shadow-md: 0 6px 24px -8px rgba(34,31,30,.22);
  --shadow-lg: 0 18px 48px -12px rgba(34,31,30,.32);
  --shadow-maroon: 0 10px 30px -10px rgba(122,31,31,.45);
  --shadow-bronze: 0 10px 26px -10px rgba(176,141,87,.4);
  --dur-fast:.18s;
  --dur:.32s;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* --- Premium reusable gradients --- */
  --grad-maroon: linear-gradient(135deg, var(--maroon-700) 0%, var(--maroon-800) 45%, var(--maroon-900) 100%);
  --grad-maroon-rich:
    radial-gradient(60% 140% at 88% 0%, rgba(203,169,119,.22) 0%, transparent 55%),
    radial-gradient(70% 120% at 6% 100%, rgba(180,42,42,.5) 0%, transparent 62%),
    linear-gradient(165deg, #7A1F1F 0%, #5c1717 62%, #3d0f0f 100%);
  --grad-graphite: linear-gradient(150deg, var(--graphite-600) 0%, var(--graphite-800) 55%, var(--graphite-900) 100%);
  --grad-graphite-rich:
    radial-gradient(55% 120% at 92% 0%, rgba(180,42,42,.30) 0%, transparent 55%),
    radial-gradient(45% 100% at 4% 100%, rgba(203,169,119,.15) 0%, transparent 60%),
    linear-gradient(165deg, #3A3736 0%, #221F1E 55%, #161310 100%);
  --grad-bronze: linear-gradient(135deg, var(--bronze-300) 0%, var(--bronze-500) 55%, var(--bronze-600) 100%);
  --grad-dark-sheen: radial-gradient(120% 140% at 15% -10%, rgba(255,255,255,.10) 0%, transparent 45%);
}

html[lang="ar"]{
  --font-head: 'Tajawal', 'Tahoma', sans-serif;
  --font-body: 'Tajawal', 'Tahoma', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--font-head);
  color:var(--graphite-900);
  line-height:1.25;
  margin:0 0 .5em;
  font-weight:700;
}
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,[lang="ar"] h4{ font-weight:800; }

h1{ font-size:clamp(2.1rem,4.4vw,3.4rem); font-weight:800; }
h2{ font-size:clamp(1.6rem,3vw,2.35rem); }
h3{ font-size:1.28rem; }
p{ margin:0 0 1em; color:var(--text); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
.container--narrow{ max-width:880px; }

section{ position:relative; }
.section{ padding-block: clamp(56px, 8vw, 104px); }
.section--tight{ padding-block: clamp(40px, 5vw, 64px); }
.section--cream{ background:var(--cream); }
.section--white{ background:var(--white); }
.section--dark{ background:var(--graphite-900); color:var(--text-on-dark); }
.section--dark h2,.section--dark h3{ color:var(--white); }
.section--dark p{ color:var(--text-on-dark-muted); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-head); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; font-size:.78rem; color:var(--maroon-800);
  margin-bottom:.9em;
}
[lang="ar"] .eyebrow{ letter-spacing:0; }
.eyebrow::before{
  content:""; width:22px; height:2px; background:var(--bronze-500); display:inline-block;
}

.section-head{ max-width:680px; margin-bottom:2.6rem; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head p{ font-size:1.05rem; color:var(--text-muted); }

/* --- Buttons --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-head); font-weight:700; font-size:.95rem;
  padding:.9em 1.7em; border-radius:var(--radius-sm); border:1.5px solid transparent;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  white-space:nowrap;
}
.btn svg{ width:1.05em; height:1.05em; flex:none; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--grad-maroon); color:var(--white); box-shadow:0 1px 0 rgba(255,255,255,.12) inset, var(--shadow-sm); }
.btn-primary:hover{ background:linear-gradient(135deg, var(--maroon-600) 0%, var(--maroon-700) 45%, var(--maroon-800) 100%); box-shadow:0 1px 0 rgba(255,255,255,.14) inset, var(--shadow-maroon); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--white); border-color:rgba(247,244,239,.55); }
.btn-ghost:hover{ background:rgba(247,244,239,.12); border-color:var(--white); }
.btn-outline{ background:transparent; color:var(--maroon-800); border-color:var(--maroon-800); }
.btn-outline:hover{ background:var(--grad-maroon); color:var(--white); border-color:transparent; }
.btn-bronze{ background:var(--grad-bronze); color:var(--graphite-900); box-shadow:0 1px 0 rgba(255,255,255,.35) inset, var(--shadow-sm); }
.btn-bronze:hover{ background:linear-gradient(135deg, var(--bronze-300) 0%, var(--bronze-600) 60%, #96703f 100%); box-shadow:0 1px 0 rgba(255,255,255,.35) inset, var(--shadow-bronze); transform:translateY(-1px); }
.btn-sm{ padding:.62em 1.15em; font-size:.85rem; }
.btn-block{ width:100%; }

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--focus-ring); outline-offset:2px; border-radius:2px;
}

/* --- Directional icon flip (chevrons / arrows only) --- */
[dir="rtl"] .flip-rtl{ transform:scaleX(-1); }

/* --- Skip link --- */
.skip-link{
  position:absolute; inset-inline-start:12px; top:-60px; background:var(--maroon-800); color:#fff;
  padding:.7em 1.2em; border-radius:var(--radius-sm); z-index:999; transition:top var(--dur-fast);
}
.skip-link:focus{ top:12px; }