@import url("https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;600;700;800&family=Noto+Sans:wght@400;600;700;800&display=swap");

:root {
  --ai-navy: #12355b;
  --ai-navy-deep: #0b2745;
  --ai-navy-soft: #214b76;
  --ai-gold: #d6a84b;
  --ai-gold-deep: #af8130;
  --ai-paper: #f7f5ef;
  --ai-paper-strong: #fffdf8;
  --ai-ink: #17344f;
  --ai-ink-soft: #597087;
  --ai-line: rgba(18, 53, 91, .17);
  --ai-danger: #a83e32;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--ai-paper); }
body { min-width: 320px; margin: 0; background: var(--ai-paper); color: var(--ai-ink); font-family: "Noto Kufi Arabic", "Noto Sans", sans-serif; font-size: 16px; line-height: 1.9; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
code, pre, bdi, time, [dir="ltr"] { font-family: "Noto Sans", monospace; }
:focus-visible { outline: 3px solid var(--ai-gold); outline-offset: 3px; }

.ai-shell { min-height: 100vh; overflow: hidden; }
.ai-frame { width: min(calc(100% - 40px), 1120px); margin-inline: auto; }
.ai-header { border-bottom: 1px solid var(--ai-line); background: rgba(247, 245, 239, .96); }
.ai-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 1rem; }
.ai-brand { display: inline-flex; flex: 0 1 auto; align-items: center; min-width: 0; gap: .65rem; }
.ai-brand img { flex: none; width: 40px; height: 40px; border: 1px solid var(--ai-gold); object-fit: cover; }
.ai-brand span { display: grid; min-width: 0; line-height: 1.45; }
.ai-brand strong { overflow-wrap: anywhere; color: var(--ai-navy); font-size: .86rem; font-weight: 800; }
.ai-brand small { color: var(--ai-ink-soft); font-family: "Noto Sans", sans-serif; font-size: .56rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ai-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .15rem .8rem; }
.ai-nav a, .ai-inline-links a, .ai-back a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ai-ink-soft); font-size: .68rem; font-weight: 800; white-space: nowrap; }
.ai-nav a:hover, .ai-inline-links a:hover, .ai-back a:hover { color: var(--ai-navy); }
.ai-nav .ai-owner { border: 1px solid var(--ai-line); padding-inline: .65rem; color: var(--ai-navy); }
.ai-owner span { margin-inline-start: .25rem; color: var(--ai-gold-deep); font-size: .6rem; }

.ai-hero, .ai-page-heading { position: relative; border-bottom: 1px solid var(--ai-line); background-color: var(--ai-paper); background-image: linear-gradient(var(--ai-line) 1px, transparent 1px), linear-gradient(90deg, var(--ai-line) 1px, transparent 1px); background-size: 44px 44px; }
.ai-hero::before, .ai-page-heading::before { position: absolute; inset: 0; background: linear-gradient(90deg, var(--ai-paper) 0%, rgba(247, 245, 239, .78) 50%, var(--ai-paper) 100%); content: ""; pointer-events: none; }
.ai-hero > *, .ai-page-heading > * { position: relative; }
.ai-hero { padding: clamp(4rem, 9vw, 7rem) 0; }
.ai-page-heading { padding: clamp(2.8rem, 6vw, 5rem) 0; }
.ai-kicker { margin: 0 0 .9rem; color: var(--ai-gold-deep); font-family: "Noto Sans", sans-serif; font-size: .66rem; font-weight: 800; letter-spacing: .08em; }
h1, h2, h3 { margin: 0; color: var(--ai-navy-deep); font-weight: 800; line-height: 1.55; text-wrap: balance; }
h1 { max-width: 15em; font-size: clamp(1.9rem, 4vw, 3.8rem); }
h2 { font-size: clamp(1.22rem, 2.1vw, 1.8rem); }
h3 { margin-top: 2rem; font-size: 1rem; }
p { max-width: 72rem; }
.ai-lead, .ai-page-heading p { max-width: 49rem; margin: 1.2rem 0 0; color: var(--ai-ink-soft); font-size: clamp(.82rem, 1.3vw, 1rem); font-weight: 600; }
.ai-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
.ai-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--ai-line); background: var(--ai-paper-strong); padding: .55rem .9rem; color: var(--ai-navy); font-size: .68rem; font-weight: 800; text-align: center; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.ai-button:hover { border-color: var(--ai-gold-deep); background: #f4ead2; transform: translateY(-2px); }
.ai-button--primary { border-color: var(--ai-navy); background: var(--ai-navy); color: var(--ai-paper-strong); box-shadow: 4px 4px 0 rgba(214, 168, 75, .8); }
.ai-button--primary:hover { background: var(--ai-navy-soft); border-color: var(--ai-navy-soft); }

.ai-section { padding: clamp(3.25rem, 7vw, 6.3rem) 0; }
.ai-section--line { border-top: 1px solid var(--ai-line); background: #edece7; }
.ai-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ai-line); border-inline-start: 1px solid var(--ai-line); }
.ai-panel { min-height: 250px; border-bottom: 1px solid var(--ai-line); border-inline-end: 1px solid var(--ai-line); background: rgba(255, 253, 248, .63); padding: clamp(1.3rem, 3vw, 2.2rem); }
.ai-panel p:not(.ai-kicker), .ai-docs > p, .ai-contact p, .ai-empty p { margin: .85rem 0 0; color: var(--ai-ink-soft); font-size: .75rem; font-weight: 600; }
.ai-panel a, .ai-docs a { color: var(--ai-navy); text-decoration: underline; text-decoration-color: var(--ai-gold); text-underline-offset: .18em; }
.ai-docs { max-width: 820px; }
.ai-docs > h2 { margin-bottom: .65rem; }
.ai-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 1.1rem 0 0; border-top: 1px solid var(--ai-line); border-inline-start: 1px solid var(--ai-line); }
.ai-fields div { min-height: 98px; border-bottom: 1px solid var(--ai-line); border-inline-end: 1px solid var(--ai-line); padding: .8rem; background: var(--ai-paper-strong); }
dt { color: var(--ai-ink-soft); font-size: .62rem; font-weight: 800; }
dd { margin: .4rem 0 0; color: var(--ai-navy); font-size: .7rem; font-weight: 700; overflow-wrap: anywhere; }
.ai-note { border-inline-start: 3px solid var(--ai-gold); background: rgba(244, 234, 210, .65); padding: .7rem .85rem; color: var(--ai-navy); font-size: .68rem; font-weight: 700; }
pre { max-width: 100%; overflow: auto; border: 1px solid var(--ai-line); background: var(--ai-navy-deep); padding: 1rem; color: #edf2f5; direction: ltr; font-size: .72rem; line-height: 1.75; text-align: left; white-space: pre; }

.ai-inline-links, .ai-back { display: flex; flex-wrap: wrap; gap: .45rem 1.2rem; margin-top: 1.25rem; }
.ai-inline-links a, .ai-back a { border-bottom: 1px solid var(--ai-gold); }
.ai-offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ai-offer-card, .ai-detail-card, .ai-contact, .ai-empty { border: 1px solid var(--ai-line); background: var(--ai-paper-strong); padding: clamp(1.25rem, 2.7vw, 1.8rem); }
.ai-offer-card { display: flex; min-height: 310px; flex-direction: column; }
.ai-offer-card__top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.ai-offer-card__top > code { color: var(--ai-ink-soft); font-size: .67rem; }
.ai-badge { display: inline-flex; align-items: center; min-height: 27px; border: 1px solid var(--ai-gold-deep); background: #f4ead2; padding: .15rem .4rem; color: var(--ai-navy); font-size: .57rem; font-weight: 800; }
.ai-offer-card h2 { margin-top: 1.2rem; font-size: 1.1rem; }
.ai-offer-data { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 1.25rem 0 0; border-top: 1px solid var(--ai-line); border-inline-start: 1px solid var(--ai-line); }
.ai-offer-data div { min-height: 78px; border-bottom: 1px solid var(--ai-line); border-inline-end: 1px solid var(--ai-line); padding: .65rem; }
.ai-text-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; padding-top: 1rem; color: var(--ai-navy); font-size: .7rem; font-weight: 800; }
.ai-text-link:hover { color: var(--ai-gold-deep); }
.ai-empty { max-width: 600px; }
.ai-empty .ai-button { margin-top: 1.1rem; }
.ai-detail { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr); align-items: start; gap: 1rem; }
.ai-detail-card h2, .ai-contact h2 { margin-top: 1.25rem; }
.ai-detail-data { margin: 1.25rem 0 0; border-top: 1px solid var(--ai-line); }
.ai-detail-data div { display: grid; grid-template-columns: minmax(125px, .42fr) minmax(0, 1fr); gap: 1rem; border-bottom: 1px solid var(--ai-line); padding: .85rem 0; }
.ai-detail-data dd { margin: 0; }
.ai-preline { white-space: pre-wrap; }
.ai-url { display: block; direction: ltr; text-align: left; word-break: break-all; }
.ai-contact { border-top: 3px solid var(--ai-gold); }
.ai-contact .ai-button { width: 100%; margin-top: 1.25rem; }
.ai-error { padding: clamp(5rem, 14vw, 10rem) 0; text-align: center; }
.ai-error h1, .ai-error p { margin-inline: auto; }
.ai-error p { max-width: 610px; color: var(--ai-ink-soft); font-weight: 600; }
.ai-error .ai-actions { justify-content: center; }
.ai-footer { margin-top: auto; background: var(--ai-navy-deep); color: #e8edf1; }
.ai-footer .ai-frame { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; }
.ai-footer p { margin: 0; color: #c5d0db; font-size: .61rem; font-weight: 600; }
.ai-footer strong { color: var(--ai-gold); }
.ai-footer div div { display: flex; flex-wrap: wrap; gap: .8rem; }
.ai-footer a { display: inline-flex; align-items: center; min-height: 44px; color: #e8edf1; font-size: .62rem; font-weight: 700; }
.ai-footer a:hover { color: var(--ai-gold); }

@media (max-width: 820px) {
  .ai-header__inner { align-items: flex-start; flex-wrap: wrap; padding-block: .65rem; }
  .ai-nav { width: 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: .15rem; }
  .ai-offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-detail { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ai-frame { width: min(calc(100% - 28px), 1120px); }
  .ai-grid, .ai-fields, .ai-offer-grid { grid-template-columns: 1fr; }
  .ai-panel { min-height: auto; }
  .ai-offer-card { min-height: auto; }
  .ai-nav { gap: .05rem .7rem; }
  .ai-nav a { font-size: .61rem; }
  .ai-detail-data div { grid-template-columns: 1fr; gap: .18rem; }
  .ai-footer .ai-frame { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }