/* ============================================================
   W3I — Brand stylesheet
   Palette derived from the logo gradient
   ============================================================ */
:root {
  /* Brand gradient stops */
  --violet: #7a2e8e;
  --magenta: #e6295a;
  --red: #ea3546;
  --orange: #f2691f;
  --gold: #f9a825;

  --grad: linear-gradient(120deg, var(--violet), var(--red) 45%, var(--orange) 72%, var(--gold));
  --grad-soft: linear-gradient(120deg, rgba(122,46,142,.16), rgba(242,105,31,.14));

  /* Accessible variant for surfaces carrying white text.
     The gold stop is dropped and the warm stops darkened so that
     EVERY point along the gradient clears WCAG AA on white, with
     headroom (4.84:1 measured, vs the 4.5 minimum) so rasterising
     and rounding can't tip it under. Use --grad for decorative
     fills and gradient text on the dark background; use
     --grad-btn wherever text sits on top of the gradient. */
  --magenta-deep: #d82655;
  --orange-deep: #bc5118;
  --grad-btn: linear-gradient(120deg, var(--violet), var(--magenta-deep) 55%, var(--orange-deep));

  /* Surface (dark) */
  --bg: #0b0710;
  --bg-2: #120a1a;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* The greys were lightened deliberately. Both already passed WCAG AA
     (8.66:1 and 5.17:1), but AA is a floor, not a reading experience —
     at the small sizes these carry, mid-grey on a near-black background
     reads washed out. Now 11.68:1 and 7.88:1, comfortably AAA on both
     the page background and the lighter card surfaces. */
  --text: #f5eef7;
  --muted: #cdc2d6;
  --muted-2: #ab9eb5;

  --radius: 18px;
  --radius-sm: 12px;
  --maxw: 1160px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow: 0 24px 60px -24px rgba(230, 41, 90, .35);

  --font: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-display: "Sora", "Plus Jakarta Sans", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* Everything below is sized in rem, so this one value scales the whole
   page up ~6% (16px -> 17px). A percentage, not a px value: it keeps the
   scaling relative to whatever base size the visitor has chosen in their
   browser, which a hard px would override and take away from them. */
html { font-size: 106.25%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
/* height:auto keeps the aspect ratio when only width is set in CSS —
   without it the width/height HTML attributes stretch the image. */
img { max-width: 100%; height: auto; display: block; }
/* <picture> wrappers must not become flex/grid items themselves */
picture { display: contents; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; font-weight: 800; }

/* Arabic typography: swap the two font variables rather than listing
   selectors. The old per-selector list missed .step-n and .bp-title,
   so their Arabic text fell back to a system font. Redefining the
   variables covers everything that uses them, now and later. */
html[dir="rtl"] {
  --font: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-display: "Cairo", "IBM Plex Sans Arabic", system-ui, sans-serif;
}

/* Arabic headings need more leading than Latin ones. The 1.2 above is set
   for the Latin display face; Arabic stacks marks well above the letter
   (the shadda on "ركّز", "وخلّي") and drops tails well below it, so at 1.2
   the marks of one line crowd the tails of the line before it. The bigger
   the type, the worse it reads — hence the extra room on .hero-title. */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3 { line-height: 1.45; }
html[dir="rtl"] .hero-title { line-height: 1.55; }

.container { width: min(100% - 40px, var(--maxw)); margin-inline: auto; }
.container.narrow { max-width: 820px; }

/* ---------- Decorative background ---------- */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(900px 500px at 85% -5%, rgba(242,105,31,.10), transparent 60%),
    radial-gradient(800px 500px at 5% 10%, rgba(122,46,142,.14), transparent 60%),
    var(--bg);
}
.bg-orbs { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; }
.orb-1 { width: 420px; height: 420px; background: var(--violet); top: -80px; inset-inline-end: -60px; animation: float 16s var(--ease) infinite; }
.orb-2 { width: 360px; height: 360px; background: var(--orange); top: 40%; inset-inline-start: -120px; animation: float 20s var(--ease) infinite reverse; }
.orb-3 { width: 300px; height: 300px; background: var(--red); bottom: -60px; inset-inline-end: 20%; animation: float 24s var(--ease) infinite; }
@keyframes float { 50% { transform: translateY(-40px) translateX(20px); } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); font-weight: 700; font-size: 1rem;
  padding: 13px 26px; border-radius: 999px; cursor: pointer; border: 1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  white-space: nowrap;
}
.btn-primary { background: var(--grad-btn); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 28px 70px -20px rgba(242,105,31,.5); }
.btn-ghost { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); transform: translateY(-2px); }
.btn-sm { padding: 9px 18px; font-size: .97rem; }
.btn-lg { padding: 16px 34px; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; inset-inline: 0; z-index: 100;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(11, 7, 16, .72);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { width: 40px; height: 44px; object-fit: contain; }
.brand-name { font-family: var(--font-display); font-weight: 900; font-size: 1.4rem; letter-spacing: .5px; }
.nav { display: flex; gap: 4px; }
.nav a { padding: 8px 14px; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: 1rem; transition: color .2s, background .2s; }
.nav a:hover, .nav a.active { color: var(--text); background: var(--surface); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.lang-btn {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
  font-family: var(--font-display); font-weight: 800; font-size: 1rem; cursor: pointer;
  transition: background .25s, transform .25s, border-color .25s;
}
.lang-btn:hover { background: var(--surface-2); transform: translateY(-2px); border-color: var(--orange); }

/* 44px box: this is the primary navigation control on a phone, and the bars
   alone only made a 28px target. */
.nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; padding: 0; margin-inline-end: -8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: .3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { padding: 150px 0 90px; position: relative; }
.hero-inner { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 50px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .95rem; font-weight: 600; color: var(--muted);
  background: var(--surface); border: 1px solid var(--border);
  padding: 7px 15px; border-radius: 999px; margin-bottom: 22px;
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 12px var(--orange); }
.hero-title { font-size: clamp(2.4rem, 5.5vw, 4.1rem); font-weight: 900; letter-spacing: -.5px; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { color: var(--muted); font-size: 1.12rem; max-width: 46ch; margin: 24px 0 34px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 34px; margin-top: 48px; flex-wrap: wrap; }
.stat b { display: block; font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { color: var(--muted-2); font-size: .97rem; }

.hero-visual { position: relative; display: grid; place-items: center; min-height: 340px; }
.hero-logo { width: min(340px, 80%); filter: drop-shadow(0 30px 60px rgba(230,41,90,.4)); animation: bob 6s var(--ease) infinite; }
@keyframes bob { 50% { transform: translateY(-18px) rotate(-2deg); } }
.glow-ring {
  position: absolute; width: 380px; height: 380px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--violet), var(--red), var(--orange), var(--gold), var(--violet));
  filter: blur(60px); opacity: .35; animation: spin 18s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Sections ---------- */
.section { padding: 90px 0; position: relative; }
.section-head { max-width: 640px; margin: 0 auto 54px; text-align: center; }
.kicker { display: inline-block; font-weight: 700; font-size: 1.15rem; letter-spacing: 1px; text-transform: uppercase; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 12px; }
/* The 1px tracking and uppercasing are there to make a short Latin label
   read as a label. Arabic has no capitals, and its letters join — spacing
   them apart fights the script, so both are dropped on the RTL page. */
html[dir="rtl"] .kicker { letter-spacing: 0; text-transform: none; font-weight: 800; }
.section-head h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); }
.section-head p { color: var(--muted); margin-top: 14px; font-size: 1.05rem; }
.section-head strong { color: var(--text); }

/* ---------- Value grid ---------- */
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.value-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px 24px; transition: transform .3s var(--ease), border-color .3s, background .3s;
}
.value-card:hover { transform: translateY(-6px); border-color: var(--border-strong); background: var(--surface-2); }
.v-tag { display: inline-block; font-size: .9rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 14px; }
.value-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.value-card p { color: var(--muted); font-size: 1rem; }

/* ---------- Services ---------- */
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.service-card {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 34px 28px; overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s;
}
.service-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--grad);
  transform: scaleX(0); transform-origin: inline-start; transition: transform .4s var(--ease);
}
.service-card:hover { transform: translateY(-6px); border-color: var(--border-strong); }
.service-card:hover::before { transform: scaleX(1); }
.service-card.featured { background: linear-gradient(160deg, rgba(230,41,90,.12), rgba(122,46,142,.10)); border-color: var(--border-strong); }
.service-card.featured::before { transform: scaleX(1); }
.s-num { font-family: var(--font-display); font-size: 2.6rem; font-weight: 900; color: transparent; -webkit-text-stroke: 1.5px var(--border-strong); display: block; margin-bottom: 8px; }
.badge { position: absolute; inset-inline-end: 20px; top: 22px; font-size: .9rem; font-weight: 700; background: var(--grad-btn); color: #fff; padding: 5px 12px; border-radius: 999px; }
.service-card h3 { font-size: 1.3rem; margin-bottom: 12px; }
.service-card > p { color: var(--muted); margin-bottom: 18px; }
.s-list { list-style: none; display: grid; gap: 10px; }
.s-list li { position: relative; padding-inline-start: 22px; color: var(--muted); font-size: 1rem; }
.s-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .62em; width: 12px; height: 3px; border-radius: 3px; background: var(--grad); }

/* ---------- Process steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step { text-align: center; padding: 26px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); position: relative; }
.step-n { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; background: var(--grad-btn); color: #fff; box-shadow: var(--shadow); }
.step h3 { font-size: 1.15rem; margin-bottom: 6px; }
.step p { color: var(--muted); font-size: .97rem; }

/* ---------- Booking ---------- */
.booking-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 26px; align-items: stretch; }

.booking-side {
  background: linear-gradient(165deg, rgba(122,46,142,.20), rgba(242,105,31,.10));
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 32px 30px; display: flex; flex-direction: column;
}
.booking-free {
  align-self: flex-start; font-size: .9rem; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: #fff; background: var(--grad-btn);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.booking-side > h3 { font-size: 1.5rem; margin-bottom: 10px; }
.booking-side > p { color: var(--muted); margin-bottom: 22px; }

.booking-meta { list-style: none; display: grid; gap: 0; margin-bottom: 24px; border-top: 1px solid var(--border); }
.booking-meta li { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.bm-k { color: var(--muted-2); font-size: .97rem; font-weight: 600; }
.bm-v { color: var(--text); font-size: 1rem; font-weight: 700; text-align: end; }

.booking-points { margin-top: auto; }
.bp-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; margin-bottom: 14px; }

/* ---------- Booking CTA card ---------- */
.booking-cta {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 14px; padding: 46px 34px;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background:
    radial-gradient(420px 220px at 50% 0%, rgba(230,41,90,.16), transparent 70%),
    var(--surface);
  box-shadow: var(--shadow);
}
.bc-icon {
  display: grid; place-items: center; width: 74px; height: 74px; border-radius: 22px;
  background: var(--grad-btn); color: #fff; box-shadow: var(--shadow);
}
.bc-icon svg { width: 36px; height: 36px; }
.booking-cta h3 { font-size: 1.45rem; }
.booking-cta > p { color: var(--muted); max-width: 42ch; }
.booking-cta .btn { margin-top: 6px; }
.bc-note { color: var(--muted-2); font-size: .95rem; }

/* ---------- Booking dialog ---------- */
.booking-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; }
.booking-modal[hidden] { display: none; }
.bm-backdrop { position: absolute; inset: 0; background: rgba(6, 3, 9, .74); backdrop-filter: blur(8px); }
.bm-dialog {
  position: relative; z-index: 1; width: min(100%, 860px); max-height: min(92vh, 900px);
  display: flex; flex-direction: column;
  background: var(--bg-2); border: 1px solid var(--border-strong);
  border-radius: 22px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0,0,0,.8);
  animation: bmIn .28s var(--ease);
}
@keyframes bmIn { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.bm-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.bm-head h2 { font-size: 1.15rem; }
.bm-close {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 50%; cursor: pointer; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong);
  transition: background .25s, border-color .25s, transform .25s;
}
.bm-close svg { width: 18px; height: 18px; }
.bm-close:hover { background: var(--surface-2); border-color: var(--orange); transform: rotate(90deg); }
/* Google's embed is a white page; give it an explicit white surface so its
   dark text never renders against our dark panel. */
.bm-body { position: relative; flex: 1; min-height: 560px; background: #fff; }
.bm-loading { position: absolute; inset: 0; display: grid; place-items: center; z-index: 0; color: var(--muted-2); font-size: 1rem; background: var(--bg-2); }
.bm-body iframe { position: relative; z-index: 1; width: 100%; height: 100%; min-height: 560px; border: 0; display: block; background: #fff; }
.bm-fallback { text-align: center; padding: 14px 20px; color: var(--muted); font-size: .97rem; border-top: 1px solid var(--border); }
.bm-fallback a { color: var(--orange); font-weight: 600; margin-inline-start: 6px; }
.bm-fallback a:hover { text-decoration: underline; }

body.no-scroll { overflow: hidden; }

@media (max-width: 860px) {
  .booking-layout { grid-template-columns: 1fr; }
  .booking-modal { padding: 0; }
  .bm-dialog { width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; border: 0; }
  .bm-body { min-height: 0; }
}

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 22px; transition: border-color .3s; }
.faq details[open] { border-color: var(--border-strong); background: var(--surface-2); }
.faq summary { list-style: none; cursor: pointer; font-weight: 700; padding: 18px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--orange); transition: transform .3s; font-weight: 400; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding: 0 0 20px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 46px; align-items: start; }
.contact-info h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 8px 0 12px; }
.contact-info > p { color: var(--muted); margin-bottom: 28px; }
.contact-list { list-style: none; display: grid; gap: 6px; margin-bottom: 26px; }
.contact-list li { display: flex; align-items: center; gap: 14px; }
.ci-label { min-width: 62px; font-size: .9rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted-2); }
.contact-list a { color: var(--text); font-weight: 600; transition: color .2s; }
.contact-list a:hover { color: var(--orange); }

/* Phone numbers are left-to-right text, whatever the page direction.
   On the Arabic page the bidi algorithm treats the leading "+" as neutral
   and flips it to the far end, so "+968 9412 6000" is read out as
   "6000 9412 968+". `direction: ltr` fixes the order and `isolate` stops
   the number from disturbing the Arabic label beside it. */
a[href^="tel:"] { direction: ltr; unicode-bidi: isolate; }

/* Touch targets ---------------------------------------------------------
   These standalone links sat at 24-27px tall. Giving them a 44px box makes
   them comfortable on a phone; the surrounding gaps are reduced above and
   below so the layout keeps its rhythm instead of stretching. Inline links
   inside a sentence (.bm-fallback) are deliberately excluded — WCAG exempts
   them, and boxing them out would break the line. */
.contact-list a,
.footer-nav a,
.footer-contact a,
.to-top {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.socials { display: flex; gap: 12px; }
.socials a { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: .97rem; font-weight: 600; transition: .25s; }
.socials a:hover { border-color: var(--border-strong); background: var(--surface-2); transform: translateY(-2px); }

.contact-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; display: grid; gap: 16px; }
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-size: .97rem; font-weight: 600; color: var(--muted); }
.field input, .field textarea {
  font-family: var(--font); font-size: 1rem; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px;
  padding: 13px 15px; transition: border-color .2s, box-shadow .2s; resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(242,105,31,.15); }
.field.invalid input, .field.invalid textarea { border-color: var(--red); }
.form-note { text-align: center; font-size: .97rem; min-height: 1.2em; }
.form-note.ok { color: #4ade80; }
.form-note.err { color: #f87171; }
.form-note a { color: var(--orange); font-weight: 700; text-decoration: underline; }
.btn:disabled { opacity: .6; cursor: progress; transform: none; box-shadow: none; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 56px 0 26px; margin-top: 40px; background: rgba(0,0,0,.2); }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; padding-bottom: 34px; border-bottom: 1px solid var(--border); }
.footer-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.footer-brand img { width: 36px; height: 40px; object-fit: contain; }
.footer-brand p { flex-basis: 100%; color: var(--muted); font-size: 1rem; margin-top: 6px; }
.footer-nav, .footer-contact { display: grid; gap: 0; align-content: start; justify-items: start; }
.footer-nav a, .footer-contact a { color: var(--muted); font-size: 1rem; transition: color .2s; }
.footer-nav a:hover, .footer-contact a:hover { color: var(--text); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 22px; color: var(--muted-2); font-size: .95rem; flex-wrap: wrap; }
.to-top { color: var(--muted); transition: color .2s; }
.to-top:hover { color: var(--orange); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  /* Headline and CTA stay above the fold; the logo follows it. */
  .hero-copy { order: 1; }
  .hero-visual { order: 2; min-height: 0; }
  .hero { padding: 112px 0 70px; }
  .hero-logo { width: min(200px, 52%); }
  .glow-ring { width: 240px; height: 240px; }
  .hero-sub { margin-inline: auto; }
  .hero-cta, .hero-stats { justify-content: center; }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .service-grid, .steps { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav {
    position: fixed; inset: 74px 0 auto; flex-direction: column; gap: 0;
    background: rgba(11,7,16,.96); backdrop-filter: blur(14px);
    padding: 12px 20px 20px; border-bottom: 1px solid var(--border);
    transform: translateY(-120%); transition: transform .35s var(--ease); z-index: 90;
  }
  .nav.open { transform: none; }
  .nav a { padding: 14px 8px; border-radius: 10px; }
  .nav-toggle { display: flex; }
}
@media (max-width: 560px) {
  .value-grid, .footer-inner { grid-template-columns: 1fr; }
  .contact-form .row { grid-template-columns: 1fr; }
  .hero-stats { gap: 22px; }
  .contact-form { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}