@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800;900&family=Oswald:wght@400;500;600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Tajawal:wght@400;500;700;800;900&display=swap');

:root{
  --bg: #e6e0d2;
  --bg-panel: #f7f3e9;
  --bg-panel-2: #efe9db;
  --line: rgba(20,18,14,0.16);
  --line-soft: rgba(20,18,14,0.09);
  --steel: #23262b;
  --steel-dim: #565a61;
  --steel-mute: #7d8087;
  --gold: #9c6c1c;
  --gold-bright: #ab7820;
  --gold-dim: #b08a4d;
  --shadow: 0 20px 50px rgba(30,25,15,0.16);
  --shadow-hover: 0 30px 60px rgba(30,25,15,0.24);
  --bg-rgb: 230,224,210;
  --hair-rgb: 20,18,14;
  --logo-s1: #4a4e54;
  --logo-s2: #2b2e33;
  --logo-s3: #14161a;
  --logo-mute: #5a5e64;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #0a0a0c;
    --bg-panel: #121215;
    --bg-panel-2: #17181b;
    --line: rgba(255,255,255,0.09);
    --line-soft: rgba(255,255,255,0.05);
    --steel: #d7dade;
    --steel-dim: #9298a1;
    --steel-mute: #5f6570;
    --gold: #cf9a45;
    --gold-bright: #eab766;
    --gold-dim: #8a6a37;
    --shadow: 0 20px 60px rgba(0,0,0,0.5);
    --shadow-hover: 0 30px 70px rgba(0,0,0,0.65);
    --bg-rgb: 10,10,12;
    --hair-rgb: 255,255,255;
    --logo-s1: #f1f3f5;
    --logo-s2: #b7bcc3;
    --logo-s3: #6d727b;
    --logo-mute: #a3a8ae;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg: #0a0a0c;
  --bg-panel: #121215;
  --bg-panel-2: #17181b;
  --line: rgba(255,255,255,0.09);
  --line-soft: rgba(255,255,255,0.05);
  --steel: #d7dade;
  --steel-dim: #9298a1;
  --steel-mute: #5f6570;
  --gold: #cf9a45;
  --gold-bright: #eab766;
  --gold-dim: #8a6a37;
  --shadow: 0 20px 60px rgba(0,0,0,0.5);
  --bg-rgb: 10,10,12;
  --hair-rgb: 255,255,255;
  --logo-s1: #f1f3f5;
  --logo-s2: #b7bcc3;
  --logo-s3: #6d727b;
  --logo-mute: #a3a8ae;
  color-scheme: dark;
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background: var(--bg);
  color: var(--steel);
  font-family: 'Inter', system-ui, sans-serif;
  overflow-x: hidden;
  transition: background .35s ease, color .35s ease;
}
html.intro-lock, html.intro-lock body{ overflow:hidden; height:100%; }

::selection{ background: var(--gold-dim); color:#0a0a0c; }

h1,h2,h3{ text-wrap: balance; margin:0; }

a{ color: inherit; }

.display{ font-family:'Big Shoulders Display', 'Oswald', sans-serif; }
.label{ font-family:'Oswald', sans-serif; text-transform:uppercase; letter-spacing:.22em; }
.mono{ font-family:'JetBrains Mono', monospace; }

/* ---------------------------------- */
/* Arabic language overrides           */
/* ---------------------------------- */
html[lang="ar"] body{ font-family:'Tajawal', 'Segoe UI', sans-serif; }
html[lang="ar"] .hero h1,
html[lang="ar"] .about h2,
html[lang="ar"] .contact h2{ font-family:'Tajawal', sans-serif; font-weight:800; letter-spacing:0; }
html[lang="ar"] .label,
html[lang="ar"] .eyebrow,
html[lang="ar"] .nav-status,
html[lang="ar"] .intro-hint,
html[lang="ar"] .plate .stat .k,
html[lang="ar"] .tag-body .k,
html[lang="ar"] .hero-scroll{
  text-transform:none; letter-spacing:normal;
}
html[lang="ar"] .marquee span{ font-family:'Tajawal', sans-serif; }

/* keep the phone number always left-to-right */
[dir="rtl"] .tag-body a.v.mono{ direction:ltr; }

/* ---------------------------------- */
/* Ambient background: drifting tools */
/* ---------------------------------- */
.rig{
  position: fixed; inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.rig::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 45% at 18% 8%, rgba(207,154,69,0.07), transparent 60%),
    radial-gradient(ellipse 55% 50% at 88% 92%, rgba(207,154,69,0.05), transparent 60%),
    repeating-linear-gradient(115deg, rgba(var(--hair-rgb),0.02) 0px, rgba(var(--hair-rgb),0.02) 1px, transparent 1px, transparent 5px);
}
.drift{
  position:absolute;
  color: var(--steel);
  opacity: .11;
  will-change: transform;
}
.drift.gold{ color: var(--gold); opacity:.12; }
.drift.solid{ opacity:.16; }
.drift svg{ display:block; overflow:visible; }

@keyframes floatA{ 0%{transform:translate(0,0) rotate(0deg);} 50%{transform:translate(24px,-30px) rotate(180deg);} 100%{transform:translate(0,0) rotate(360deg);} }
@keyframes floatB{ 0%{transform:translate(0,0) rotate(0deg);} 50%{transform:translate(-30px,26px) rotate(-160deg);} 100%{transform:translate(0,0) rotate(-320deg);} }
@keyframes spin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
@keyframes spinRev{ from{transform:rotate(360deg);} to{transform:rotate(0deg);} }
@keyframes drillbob{ 0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(18px) rotate(6deg);} }

/* ---------------------------------- */
/* Intro                               */
/* ---------------------------------- */
.intro{
  position:fixed; inset:0; z-index:100;
  background: var(--bg);
  cursor:pointer;
}
.intro::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 42%, rgba(207,154,69,0.09), transparent 55%);
}

.intro-mark{
  position:fixed; top:50%; left:50%;
  transform: translate(-50%,-50%);
  transform-origin:50% 50%;
  z-index:101;
  display:flex; flex-direction:column; align-items:center; gap:26px;
  pointer-events:none;
}

.logo-stage{
  position:relative;
  width: clamp(230px, 40vw, 340px);
  aspect-ratio: 515 / 484;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.22));
}
.lp{ position:absolute; inset:0; width:100%; height:100%; display:block; }

.lp-mark{
  opacity:0;
  clip-path: inset(0 100% 0 0);
  animation: markReveal .85s cubic-bezier(.65,0,.35,1) forwards .2s;
}
@keyframes markReveal{ to{ opacity:1; clip-path: inset(0 0 0 0); } }

.lp-wrench{
  opacity:0;
  transform: translateX(-32px) rotate(-16deg) scale(.85);
  transform-origin: 34% 42%;
  animation: pieceWrenchIn .6s cubic-bezier(.2,.9,.25,1.2) forwards 1s;
  filter: drop-shadow(4px 7px 9px rgba(0,0,0,.68)) drop-shadow(0 0 4px rgba(0,0,0,.5));
}
@keyframes pieceWrenchIn{ to{ opacity:1; transform: translateX(0) rotate(0deg) scale(1); } }

.lp-drill{
  opacity:0;
  transform: translateY(-18px);
  animation: pieceDropIn .5s ease forwards 1.55s;
  filter: drop-shadow(3px 6px 7px rgba(0,0,0,.7));
}
@keyframes pieceDropIn{ to{ opacity:1; transform:translateY(0); } }

.lp-word{
  opacity:0;
  transform: translateY(10px);
  animation: pieceWordIn .6s ease forwards 1.85s;
}
@keyframes pieceWordIn{ to{ opacity:1; transform:translateY(0); } }

.intro-hint{
  position:absolute; bottom:46px; left:50%; transform:translateX(-50%);
  font-size:.62rem; letter-spacing:.35em; color: var(--steel-mute);
  opacity:0; animation: hintIn .6s ease forwards 2.9s;
}
@keyframes hintIn{ to{ opacity:.7; } }

/* ---------------------------------- */
/* Nav                                 */
/* ---------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px clamp(20px,5vw,64px);
  background: linear-gradient(180deg, rgba(var(--bg-rgb),.92), rgba(var(--bg-rgb),0));
}
.nav-brand{ display:flex; align-items:center; }
.nav-slot{ width:108px; height:108px; }
.nav-right{ display:flex; align-items:center; gap:12px; }
.nav-status{
  display:flex; align-items:center; gap:8px;
  font-size:.62rem; letter-spacing:.24em; color: var(--steel-dim);
  border:1px solid var(--line); border-radius:999px; padding:7px 14px;
}
.dot{ width:6px; height:6px; border-radius:50%; background: var(--gold); box-shadow:0 0 0 3px rgba(207,154,69,.18); animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.4;} }

.theme-toggle{
  flex:none; min-width:38px; height:38px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background: var(--bg-panel); color: var(--steel-dim);
  cursor:pointer; padding:0 4px;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.theme-toggle:hover{ border-color: var(--gold-dim); color: var(--gold-bright); }
#themeToggle:hover{ transform: rotate(14deg); }
.theme-toggle:focus-visible{ outline: 2px solid var(--gold); outline-offset:2px; }
.theme-toggle svg{ width:16px; height:16px; }
.theme-toggle .ic-moon{ display:none; }
:root[data-theme="light"] .theme-toggle .ic-sun{ display:none; }
:root[data-theme="light"] .theme-toggle .ic-moon{ display:block; }

.lang-toggle{
  width:38px; font-family:'JetBrains Mono', monospace; font-size:.66rem; font-weight:600; letter-spacing:.03em;
}

/* ---------------------------------- */
/* Layout                              */
/* ---------------------------------- */
main{ position:relative; z-index:1; }
section{ position:relative; padding: 0 clamp(20px,6vw,80px); }

.hero{
  min-height: 100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding-top:120px; padding-bottom:80px;
}
.eyebrow{
  font-size:.66rem; color: var(--gold-bright); margin-bottom:22px;
}
.eyebrow::before{ content:"— "; color:var(--gold-dim); }
.eyebrow::after{ content:" —"; color:var(--gold-dim); }

.hero h1{
  font-size: clamp(2.6rem, 7.4vw, 5.6rem);
  font-weight:800; line-height:.98; letter-spacing:.01em;
  color: var(--steel);
}
.hero h1 em{
  font-style:normal;
  background: linear-gradient(95deg, var(--gold-dim), var(--gold-bright) 45%, var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{
  max-width: 46ch; margin: 26px auto 0;
  font-size:1.02rem; line-height:1.7; color: var(--steel-dim);
}

.hero-scroll{
  margin-top:56px; display:flex; flex-direction:column; align-items:center; gap:10px;
  color: var(--steel-mute); font-size:.6rem; letter-spacing:.3em;
}
.hero-scroll .line{ width:1px; height:36px; background:linear-gradient(var(--gold-dim), transparent); animation: scrollLine 1.8s ease-in-out infinite; }
@keyframes scrollLine{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{transform-origin:bottom;} 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* section frame */
.frame{ max-width:1100px; margin:0 auto; padding: 100px 0; }
.frame + .frame{ border-top:1px solid var(--line-soft); }

.kicker{
  display:flex; align-items:center; gap:14px;
  font-size:.68rem; color: var(--gold-bright); margin-bottom:20px;
}
.kicker .bar{ width:32px; height:1px; background: var(--gold-dim); }

.about{
  display:grid; grid-template-columns: 1.1fr 1fr; gap:64px; align-items:start;
}
.about h2{
  font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight:700; color:var(--steel);
  margin-bottom:22px;
}
.about p{ font-size:1.01rem; line-height:1.85; color: var(--steel-dim); margin:0 0 18px; }
.about p:last-child{ margin-bottom:0; }

/* ---------------------------------- */
/* Spec cards (plate / contact tag)    */
/* ---------------------------------- */
.plate, .tag{
  position:relative;
  background:
    linear-gradient(155deg, var(--bg-panel-2), var(--bg-panel));
  border:1px solid var(--line);
  border-radius:3px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  transition: transform .35s cubic-bezier(.2,.8,.25,1), box-shadow .35s ease, border-color .35s ease;
}
/* the cut corner marks the "far" edge from where reading starts — mirror it
   to the top‑left in Arabic so it still reads as the same detail, not a
   leftover LTR artifact. */
[dir="rtl"] .plate, [dir="rtl"] .tag{
  clip-path: polygon(26px 0, 100% 0, 100% 100%, 0 100%, 0 26px);
}
.plate:hover, .tag:hover{
  transform: translateY(-6px);
  border-color: var(--gold-dim);
  box-shadow: var(--shadow-hover), inset 0 1px 0 rgba(255,255,255,.06);
}
.plate::before, .tag::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright) 45%, var(--gold-dim));
  transition: height .35s ease, filter .35s ease;
}
.plate:hover::before, .tag:hover::before{
  height:4px;
  filter: brightness(1.15) saturate(1.1);
}
.card-label{
  font-family:'Oswald',sans-serif; font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color: var(--gold-bright);
  padding: 26px 28px 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line-soft);
}
html[lang="ar"] .card-label{ letter-spacing:normal; }

.plate{ padding: 0 28px 26px; }
.plate .stat{ display:flex; justify-content:space-between; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--line-soft); gap:12px; }
.plate .stat:last-child{ border-bottom:none; }
.plate .stat .k{ font-size:.68rem; letter-spacing:.18em; color:var(--steel-mute); font-family:'Oswald',sans-serif; white-space:nowrap; }
.plate .stat .v{ font-size:.92rem; color:var(--steel); font-family:'JetBrains Mono',monospace; text-align:end; }
html[lang="ar"] .plate .stat .v{ font-family:'Tajawal', sans-serif; }
html[lang="ar"] .plate .stat .k{ letter-spacing:normal; }

/* brand strip */
.brands{ padding:80px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); overflow:hidden; }
.brands .kicker{ max-width:1100px; margin:0 auto 34px; padding:0 clamp(20px,6vw,80px); }
.marquee{ display:flex; width:max-content; animation: scroll 34s linear infinite; }
@keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee span{
  display:inline-flex; align-items:center;
  font-family:'Big Shoulders Display', sans-serif; font-weight:700;
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  color: var(--steel-mute);
  letter-spacing:.03em;
  padding: 0 clamp(24px, 3.4vw, 44px);
  white-space:nowrap;
}
.marquee span::after{ content:"•"; color: var(--gold-dim); margin-left: clamp(24px,3.4vw,44px); }
.marquee span.hl{ color: var(--gold-bright); }

/* contact */
.contact-wrap{ display:grid; grid-template-columns: 1fr 1fr; gap:64px; }
.contact h2{ font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight:700; color:var(--steel); margin-bottom:18px; }
.contact > p{ color:var(--steel-dim); line-height:1.8; max-width:42ch; margin:0; }

.tag{ padding: 0 32px 30px; }
.tag-row{ display:flex; align-items:flex-start; gap:18px; padding:20px 0; border-bottom:1px solid var(--line-soft); }
.tag-row:first-of-type{ padding-top:22px; }
.tag-row:last-child{ border-bottom:none; padding-bottom:0; }
.tag-ico{
  flex:none; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--gold-dim);
  background: linear-gradient(155deg, rgba(207,154,69,.16), rgba(207,154,69,.02));
  display:flex; align-items:center; justify-content:center;
  color: var(--gold-bright);
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.tag-row:hover .tag-ico{
  border-color: var(--gold-bright);
  background: linear-gradient(155deg, rgba(207,154,69,.28), rgba(207,154,69,.05));
  transform: scale(1.08);
}
.tag-body{ padding-top:2px; }
.tag-body .k{ font-size:.62rem; letter-spacing:.22em; color:var(--steel-mute); font-family:'Oswald',sans-serif; margin-bottom:6px; }
html[lang="ar"] .tag-body .k{ letter-spacing:normal; }
.tag-body .v{ font-size:1.05rem; color:var(--steel); line-height:1.5; }
.tag-body a.v{ text-decoration:none; }
.tag-body a.v:hover{ color: var(--gold-bright); }
.tag-body .v.mono{ letter-spacing:.02em; }

footer{
  padding: 46px clamp(20px,6vw,80px) 40px;
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  border-top:1px solid var(--line-soft);
  color: var(--steel-mute); font-size:.72rem;
}
footer .fmark{ display:flex; align-items:center; gap:10px; }
footer .fmark img{ width:24px; height:24px; border-radius:5px; opacity:.85; }

@media (max-width:820px){
  .about, .contact-wrap{ grid-template-columns:1fr; }
  .frame{ padding:70px 0; }
}

@media (max-width:640px){
  .nav{ padding:14px 16px; flex-wrap:wrap; row-gap:10px; }
  .nav-slot{ width:74px; height:74px; }
  .nav-status{ font-size:.54rem; letter-spacing:.14em; padding:6px 10px; }
  .hero{ padding-top:160px; }
  .card-label{ padding:22px 20px 14px; }
  .plate{ padding:0 20px 22px; }
  .plate .stat{ flex-direction:column; align-items:flex-start; gap:4px; padding:12px 0; }
  .plate .stat .v{ text-align:start; }
  .tag{ padding:0 22px 24px; }
  .tag-row:first-of-type{ padding-top:18px; }
  footer{ justify-content:center; text-align:center; }
}

@media (max-width:400px){
  .logo-stage{ width: clamp(190px, 52vw, 260px); }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}