/* حاز — modern landing (RTL). ألوان الهوية من --brand-* (تُضبط من لوحة التحكم / الشعار في header.blade) */
:root {
 /* قيم افتراضية؛ تُستبدل من Blade بألوان الشعار */
 --brand-primary: #22103c;
 --brand-hover: #5D2C79;
 --brand-accent: #5D2C79;

 --ink: color-mix(in srgb, var(--brand-primary) 34%, #050308);
 --ink-soft: color-mix(in srgb, var(--brand-primary) 24%, #0a0612);
 --violet-950: color-mix(in srgb, var(--brand-primary) 62%, #07040f);
 --violet-900: var(--brand-primary);
 --violet-700: var(--brand-hover);
 --orchid: var(--brand-accent);
 --orchid-dim: color-mix(in srgb, var(--brand-accent) 40%, transparent);
 --accent-bright: color-mix(in srgb, white 24%, var(--brand-accent));
 --accent-deep: color-mix(in srgb, var(--brand-primary) 52%, var(--brand-accent));
 /* ذهبي دافئ يتماشى مع أيقونة الشعار */
 --brand-gold: #d4b45c;
 --brand-gold-soft: color-mix(in srgb, var(--brand-gold) 34%, transparent);
 --page-bg: #FEFDEB;

 --surface: color-mix(in srgb, var(--brand-primary) 8%, var(--page-bg));
 --surface-strong: color-mix(in srgb, var(--brand-primary) 12%, var(--page-bg));
 --line: color-mix(in srgb, var(--brand-primary) 18%, transparent);
 --text: #1a1528;
 --text-muted: color-mix(in srgb, var(--text) 72%, transparent);
 --text-faint: color-mix(in srgb, var(--text) 48%, transparent);
 --radius-lg: 22px;
 --radius-md: 14px;
 --radius-sm: 10px;
 --shadow-glow: 0 0 120px color-mix(in srgb, var(--brand-accent) 18%, transparent);
 --font: "Tajawal", system-ui, sans-serif;
 --header-h: 72px;
 --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
 color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
 scroll-behavior: smooth;
 background: var(--page-bg);
}

@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
}

body {
 margin: 0;
 font-family: var(--font);
 background: var(--page-bg);
 color: var(--text);
 line-height: 1.65;
 text-rendering: optimizeLegibility;
 -webkit-font-smoothing: antialiased;
 /* أزرار وهافر — يتجاوز ألوان inline من لوحة التحكم على :root */
 --brand-hover: #5D2C79;
 --brand-accent: #5D2C79;
 --orchid: #5D2C79;
 --violet-700: #5D2C79;
 --orchid-dim: color-mix(in srgb, #5D2C79 40%, transparent);
 --accent-bright: color-mix(in srgb, white 22%, #5D2C79);
 --accent-deep: color-mix(in srgb, var(--brand-primary) 45%, #5D2C79);
}

body::before,
body::after {
 content: "";
 position: fixed;
 pointer-events: none;
 z-index: -1;
 filter: blur(12px);
}
body::before {
 top: -10rem;
 inset-inline-start: -8rem;
 width: 28rem;
 height: 28rem;
 background: radial-gradient(circle, color-mix(in srgb, var(--brand-accent) 12%, transparent), transparent 68%);
 opacity: 0.55;
}
body::after {
 inset-inline-end: -10rem;
 bottom: 12rem;
 width: 32rem;
 height: 32rem;
 background: radial-gradient(circle, color-mix(in srgb, var(--brand-gold) 10%, transparent), transparent 66%);
 opacity: 0.5;
}

.body-content {
 overflow-x: clip;
}

::selection {
 background: color-mix(in srgb, var(--brand-accent) 42%, transparent);
 color: var(--text);
}

img { max-width: 100%; height: auto; display: block; }

a {
 color: inherit;
 text-decoration-thickness: 1px;
 text-underline-offset: 0.2em;
}
a:hover { color: var(--orchid); }

.skip-link {
 position: absolute;
 inset-inline-start: 1rem;
 top: 1rem;
 padding: 0.5rem 1rem;
 background: var(--orchid);
 color: var(--ink);
 font-weight: 700;
 border-radius: var(--radius-sm);
 z-index: 1000;
 transform: translateY(-200%);
 transition: transform 0.2s var(--ease-out);
}
.skip-link:focus {
 transform: translateY(0);
 outline: 2px solid var(--text);
 outline-offset: 2px;
}

.wrap { width: min(1180px, calc(100% - 2.5rem)); margin-inline: auto; }
.wrap--narrow { width: min(720px, calc(100% - 2.5rem)); }

.site-header {
 position: fixed;
 inset: 0 0 auto 0;
 z-index: 50;
 height: var(--header-h);
 display: flex;
 align-items: center;
 transition: background 0.35s var(--ease-out), border-color 0.35s var(--ease-out), backdrop-filter 0.35s var(--ease-out);
 border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--page-bg) 92%, transparent);
 backdrop-filter: blur(16px) saturate(140%);
 -webkit-backdrop-filter: blur(16px) saturate(140%);
 border-bottom-color: var(--line);
}
.site-header__inner {
 width: min(1200px, calc(100% - 2rem));
 margin-inline: auto;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
}

.brand {
 display: inline-flex;
 align-items: center;
 gap: 0.65rem;
 text-decoration: none;
 font-weight: 800;
 font-size: 1.25rem;
 letter-spacing: 0.02em;
}
.brand:hover { color: var(--text); }
.brand img { border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); }

.nav { position: relative; }
.nav__toggle {
 display: none;
 width: 44px;
 height: 44px;
 border-radius: 12px;
 border: 1px solid var(--line);
 background: var(--surface);
 cursor: pointer;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 gap: 6px;
 padding: 0;
}
.nav__toggle-bar {
 width: 18px;
 height: 2px;
 background: var(--text);
 border-radius: 2px;
 transition: transform 0.25s var(--ease-out), opacity 0.2s;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:first-child { transform: translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:last-child { transform: translateY(-4px) rotate(-45deg); }

.nav__list {
 list-style: none;
 margin: 0;
 padding: 0;
 display: flex;
 align-items: center;
 gap: 0.25rem 1.5rem;
 flex-wrap: wrap;
 justify-content: flex-end;
}
.nav__list a {
 text-decoration: none;
 font-weight: 500;
 font-size: 0.98rem;
 color: var(--text-muted);
 padding: 0.35rem 0;
 transition: color 0.2s;
}
.nav__list a:hover { color: var(--text); }
.nav__list a.is-active {
 color: var(--text);
 position: relative;
}
.nav__list a.is-active::after {
 content: "";
 position: absolute;
 inset-inline: 0;
 bottom: -0.15rem;
 height: 2px;
 border-radius: 999px;
 background: linear-gradient(90deg, transparent, var(--orchid), transparent);
}
.nav__cta {
 padding: 0.45rem 1rem !important;
 border-radius: 999px;
 border: 1px solid var(--line);
 background: linear-gradient(135deg, color-mix(in srgb, var(--brand-accent) 22%, transparent), transparent);
 color: var(--text) !important;
}
.nav__cta:hover { border-color: var(--orchid-dim); color: var(--orchid) !important; }

@media (max-width: 880px) {
 .nav__toggle { display: inline-flex; }
 .nav__panel {
 position: absolute;
 inset-inline-end: 0;
 top: calc(100% + 10px);
 min-width: 220px;
 max-height: min(70vh, 420px);
 overflow-y: auto;
 padding: 0.75rem;
 border-radius: var(--radius-md);
 border: 1px solid var(--line);
    background: color-mix(in srgb, var(--page-bg) 96%, transparent);
 backdrop-filter: blur(14px);
 box-shadow: var(--shadow-glow);
 opacity: 0;
 pointer-events: none;
 transform: translateY(-6px);
 transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
 }
 .nav__panel.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
 .nav__list { flex-direction: column; align-items: stretch; gap: 0.25rem; }
 .nav__list a { padding: 0.65rem 0.75rem; border-radius: var(--radius-sm); }
 .nav__list a:hover { background: var(--surface); }
}

.hero {
 position: relative;
 min-height: calc(100svh - var(--header-h));
 display: grid;
 align-items: end;
 padding-block: clamp(2rem, 5vw, 4rem) clamp(2.5rem, 6vw, 5rem);
 isolation: isolate;
}
.hero__media {
 position: absolute;
 inset: 0;
 z-index: -1;
}
/* تعتيم اتجاهي عند جانب النص (inline-start في RTL = يمين) لرفع التباين فوق رسوم الخلفية */
.hero__media::after {
 content: "";
 position: absolute;
 inset: 0;
 z-index: 3;
 pointer-events: none;
 background: linear-gradient(
 to inline-end,
 transparent 0%,
 transparent 28%,
 color-mix(in srgb, var(--page-bg) 52%, transparent) 55%,
 color-mix(in srgb, var(--page-bg) 82%, transparent) 88%,
 color-mix(in srgb, var(--page-bg) 94%, transparent) 100%
 );
}
.hero__media img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center;
 transform: scale(1.02);
}
.hero__veil {
 position: absolute;
 inset: 0;
 z-index: 1;
 background: linear-gradient(
 205deg,
 color-mix(in srgb, var(--page-bg) 35%, transparent) 0%,
 color-mix(in srgb, var(--page-bg) 55%, transparent) 40%,
 color-mix(in srgb, var(--page-bg) 78%, transparent) 72%,
 var(--page-bg) 100%
 );
}
.hero__glow {
 position: absolute;
 inset: auto 10% -20% 10%;
 height: 55%;
 z-index: 2;
 background: radial-gradient(ellipse at 50% 0%, var(--orchid-dim), transparent 55%);
 pointer-events: none;
 filter: blur(3px);
}
.hero__content {
 position: relative;
 z-index: 4;
 width: min(36rem, calc(100% - 2rem));
 margin: 0;
 display: flex;
 flex-direction: column;
 align-items: start;
 gap: clamp(1rem, 2.5vw, 1.35rem);
 padding: clamp(1.1rem, 2.5vw, 1.45rem) clamp(1.15rem, 3vw, 1.6rem);
 border-radius: var(--radius-lg);
 background: linear-gradient(
 160deg,
 color-mix(in srgb, var(--page-bg) 88%, transparent),
 color-mix(in srgb, var(--page-bg) 72%, transparent)
 );
 border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
 box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
 backdrop-filter: blur(14px) saturate(130%);
 -webkit-backdrop-filter: blur(14px) saturate(130%);
}
.hero__eyebrow {
 margin: 0;
 font-size: 0.8rem;
 font-weight: 700;
 letter-spacing: 0.06em;
 text-transform: none;
 color: var(--orchid);
 text-shadow: none;
}
.hero__title { margin: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.hero__title-line {
 font-size: clamp(2.6rem, 7.5vw, 5.2rem);
 font-weight: 800;
 line-height: 1.05;
 letter-spacing: -0.02em;
 background: linear-gradient(
 185deg,
 var(--brand-primary) 0%,
 color-mix(in srgb, var(--brand-primary) 55%, var(--brand-accent)) 100%
 );
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 filter: none;
}
.hero__title-sub {
 font-size: clamp(1.05rem, 2.4vw, 1.35rem);
 font-weight: 500;
 line-height: 1.7;
 color: color-mix(in srgb, var(--text) 92%, transparent);
 max-width: min(38ch, 100%);
 text-wrap: balance;
 text-shadow: none;
}
.hero__lede { margin: 0; max-width: 52ch; font-size: 1.08rem; color: var(--text-muted); }
.hero__actions {
 display: flex;
 flex-wrap: wrap;
 gap: 0.85rem 1rem;
 margin-top: 0.35rem;
}
.hero__actions .btn {
 min-height: 48px;
 padding-inline: 1.35rem;
}
.hero__actions .btn--ghost {
  background: color-mix(in srgb, var(--page-bg) 75%, transparent);
 border-color: color-mix(in srgb, var(--text) 22%, transparent);
 backdrop-filter: blur(8px);
}
.hero__actions .btn--ghost:hover {
 background: color-mix(in srgb, var(--brand-primary) 35%, transparent);
 border-color: color-mix(in srgb, var(--brand-accent) 45%, transparent);
 color: var(--text);
}
.hero__pills {
 list-style: none;
 display: flex;
 flex-wrap: wrap;
 gap: 0.65rem;
 margin: 0;
 padding: 0;
}
.hero__pills li {
 display: inline-flex;
 align-items: center;
 gap: 0.45rem;
 min-height: 40px;
 padding: 0.55rem 0.9rem;
 border-radius: 999px;
 border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  background: color-mix(in srgb, var(--page-bg) 80%, transparent);
  color: var(--text-muted);
  font-size: 0.94rem;
}
.hero__pills li::before {
 content: "";
 width: 0.5rem;
 height: 0.5rem;
 border-radius: 50%;
 background: linear-gradient(135deg, var(--brand-gold), var(--orchid));
 box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-accent) 12%, transparent);
}

.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.5rem;
 padding: 0.85rem 1.45rem;
 font: inherit;
 font-weight: 700;
 font-size: 1rem;
 border-radius: 999px;
 border: 1px solid transparent;
 cursor: pointer;
 text-decoration: none;
 transition: transform 0.2s var(--ease-out), box-shadow 0.25s, border-color 0.2s, background 0.2s;
}
.btn:active { transform: scale(0.98); }
.btn:disabled,
.btn.is-busy {
 opacity: 0.65;
 cursor: not-allowed;
 pointer-events: none;
}
.btn--primary {
 background: linear-gradient(135deg, var(--accent-bright), var(--orchid) 48%, var(--accent-deep));
 color: color-mix(in srgb, var(--brand-primary) 18%, #000);
 box-shadow: 0 12px 40px color-mix(in srgb, var(--brand-accent) 38%, transparent);
}
.btn--primary:hover {
 background: linear-gradient(135deg, color-mix(in srgb, white 16%, #5D2C79), #5D2C79 52%, color-mix(in srgb, var(--brand-primary) 38%, #5D2C79));
 color: color-mix(in srgb, var(--brand-primary) 18%, #000);
 box-shadow: 0 16px 48px color-mix(in srgb, #5D2C79 48%, transparent);
}
.btn--ghost {
 background: var(--surface);
 border-color: var(--line);
 color: var(--text);
}
.btn--ghost:hover { border-color: var(--orchid-dim); background: var(--surface-strong); color: var(--text); }
.btn--block { width: 100%; }

.hero__stats {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 1rem;
 margin: 1.75rem 0 0;
 padding: 1.25rem 0 0;
 border-top: 1px solid var(--line);
}
.hero__stats dt {
 font-size: 0.72rem;
 font-weight: 700;
 letter-spacing: 0.08em;
 color: var(--text-faint);
 text-transform: uppercase;
}
.hero__stats dd { margin: 0.35rem 0 0; font-weight: 600; color: var(--text); }
@media (max-width: 640px) { .hero__stats { grid-template-columns: 1fr; } }
.hero-scroll {
 display: none !important;
}

[data-reveal] {
 opacity: 0;
 transform: translateY(18px);
 filter: blur(4px);
 transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), filter 0.7s var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: none; filter: none; }

.section {
 padding-block: clamp(4rem, 10vw, 7rem);
 position: relative;
 background: var(--page-bg);
}
.section--about {
 background: var(--page-bg);
}
.section--services {
 background: var(--page-bg);
}
.section--services .section-head {
 max-width: min(62ch, 44rem);
}
.section--services .service-grid,
.section--services .section-empty {
 margin-top: 0.25rem;
}
.section--flow { background: var(--page-bg); border-block: 1px solid var(--line); }
.section--faq { background: var(--page-bg); }
.section--contact {
 background: var(--page-bg);
 box-shadow: inset 0 1px 0 var(--line);
}

.section-title {
 margin: 0 0 0.75rem;
 font-size: clamp(1.75rem, 4vw, 2.35rem);
 font-weight: 800;
 letter-spacing: -0.02em;
 text-wrap: balance;
}
.section-head {
 margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
 margin-inline: auto;
 max-width: min(56ch, 40rem);
 text-align: center;
}
.section-deck { margin: 0; color: var(--text-muted); font-size: 1.05rem; line-height: 1.65; }
.lead { font-size: 1.1rem; color: var(--text); margin: 0 0 1rem; }
.muted { color: var(--text-muted); margin: 0 0 1.25rem; }

.about-grid {
 display: grid;
 grid-template-columns: 1.05fr 0.95fr;
 gap: clamp(2rem, 5vw, 4rem);
 align-items: start;
}
@media (max-width: 900px) {
 .about-grid {
 grid-template-columns: 1fr;
 gap: clamp(1.5rem, 4vw, 2.25rem);
 }
 .about-grid__visual {
 order: -1;
 }
}

.about-prose {
 display: flex;
 flex-direction: column;
 gap: clamp(1.15rem, 2.5vw, 1.65rem);
 margin-top: 0.35rem;
}
.about-prose--plain {
 margin-top: 0;
 gap: 0;
}
.about-block {
 margin: 0;
 padding: 1.1rem 1.15rem 1.2rem;
 border-radius: var(--radius-md);
 border: 1px solid color-mix(in srgb, var(--line) 85%, var(--brand-accent) 15%);
 background: linear-gradient(
 145deg,
 color-mix(in srgb, var(--brand-primary) 8%, var(--page-bg)),
 color-mix(in srgb, var(--page-bg) 96%, transparent)
 );
 box-shadow: 0 12px 40px rgba(16, 22, 58, 0.08);
}
.about-block__title {
 margin: 0 0 0.55rem;
 font-size: 0.95rem;
 font-weight: 800;
 letter-spacing: 0.02em;
 color: color-mix(in srgb, var(--brand-accent) 72%, var(--text));
 border-inline-start: 3px solid color-mix(in srgb, var(--brand-accent) 55%, var(--brand-gold, #d4a853));
 padding-inline-start: 0.75rem;
}
.about-block__body {
 margin: 0;
 font-size: 1.02rem;
 line-height: 1.75;
 color: var(--text-muted);
}
.about-grid__copy .section-title {
 margin-bottom: 0.5rem;
}
.about-grid__copy .about-prose:not(.about-prose--plain) {
 max-width: 58ch;
}

.pullquote {
 margin: 1.5rem 0 0;
 padding: 1.25rem 1.35rem;
 border-inline-start: 3px solid var(--orchid);
 background: var(--surface);
 border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.pullquote p { margin: 0; font-size: 1.05rem; font-weight: 500; color: var(--text-muted); }

.about-stack {
 position: relative;
 margin: 0;
 border-radius: var(--radius-lg);
 overflow: hidden;
 aspect-ratio: 4 / 5;
 max-height: 520px;
 box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45), var(--shadow-glow);
}
.about-stack img { width: 100%; height: 100%; object-fit: cover; }
.about-stack > img:first-of-type {
 object-fit: contain;
 background: #fff;
}
.about-stack__secondary {
 position: absolute;
 width: 46%;
 inset-inline-end: -6%;
 bottom: -6%;
 border-radius: var(--radius-md);
 border: 1px solid var(--line);
 box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.service-rail {
 list-style: none;
 margin: 0;
 padding: 0;
 display: flex;
 flex-direction: column;
 border-radius: var(--radius-lg);
 border: 1px solid var(--line);
 overflow: hidden;
 background: var(--surface);
}
.service-rail li {
 display: grid;
 grid-template-columns: auto 1fr;
 gap: clamp(1rem, 3vw, 2rem);
 padding: clamp(1.35rem, 3vw, 2rem);
 border-bottom: 1px solid var(--line);
 align-items: start;
 transition: background 0.25s;
}
.service-rail li:last-child { border-bottom: 0; }
.service-rail li:hover { background: color-mix(in srgb, var(--brand-accent) 8%, transparent); }
.service-rail__index {
 font-size: 0.8rem;
 font-weight: 800;
 letter-spacing: 0.1em;
 color: var(--orchid);
 padding-top: 0.35rem;
}
.service-rail h3 { margin: 0 0 0.4rem; font-size: 1.2rem; font-weight: 700; }
.service-rail p { margin: 0; color: var(--text-muted); }

/* خطوات التطبيق — إطار هاتف أوضح، خلفية شاشة موحّدة، لمسة ذهبية من الشعار */
.app-steps {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
 gap: clamp(1.25rem, 3vw, 2rem);
 align-items: stretch;
 max-width: 1100px;
 margin-inline: auto;
}

@media (min-width: 1024px) {
 .app-steps {
 grid-template-columns: repeat(4, minmax(0, 1fr));
 }
}

@media (max-width: 700px) {
 .app-steps {
 display: flex;
 flex-direction: row;
 gap: 1.1rem;
 max-width: none;
 margin-inline: calc(50% - 50vw);
 padding-inline: max(1.25rem, calc(50vw - min(50vw, 560px)));
 padding-bottom: 0.35rem;
 overflow-x: auto;
 scroll-snap-type: x mandatory;
 scroll-padding-inline: 1.25rem;
 -webkit-overflow-scrolling: touch;
 }
 .app-steps::-webkit-scrollbar {
 height: 6px;
 }
 .app-steps::-webkit-scrollbar-thumb {
 background: var(--line);
 border-radius: 99px;
 }
 .app-step {
 flex: 0 0 min(82vw, 300px);
 scroll-snap-align: start;
 }
}

.app-step {
 position: relative;
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 gap: 1.05rem;
 padding: 1.45rem 1rem 1.65rem;
 border-radius: var(--radius-lg);
 border: 1px solid color-mix(in srgb, var(--brand-gold) 16%, var(--line));
 background: linear-gradient(
 175deg,
 color-mix(in srgb, var(--brand-primary) 22%, transparent),
 rgba(255, 255, 255, 0.03)
 );
 transition: border-color 0.28s, transform 0.28s var(--ease-out), box-shadow 0.28s;
}
.app-step::before {
 content: "";
 position: absolute;
 inset-inline: 18%;
 top: 0;
 height: 2px;
 border-radius: 99px;
 background: linear-gradient(90deg, transparent, var(--brand-gold-soft), var(--brand-gold), var(--brand-gold-soft), transparent);
 opacity: 0.75;
 pointer-events: none;
}
.app-step:hover {
 border-color: color-mix(in srgb, var(--brand-gold) 35%, var(--orchid-dim));
 transform: translateY(-5px);
 box-shadow:
 0 22px 56px rgba(0, 0, 0, 0.45),
 0 0 48px color-mix(in srgb, var(--brand-accent) 12%, transparent);
}
.app-step:hover .app-step__device {
 transform: scale(1.015);
 box-shadow:
 inset 0 1px 0 color-mix(in srgb, var(--brand-gold) 22%, transparent),
 0 22px 52px rgba(0, 0, 0, 0.55),
 0 0 0 1px color-mix(in srgb, var(--brand-gold) 28%, transparent);
}

.app-step__head {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 min-height: 2rem;
}

.app-step__badge {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 2.1rem;
 height: 2.1rem;
 padding: 0 0.55rem;
 border-radius: 999px;
 font-size: 0.78rem;
 font-weight: 800;
 letter-spacing: 0.06em;
 color: var(--ink);
 background: linear-gradient(135deg, var(--accent-bright), var(--orchid) 52%, var(--accent-deep));
 box-shadow:
 0 0 0 2px color-mix(in srgb, var(--brand-gold) 55%, transparent),
 0 6px 22px color-mix(in srgb, var(--brand-accent) 36%, transparent);
}

.app-step__device {
 position: relative;
 width: min(100%, 228px);
 aspect-ratio: 10 / 19.5;
 border-radius: 32px;
 padding: 10px;
 background: linear-gradient(
 148deg,
 color-mix(in srgb, var(--brand-hover) 55%, #0a0610),
 color-mix(in srgb, var(--brand-primary) 75%, #000)
 );
 box-shadow:
 inset 0 1px 0 color-mix(in srgb, var(--brand-gold) 15%, transparent),
 0 18px 44px rgba(0, 0, 0, 0.52);
 border: 1px solid color-mix(in srgb, var(--brand-gold) 28%, rgba(255, 255, 255, 0.12));
 transition: transform 0.32s var(--ease-out), box-shadow 0.32s var(--ease-out);
}

.app-step__bezel {
 pointer-events: none;
 position: absolute;
 inset: 7px;
 border-radius: 24px;
 border: 1px solid rgba(255, 255, 255, 0.07);
 box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.25);
}

.app-step__notch {
 position: absolute;
 top: 13px;
 left: 50%;
 transform: translateX(-50%);
 width: 34%;
 height: 19px;
 border-radius: 0 0 12px 12px;
 background: rgba(0, 0, 0, 0.42);
 border: 1px solid rgba(255, 255, 255, 0.07);
 border-top: 0;
}

/* خلفية موحّدة داخل الشاشة — تقلل شعور «قالبين لونين» خلف نفس الشعار */
.app-step__screen {
 position: relative;
 width: 100%;
 height: 100%;
 border-radius: 21px;
 overflow: hidden;
 background-color: color-mix(in srgb, var(--page-bg) 94%, var(--brand-primary));
 background-image: radial-gradient(
 120% 100% at 50% 0%,
 color-mix(in srgb, var(--brand-primary) 35%, transparent) 0%,
 transparent 62%
 );
 display: grid;
 place-items: center;
 box-shadow:
 inset 0 0 0 1px rgba(255, 255, 255, 0.05),
 inset 0 -24px 48px rgba(0, 0, 0, 0.35);
}

.app-step__screen img {
 width: 100%;
 height: 100%;
 object-fit: contain;
 object-position: center center;
 display: block;
}

.app-step__title {
 margin: 0;
 padding-inline: 0.25rem;
 font-size: clamp(0.95rem, 2.3vw, 1.06rem);
 font-weight: 700;
 line-height: 1.5;
 max-width: 26ch;
 color: color-mix(in srgb, var(--text) 94%, var(--brand-gold));
}

.accordion { display: flex; flex-direction: column; gap: 0.65rem; }
.accordion__item {
 border-radius: var(--radius-md);
 border: 1px solid var(--line);
 background: var(--surface);
 overflow: hidden;
 transition: border-color 0.25s;
}
.accordion__item[open] { border-color: var(--orchid-dim); }
.accordion__item summary {
 list-style: none;
 cursor: pointer;
 padding: 1.1rem 1.25rem;
 font-weight: 700;
 font-size: 1.02rem;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
}
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__item summary::after {
 content: "";
 width: 10px;
 height: 10px;
 border-inline-end: 2px solid var(--text-muted);
 border-block-end: 2px solid var(--text-muted);
 transform: rotate(-45deg);
 flex-shrink: 0;
 transition: transform 0.25s var(--ease-out);
}
.accordion__item[open] summary::after { transform: rotate(45deg); }
.accordion__body { padding: 0 1.25rem 1.15rem; }
.accordion__body p { margin: 0; color: var(--text-muted); font-size: 0.98rem; }

.contact-split {
 display: grid;
 grid-template-columns: 0.95fr 1.05fr;
 gap: clamp(2rem, 5vw, 3.5rem);
 align-items: start;
}
@media (max-width: 840px) { .contact-split { grid-template-columns: 1fr; } }

.contact-meta {
 list-style: none;
 margin: 1.5rem 0 0;
 padding: 0;
 display: flex;
 flex-direction: column;
 gap: 1rem;
}
.contact-meta__label {
 display: block;
 font-size: 0.75rem;
 font-weight: 800;
 letter-spacing: 0.06em;
 color: var(--text-faint);
 text-transform: uppercase;
 margin-bottom: 0.2rem;
}

.contact-split__intro .lead {
 max-width: 52ch;
 color: var(--text-muted);
}
.contact-meta a {
 color: color-mix(in srgb, var(--brand-accent) 78%, var(--text));
 text-decoration: none;
 font-weight: 600;
}
.contact-meta a:hover {
 text-decoration: underline;
 color: var(--orchid);
}
.contact-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 0.85rem;
 margin-top: 1.5rem;
}
.contact-action {
 display: inline-flex;
 align-items: center;
 gap: 0.65rem;
 min-height: 46px;
 padding: 0.75rem 1rem;
 border-radius: 999px;
 border: 1px solid var(--line);
  background: color-mix(in srgb, var(--page-bg) 85%, transparent);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s var(--ease-out), background 0.2s;
}
.contact-action:hover {
 border-color: var(--orchid-dim);
 background: color-mix(in srgb, var(--brand-accent) 10%, transparent);
 transform: translateY(-1px);
}

.contact-form {
 padding: clamp(1.25rem, 3vw, 1.75rem);
 border-radius: var(--radius-lg);
 border: 1px solid var(--line);
  background: color-mix(in srgb, var(--page-bg) 92%, transparent);
  backdrop-filter: blur(12px);
 display: flex;
 flex-direction: column;
 gap: 1.1rem;
}
.field { position: relative; }
.field input,
.field textarea {
 width: 100%;
 padding: 1.15rem 1rem 0.55rem;
 font: inherit;
 font-size: 1rem;
 color: var(--text);
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--radius-sm);
 outline: none;
 transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field label {
 position: absolute;
 inset-inline: 1rem;
 top: 0.85rem;
 font-size: 0.95rem;
 color: var(--text-faint);
 pointer-events: none;
 transition: transform 0.2s var(--ease-out), font-size 0.2s, color 0.2s;
 transform-origin: top right;
}
.field input:focus,
.field textarea:focus {
 border-color: var(--orchid-dim);
 box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 22%, transparent);
}
.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label {
 transform: translateY(-0.55rem) scale(0.82);
 color: var(--orchid);
}
.form-hint { margin: 0; min-height: 1.25rem; font-size: 0.9rem; color: var(--orchid); }
.form-status {
 min-height: 1.25rem;
 margin: -0.15rem 0 0;
 font-size: 0.92rem;
 color: var(--text-faint);
}
.form-status.is-success {
 color: #7ef0b2;
}
.form-status.is-error {
 color: #ff9a9a;
}

.site-footer {
 padding: clamp(2.5rem, 5vw, 3.5rem) 0 2.25rem;
 border-top: 1px solid var(--line);
 background: var(--page-bg);
}
.site-footer__grid {
 display: grid;
 grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr);
 gap: 1.5rem 2rem;
 align-items: center;
}
@media (max-width: 900px) {
 .site-footer__grid {
 grid-template-columns: 1fr;
 text-align: center;
 justify-items: center;
 }
 .site-footer__brand {
 flex-direction: column;
 text-align: center;
 }
 .site-footer__links {
 flex-wrap: wrap;
 justify-content: center;
 }
}
.site-footer__brand {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 min-width: 0;
}
.site-footer__brand img {
 border-radius: 10px;
 flex-shrink: 0;
}
.site-footer__brand-text {
 display: flex;
 flex-direction: column;
 gap: 0.25rem;
 min-width: 0;
}
.site-footer__name {
 font-weight: 800;
 font-size: 1.05rem;
}
.site-footer__tagline {
 margin: 0;
 font-size: 0.8rem;
 line-height: 1.45;
 color: var(--text-faint);
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}
.site-footer__links {
 display: flex;
 flex-wrap: wrap;
 gap: 0.65rem 1.15rem;
 justify-self: end;
}
@media (max-width: 900px) {
 .site-footer__links {
 justify-self: center;
 }
}
.site-footer__links a {
 text-decoration: none;
 color: var(--text-muted);
 font-weight: 600;
 font-size: 0.92rem;
}
.site-footer__links a:hover {
 color: var(--orchid);
}
.site-footer__copyright {
 grid-column: 1 / -1;
 margin: 0.25rem 0 0;
 padding-top: 1.25rem;
 border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
 font-size: 0.82rem;
 color: var(--text-faint);
 text-align: center;
}
.site-footer__note { width: 100%; margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--text-faint); }
.site-footer__note code { font-size: 0.8em; padding: 0.1em 0.35em; border-radius: 6px; background: var(--surface); }

/* === Laravel intro extensions: hero slider, services grid, FAQ tabs, partners, loader, LTR === */
:root {
 --brand: var(--orchid);
 --brand-dim: var(--orchid-dim);
}

.hero-wrap {
 position: relative;
 min-height: calc(100svh - var(--header-h));
 background: var(--page-bg);
}
.hero-slider {
 position: relative;
 min-height: calc(100svh - var(--header-h));
}
.hero-slide {
 position: absolute;
 inset: 0;
 display: grid;
 align-items: end;
 justify-items: start;
 padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 7vw, 5.5rem);
 padding-inline: clamp(1rem, 4vw, 2rem);
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.85s var(--ease-out);
 isolation: isolate;
}
.hero-slide.is-active {
 opacity: 1;
 pointer-events: auto;
 z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
 .hero-slide {
 transition: none;
 }
}
.hero-slide .hero__media { z-index: -1; }
.hero-dots {
 position: absolute;
 inset-inline: 0;
 bottom: clamp(1.1rem, 3vw, 1.85rem);
 z-index: 6;
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 0.55rem;
}
.hero-dots button {
 width: 11px;
 height: 11px;
 border-radius: 50%;
 border: 0;
 padding: 12px;
 margin: -12px;
 box-sizing: content-box;
 background-clip: content-box;
 background-color: color-mix(in srgb, var(--brand-primary) 22%, transparent);
 cursor: pointer;
 transition: transform 0.2s var(--ease-out), background-color 0.2s, box-shadow 0.2s;
}
.hero-dots button:hover {
 background-color: color-mix(in srgb, var(--brand-primary) 38%, transparent);
}
.hero-dots button.is-active {
 background-color: #5D2C79;
 box-shadow: 0 0 0 3px color-mix(in srgb, #5D2C79 35%, transparent);
 transform: scale(1.12);
}

.lang-dd { position: relative; }
.lang-dd__btn {
 display: inline-flex;
 align-items: center;
 gap: 0.4rem;
 padding: 0.45rem 0.95rem;
 border-radius: 999px;
 border: 1px solid var(--line);
 background: var(--surface);
 color: var(--text);
 font: inherit;
 font-weight: 600;
 cursor: pointer;
}
.lang-dd__menu {
 position: absolute;
 inset-inline-end: 0;
 top: calc(100% + 8px);
 min-width: 140px;
 padding: 0.35rem;
 border-radius: var(--radius-md);
 border: 1px solid var(--line);
 background: color-mix(in srgb, var(--page-bg) 98%, transparent);
 backdrop-filter: blur(12px);
 box-shadow: var(--shadow-glow);
 display: none;
 flex-direction: column;
 gap: 0.15rem;
 z-index: 80;
}
.lang-dd.is-open .lang-dd__menu { display: flex; }
.lang-dd__menu a {
 text-decoration: none;
 padding: 0.55rem 0.65rem;
 border-radius: var(--radius-sm);
 color: var(--text-muted);
 font-weight: 500;
}
.lang-dd__menu a:hover { background: var(--surface); color: var(--text); }

.service-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 1rem;
}
@media (max-width: 960px) { .service-grid { grid-template-columns: 1fr; } }
.service-card {
 padding: 1.35rem 1.25rem;
 border-radius: var(--radius-md);
 border: 1px solid var(--line);
 background: linear-gradient(165deg, rgba(255, 255, 255, 0.05), transparent);
 box-shadow: 0 18px 42px rgba(0, 0, 0, 0.12);
 transition: border-color 0.25s, transform 0.25s var(--ease-out), box-shadow 0.25s;
}
.service-card:hover {
 border-color: var(--brand-dim);
 transform: translateY(-2px);
 box-shadow: 0 24px 58px rgba(0, 0, 0, 0.22);
}
.service-card__top {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 margin-bottom: 0.85rem;
}
.service-card__icon {
 width: 44px;
 height: 44px;
 border-radius: 12px;
 background: linear-gradient(135deg, color-mix(in srgb, var(--brand-accent) 38%, transparent), color-mix(in srgb, var(--brand-primary) 82%, transparent));
 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
 display: grid;
 place-items: center;
 font-weight: 800;
 color: var(--text);
}
.service-card__eyebrow {
 color: var(--text-faint);
 font-size: 0.8rem;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}
.service-card h3 { margin: 0 0 0.45rem; font-size: 1.1rem; }
.service-card p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }

.faq-tabs {
 display: flex;
 flex-wrap: wrap;
 gap: 0.5rem;
 justify-content: center;
 margin-bottom: 1.25rem;
}
.faq-tab {
 border: 1px solid var(--line);
 background: var(--surface);
 color: var(--text-muted);
 font: inherit;
 font-weight: 600;
 padding: 0.55rem 1rem;
 border-radius: 999px;
 cursor: pointer;
 transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.faq-tab.is-active {
 border-color: var(--brand-dim);
 color: var(--text);
 background: color-mix(in srgb, var(--brand-accent) 14%, transparent);
}
.faq-panel[hidden] {
 display: none !important;
}
.faq-panel:not([hidden]) {
 display: block;
 padding-top: 0.35rem;
}

.partners-strip {
 display: flex;
 gap: 1.25rem;
 overflow-x: auto;
 padding: 0.5rem 0;
 scroll-snap-type: x mandatory;
 -webkit-overflow-scrolling: touch;
}
.partners-strip::-webkit-scrollbar { height: 6px; }
.partners-strip::-webkit-scrollbar-thumb {
 background: var(--line);
 border-radius: 99px;
}
.partners-strip .partner-logo {
 flex: 0 0 auto;
 scroll-snap-align: start;
 min-width: 148px;
 height: 76px;
 padding: 0.75rem 1rem;
 border-radius: var(--radius-md);
 border: 1px solid var(--line);
 background: var(--surface);
 display: grid;
 place-items: center;
 transition: border-color 0.25s, transform 0.25s var(--ease-out), background 0.25s;
}
.partners-strip .partner-logo:hover {
 border-color: var(--orchid-dim);
 background: color-mix(in srgb, var(--brand-accent) 10%, rgba(255, 255, 255, 0.04));
 transform: translateY(-2px);
}
.partners-strip .partner-logo img {
 max-height: 54px;
 width: auto;
 max-width: 140px;
 object-fit: contain;
 filter: grayscale(1) contrast(1.1);
 opacity: 0.82;
 transition: filter 0.25s, opacity 0.25s;
}
.partners-strip .partner-logo:hover img {
 filter: grayscale(0);
 opacity: 1;
}

.intro-loader {
 position: fixed;
 inset: 0;
 z-index: 999;
 display: grid;
 place-items: center;
 background: var(--page-bg);
 transition: opacity 0.35s var(--ease-out), visibility 0.35s;
}
.intro-loader.is-hidden {
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
}
.intro-loader img { width: min(120px, 28vw); height: auto; }

.text-danger,
.error_meassages { color: #ff8b8b !important; font-size: 0.85rem; display: block; margin-top: 0.35rem; }

html[dir="ltr"] .field label { transform-origin: top left; }
html[dir="ltr"] .pullquote {
 border-inline-start: 0;
 border-inline-end: 3px solid var(--orchid);
 border-radius: var(--radius-md) 0 0 var(--radius-md);
}
html[dir="ltr"] .accordion__item summary::after {
 transform: rotate(45deg);
}
html[dir="ltr"] .accordion__item[open] summary::after {
 transform: rotate(-45deg);
}
.site-header__inner > .nav { flex: 1; display: flex; justify-content: center; }
.site-header__inner .lang-dd { flex-shrink: 0; }
@media (max-width: 880px) {
 .site-header__inner > .nav { justify-content: flex-end; }
}

.section--partners {
 background: var(--page-bg);
 border-block: 1px solid var(--line);
}

.social-row {
 display: flex;
 flex-wrap: wrap;
 gap: 0.5rem;
 list-style: none;
 margin: 0;
 padding: 0;
 align-items: center;
}
.social-row a {
 display: grid;
 place-items: center;
 width: 40px;
 height: 40px;
 border-radius: 12px;
 border: 1px solid var(--line);
 text-decoration: none;
 color: var(--text-muted);
}
.social-row a:hover {
 border-color: var(--orchid-dim);
 color: var(--orchid);
}

/* —— Extra polish: anchors, focus, empty states —— */
section[id] {
 scroll-margin-top: calc(var(--header-h) + 14px);
}

:where(a, button, summary, input, textarea, .faq-tab, .hero-dots button, .lang-dd__btn):focus-visible {
 outline: 2px solid var(--orchid);
 outline-offset: 3px;
}

.hero-dots button:focus-visible {
 outline-offset: 4px;
}

.section-empty {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 1rem;
 margin: 0 auto;
 padding: clamp(1.5rem, 4vw, 2rem) 1.5rem;
 max-width: min(44ch, 28rem);
 border-radius: var(--radius-lg);
 border: 1px solid color-mix(in srgb, var(--line) 70%, var(--brand-accent) 22%);
 background: linear-gradient(
 165deg,
 color-mix(in srgb, var(--brand-primary) 8%, var(--page-bg)),
 color-mix(in srgb, var(--page-bg) 98%, transparent)
 );
 box-shadow: 0 16px 48px rgba(16, 22, 58, 0.08);
 color: var(--text-muted);
 text-align: center;
}
.section-empty__icon {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 3rem;
 height: 3rem;
 border-radius: 999px;
 font-size: 1.15rem;
 color: color-mix(in srgb, var(--brand-accent) 55%, #fff);
 background: linear-gradient(
 135deg,
 color-mix(in srgb, var(--brand-accent) 28%, transparent),
 color-mix(in srgb, var(--brand-primary) 55%, transparent)
 );
 border: 1px solid color-mix(in srgb, var(--brand-accent) 35%, transparent);
 box-shadow: 0 8px 24px color-mix(in srgb, var(--brand-accent) 22%, transparent);
}
.section-empty__text {
 margin: 0;
 font-size: 1rem;
 line-height: 1.65;
 color: var(--text-muted);
}

/* —— Hero / slider — موبايل (RTL) —— */
@media (max-width: 880px) {
 .hero-wrap {
 width: 100%;
 max-width: 100%;
 overflow: hidden;
 }

 .hero-wrap,
 .hero-slider {
 min-height: calc(100svh - var(--header-h));
 min-height: calc(100dvh - var(--header-h));
 }

 .hero-slider {
 width: 100%;
 max-width: 100%;
 overflow-x: clip;
 }

 .hero-slide {
 display: grid;
 justify-items: stretch;
 align-items: end;
 align-content: end;
 width: 100%;
 inset-inline: 0;
 padding-inline: 0.85rem;
 padding-block: clamp(0.75rem, 3vw, 1.25rem) clamp(3.25rem, 8vw, 4.25rem);
 }

 .hero__media img {
 transform: none;
 object-position: center 18%;
 }

 .hero__media::after {
 background: linear-gradient(
 180deg,
 transparent 0%,
 color-mix(in srgb, var(--page-bg) 18%, transparent) 28%,
 color-mix(in srgb, var(--page-bg) 62%, transparent) 58%,
 color-mix(in srgb, var(--page-bg) 92%, transparent) 82%,
 var(--page-bg) 100%
 );
 }

 .hero__veil {
 background: linear-gradient(
 180deg,
 color-mix(in srgb, var(--page-bg) 12%, transparent) 0%,
 color-mix(in srgb, var(--page-bg) 48%, transparent) 45%,
 color-mix(in srgb, var(--page-bg) 82%, transparent) 72%,
 var(--page-bg) 100%
 );
 opacity: 0.92;
 }

 .hero__glow {
 inset: auto 5% 8% 5%;
 height: 42%;
 opacity: 0.55;
 }

 .hero__content {
 width: 100%;
 max-width: 100%;
 margin-inline: 0;
 align-self: stretch;
 align-items: stretch;
 text-align: center;
 box-sizing: border-box;
 padding: 1.15rem 1rem 1.2rem;
 border-radius: var(--radius-md);
 box-shadow: 0 14px 36px color-mix(in srgb, var(--brand-primary) 14%, transparent);
 }

 .hero__eyebrow {
 text-align: center;
 }

 .hero__title {
 align-items: center;
 width: 100%;
 }

 .hero__title-line {
 font-size: clamp(1.65rem, 7.2vw, 2.25rem);
 line-height: 1.2;
 text-align: center;
 }

 .hero__title-sub {
 font-size: clamp(0.92rem, 3.6vw, 1.05rem);
 line-height: 1.65;
 max-width: none;
 text-align: center;
 }

 .hero__actions {
 display: grid;
 grid-template-columns: 1fr;
 gap: 0.6rem;
 margin-top: 0.15rem;
 max-width: 14rem;
 margin-inline: auto;
 width: 100%;
 }

 .hero__actions .btn {
 width: 100%;
 min-height: 46px;
 padding-inline: 0.65rem;
 font-size: 0.92rem;
 justify-content: center;
 }

 .hero__pills {
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 gap: 0.45rem;
 }

 .hero__pills li {
 width: auto;
 max-width: 100%;
 justify-content: center;
 padding: 0.45rem 0.75rem;
 font-size: 0.82rem;
 min-height: 36px;
 }

 .hero__stats {
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 0.5rem;
 margin-top: 1rem;
 padding-top: 0.85rem;
 text-align: center;
 }

 .hero__stats > div {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 0.15rem;
 }

 .hero__stats dt {
 font-size: 0.68rem;
 text-align: center;
 }

 .hero__stats dd {
 margin: 0;
 text-align: center;
 font-size: 0.95rem;
 }

 .hero-dots {
 bottom: clamp(0.85rem, 2.8vw, 1.35rem);
 padding-inline: 1rem;
 gap: 0.45rem;
 }

 .site-header__inner {
 width: 100%;
 max-width: 100%;
 padding-inline: max(0.75rem, env(safe-area-inset-left)) max(0.75rem, env(safe-area-inset-right));
 gap: 0.5rem;
 }

 .brand {
 min-width: 0;
 font-size: 1.05rem;
 }

 .brand img {
 width: 40px;
 height: 40px;
 flex-shrink: 0;
 }

 .brand__wordmark {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 }
}

@media (max-width: 400px) {
 .hero__actions {
 grid-template-columns: 1fr;
 }

 .hero__pills li {
 flex: 1 1 calc(50% - 0.45rem);
 justify-content: center;
 }
}

@media (max-width: 480px) {
 .hero__stats dt {
 font-size: 0.62rem;
 letter-spacing: 0.04em;
 }
}

@media (prefers-reduced-motion: reduce) {
 .partners-strip .partner-logo:hover {
 transform: none;
 }
}