/* رصدخانه — the seven headers and seven footers the admin chooses between.
   Shared pieces (wordmark, round buttons, CTA) come from site.css; this file
   only adds what differs per design. Classes: .hd-<n> and .ft-<n>. */

/* ================= shared header pieces ================= */
.site-header .site-nav .nav-a { display: inline-flex; align-items: center; gap: 6px; }
.nav-badge {
  display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 9px; font-size: 10.5px; font-weight: 700;
  background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--gold); margin-inline-start: 6px; line-height: 1;
}
.nl-highlight { color: var(--accent) !important; font-weight: 600; }
.nl-button {
  padding: 8px 16px !important; border-radius: 20px; border: 1px solid var(--halo); color: var(--accent) !important;
}
.nav-chev { width: 12px; height: 12px; transition: transform .25s; }
.nav-dd { position: relative; }
.nav-dd-panel {
  position: absolute; top: calc(100% + 4px); inset-inline-start: -14px; min-width: 210px; z-index: 40;
  display: flex; flex-direction: column; padding: 8px; border-radius: 18px; background: var(--panel);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .25s, visibility .2s;
}
.nav-dd-panel a { padding: 10px 14px !important; border-radius: 12px; font-size: 14px; color: var(--nav); }
.nav-dd:hover .nav-dd-panel, .nav-dd:focus-within .nav-dd-panel { opacity: 1; visibility: visible; transform: none; }
.nav-dd:hover .nav-chev { transform: rotate(180deg); }
@media (hover: hover) { .nav-dd-panel a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); } }
.mobile-nav a.sub { padding-inline-start: 30px; font-size: 14px; color: var(--muted); }
.mobile-nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }

/* sticky: the header lifts out of the flow once it scrolls away (see site.js) */
.hd-spacer { flex: none; }
.site-header.hd-stuck {
  position: fixed !important; top: 0; inset-inline: 0; z-index: 60; height: 74px;
  background: var(--scrim); border-bottom: 1px solid var(--line); box-shadow: 0 10px 30px -18px #0005;
  animation: hd-drop .45s cubic-bezier(.22, 1, .36, 1);
}
@supports (backdrop-filter: blur(1px)) {
  .site-header.hd-stuck:not(.hd-4) { backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
}
.site-header.hd-stuck .brand-type small { display: none; }
.site-header.hd-stuck .wordmark { font-size: 24px; }
.site-header.hd-stuck .mobile-nav { top: 70px; }
@keyframes hd-drop { from { transform: translateY(-100%); } to { transform: none; } }

/* ================= 1 · classic ================= */
.hd-1.nav-start .site-nav { position: static; transform: none; margin-inline-start: 44px; margin-inline-end: auto; }
.hd-1.ul-accent .site-nav a[aria-current="page"]::after { background: var(--accent); }

/* ================= 2 · floating glass ================= */
.hd-2 { height: auto !important; padding-block: 18px; display: block !important; }
.hd-2 .hd-float {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  height: 70px; padding-inline: 22px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 62%, transparent); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  box-shadow: 0 16px 40px -22px #1b124566, inset 0 1px 0 #ffffff26;
}
.hd-2.w-narrow .hd-float { max-width: 1080px; margin-inline: auto; }
.hd-2.blur-low .hd-float { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hd-2.blur-med .hd-float { backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.hd-2.blur-high .hd-float { backdrop-filter: blur(26px) saturate(1.4); -webkit-backdrop-filter: blur(26px) saturate(1.4); }
.hd-2 .wordmark { font-size: 26px; }
.hd-2 .wordmark > svg, .hd-2 .wordmark > img { width: 32px; height: 32px; }
.hd-2 .site-nav { position: static; transform: none; gap: 26px; }
.hd-2 .header-cta { padding: 11px 20px; }
.hd-2.has-glow .hd-float::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--hd-a, 0deg), transparent 0 60%, var(--halo) 75%, var(--gold) 82%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: hd-spin 7s linear infinite;
}
.hd-2.hd-stuck { height: auto; background: transparent; border: 0; box-shadow: none; padding-inline: 4%; backdrop-filter: none !important; }
.hd-2.hd-stuck .hd-float { height: 60px; }
.hd-2 .mobile-nav { top: 96px; }
@property --hd-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes hd-spin { to { --hd-a: 360deg; } }

/* ================= 3 · centered brand ================= */
.hd-3 { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; }
.hd-3 .site-nav { position: static; transform: none; gap: 28px; }
.hd-3 .nav-start { justify-self: start; }
.hd-3 .hd-end { justify-self: end; display: flex; align-items: center; gap: 26px; }
.hd-3 .brand-center { flex-direction: column; gap: 4px; text-align: center; }
.hd-3 .brand-center .brand-type { align-items: center; }
.hd-3.big-brand .brand-center { font-size: 36px; }
.hd-3.has-divider::after {
  content: ""; position: absolute; bottom: 0; inset-inline: 6.5%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--halo) 50%, var(--line) 82%, transparent);
}
.hd-3.hd-stuck .brand-center { flex-direction: row; }
.hd-3.hd-stuck .brand-center > svg, .hd-3.hd-stuck .brand-center > img { width: 30px; height: 30px; }

/* ================= 4 · minimal + full-screen menu ================= */
.hd-4 .header-side { gap: 12px; }
.burger {
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 14px; border-radius: 23px;
  border: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 600; transition: border-color .2s, background .2s;
}
.burger-lines { position: relative; width: 20px; height: 14px; }
.burger-lines i { position: absolute; inset-inline: 0; height: 1.7px; border-radius: 2px; background: currentColor; transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .2s, width .3s; }
.burger-lines i:nth-child(1) { top: 0; } .burger-lines i:nth-child(2) { top: 6px; width: 70%; } .burger-lines i:nth-child(3) { top: 12px; }
@media (hover: hover) { .burger:hover { border-color: var(--accent); } .burger:hover .burger-lines i:nth-child(2) { width: 100%; } }
.hd-overlay {
  position: fixed; inset: 0; z-index: 90; display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 40px;
  padding: 90px 8% 60px; overflow-y: auto; color: #f1edff;
  clip-path: circle(0 at calc(100% - 60px) 50px); transition: clip-path .7s cubic-bezier(.7, 0, .2, 1);
}
:dir(rtl) .hd-overlay { clip-path: circle(0 at 60px 50px); }
.hd-overlay.open { clip-path: circle(150% at 60px 50px); }
:dir(ltr) .hd-overlay.open { clip-path: circle(150% at calc(100% - 60px) 50px); }
.hd-overlay.ov-cosmic { background: radial-gradient(ellipse at 80% 10%, #3a2c86, #120b33 55%, #07041a); }
.hd-overlay.ov-accent { background: radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent) 45%, color-mix(in srgb, var(--accent) 60%, #000)); }
.hd-overlay.ov-glass { background: color-mix(in srgb, var(--base) 72%, transparent); color: var(--ink); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.ov-stars { position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(1.4px 1.4px at 12% 20%, #fff, transparent), radial-gradient(1.2px 1.2px at 32% 72%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 62% 34%, #fff, transparent), radial-gradient(1px 1px at 84% 82%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 46% 12%, #fff, transparent), radial-gradient(1px 1px at 90% 44%, #fff, transparent); }
.ov-glass .ov-stars { display: none; }
.ov-close { position: absolute; top: 26px; inset-inline-end: 6%; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; border: 1px solid currentColor; opacity: .8; transition: transform .3s, opacity .2s; }
.ov-close svg { width: 22px; height: 22px; }
@media (hover: hover) { .ov-close:hover { transform: rotate(90deg); opacity: 1; } }
.ov-nav { position: relative; display: flex; flex-direction: column; gap: 4px; }
.ov-nav a {
  display: flex; align-items: baseline; gap: 18px; font-size: clamp(30px, 4.4vw, 62px); font-weight: 800; line-height: 1.35;
  opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .6s cubic-bezier(.22,1,.36,1), color .2s;
}
.ov-nav a.sub { font-size: clamp(18px, 2vw, 24px); font-weight: 500; padding-inline-start: 64px; opacity: .8; }
.ov-nav .ov-n { font-size: 14px; font-weight: 500; opacity: .5; width: 28px; }
.hd-overlay.open .ov-nav a { opacity: 1; transform: none; transition-delay: calc(.25s + var(--i, 0) * .06s); }
@media (hover: hover) { .ov-nav a:hover { color: var(--gold); } }
.ov-side { position: relative; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; opacity: 0; transition: opacity .6s .5s; }
.hd-overlay.open .ov-side { opacity: 1; }
.ov-side .header-link { color: inherit; }
.ov-contact { display: flex; flex-direction: column; gap: 4px; opacity: .75; font-size: 14px; }
.ov-accent .header-cta, .ov-cosmic .header-cta { background: #fff; color: #1b1245; }
body.ov-open { overflow: hidden; }

/* ================= 5 · two tiers ================= */
.hd-5 { height: auto !important; display: block !important; padding: 0 !important; }
.hd-util {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; padding: 6px 6.5%;
  font-size: 12.5px; background: var(--accent); color: #fff;
}
.hd-5.bar-ink .hd-util { background: #120c30; color: #e9e4ff; }
.hd-5.bar-soft .hd-util { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--ink); border-bottom: 1px solid var(--line); }
[data-theme="dark"] .hd-5.bar-accent .hd-util { color: #140c3a; }
.util-msg { font-weight: 500; }
.util-side { display: flex; align-items: center; gap: 18px; }
.util-item { display: inline-flex; align-items: center; gap: 6px; }
.util-item svg { width: 15px; height: 15px; }
.hd-main { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 90px; padding-inline: 6.5%; }
.hd-5.hd-stuck .hd-util { display: none; }
.hd-5.hd-stuck .hd-main { height: 74px; }
.hd-5 .mobile-nav { top: 124px; }

/* ================= 6 · pill with sliding ink ================= */
.hd-6 .pill-nav {
  gap: 2px; padding: 5px; border-radius: 999px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
}
.hd-6.has-shadow .pill-nav { box-shadow: 0 12px 30px -18px #1b124566, inset 0 1px 0 #ffffff30; }
.hd-6 .pill-nav > a, .hd-6 .pill-nav > .nav-dd > a { position: relative; z-index: 1; padding: 9px 18px; border-radius: 999px; transition: color .25s; }
.hd-6 .pill-nav a[aria-current="page"]::after { display: none; }
.pill-ink {
  position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: var(--accent);
  opacity: 0; transition: left .45s cubic-bezier(.22,1,.36,1), width .45s cubic-bezier(.22,1,.36,1), opacity .25s;
}
.hd-6.ind-gold .pill-ink { background: var(--gold); }
.hd-6 .pill-nav .is-inked { color: #fff; }
[data-theme="dark"] .hd-6 .pill-nav .is-inked { color: #140c3a; }

/* ================= 7 · cosmic beam ================= */
.hd-7 .hd-beam {
  position: absolute; bottom: 0; inset-inline: 0; height: 1px; overflow: hidden;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}
.hd-7 .hd-beam::after {
  content: ""; position: absolute; top: -1px; height: 3px; width: 28%; border-radius: 3px; filter: blur(.5px);
  background: linear-gradient(90deg, transparent, var(--halo), var(--gold), transparent);
  animation: hd-beam 6s cubic-bezier(.45, 0, .55, 1) infinite;
}
.hd-7.beam-fast .hd-beam::after { animation-duration: 2.8s; }
@keyframes hd-beam { from { left: -30%; } to { left: 102%; } }
.hd-twinkle { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hd-twinkle i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--gold);
  left: calc(var(--i) * 8% - 3%); top: 22%;
  box-shadow: 0 0 8px var(--gold); animation: twinkle calc(2.4s + var(--i) * .3s) ease-in-out infinite; opacity: .3;
}
.hd-twinkle i:nth-child(even) { top: 70%; width: 2px; height: 2px; }
.hd-twinkle i:nth-child(3n) { top: 46%; background: var(--halo); box-shadow: 0 0 8px var(--halo); }
.hd-7.cta-glow .header-cta { animation: hd-glow 2.8s ease-in-out infinite; }
@keyframes hd-glow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent), inset 0 1px 0 #ffffff33; }
  50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 0%, transparent), 0 0 34px -4px var(--accent), inset 0 1px 0 #ffffff33; }
}

/* ================= footers ================= */
.site-foot { position: relative; overflow: hidden; }
.site-foot .wordmark.foot-mark { font-size: 24px; }
.site-foot .foot-mark > svg, .site-foot .foot-mark > img { width: 34px; height: 34px; }
.foot-grid.no-about { grid-template-columns: repeat(3, 1fr); }
.foot-muted { color: var(--muted); font-size: 13px; }
.foot-legal { display: inline-flex; gap: 18px; flex-wrap: wrap; }
.foot-legal a { color: var(--muted); }
.social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.social a {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--nav);
  border: 1px solid var(--line); transition: color .2s, border-color .2s, transform .25s, background .2s;
}
.social svg { width: 18px; height: 18px; }
.social.social-round a { border-radius: 50%; width: 44px; height: 44px; }
.social.social-mini { margin: 0; gap: 4px; }
.social.social-mini a { width: 26px; height: 26px; border: 0; color: inherit; }
.social.social-mini svg { width: 15px; height: 15px; }
@media (hover: hover) {
  .social a:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
  .foot-legal a:hover, .ft2-links a:hover, .ft3-links a:hover { color: var(--accent); }
}

/* 2 · minimal */
.ft-2 { padding-block: 34px 26px; }
.ft2-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ft2-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--nav); }
.ft-2 .social { margin: 0; }
.ft-2 .foot-bottom { margin-top: 24px; }

/* 3 · centered */
.ft3-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.ft-3.big-logo .foot-mark { font-size: 34px; flex-direction: column; gap: 10px; }
.ft-3.big-logo .foot-mark > svg, .ft-3.big-logo .foot-mark > img { width: 58px; height: 58px; }
.ft-3 .foot-mark .brand-type { align-items: center; }
.ft3-about { max-width: 560px; color: var(--muted); font-size: 14.5px; line-height: 2; }
.ft3-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; font-size: 14.5px; color: var(--nav); padding-block: 8px; }
.ft-3 .social { margin: 0; justify-content: center; }
.ft-3 .foot-bottom { justify-content: center; text-align: center; }

/* 4 · CTA band */
.ft4-band {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 40px 44px; margin-bottom: 56px; border-radius: 30px; border: 1px solid var(--line);
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 16%, var(--panel)), var(--panel));
}
.ft4-glow { position: absolute; inset: -40% auto auto -10%; width: 60%; height: 180%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 34%, transparent), transparent); animation: ft-drift 12s ease-in-out infinite alternate; }
@keyframes ft-drift { to { transform: translateX(40%) translateY(10%); } }
.ft4-copy { position: relative; }
.ft4-band h3 { font-size: clamp(22px, 2.4vw, 32px); margin-bottom: 6px; }
.ft4-band p { color: var(--muted); }
.ft4-band .explore-button { position: relative; }

/* 5 · contact cards */
.ft5-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 52px; }
.ft5-card {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 24px; border-radius: 22px; border: 1px solid var(--line);
  background: var(--card); transition: transform .3s, border-color .3s;
}
.ft5-card small { color: var(--muted); font-size: 12.5px; }
.ft5-card b { font-size: 17px; }
.ft5-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 10px; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ft5-ic svg { width: 22px; height: 22px; }
@media (hover: hover) { a.ft5-card:hover { transform: translateY(-3px); border-color: var(--halo); } }

/* 6 · galaxy */
.ft-6 { --ink: #f1edff; --muted: #a49dcd; --nav: #c0b9e6; --line: #2c2456; --accent: #b6a0ff; --card: #150f33cc;
  background: radial-gradient(ellipse at 70% 0%, #241c56, #0d0826 55%, #06030f); color: var(--ink); border-top: 0; }
.ft-6 .ft6-stars { opacity: 1; }
.ft6-orbit { position: absolute; inset: auto -10% 10% auto; width: 70%; color: #7b64d8; opacity: .35; pointer-events: none; }
.ft6-sat { color: var(--gold); filter: drop-shadow(0 0 6px var(--gold)); }
.ft-6 .foot-grid, .ft-6 .foot-bottom { position: relative; z-index: 1; }
.ft6-mark {
  position: relative; z-index: 1; text-align: center; font-weight: 900; line-height: .9; margin-top: 30px;
  font-size: clamp(90px, 20vw, 300px); user-select: none;
  background: linear-gradient(180deg, #b6a0ff55, #b6a0ff05 85%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ft-6 .foot-bottom { margin-top: 0; }
.ft-6 .brand-type small { color: var(--muted); }

/* 7 · split */
.ft7-split { display: grid; grid-template-columns: 1.1fr 1.4fr; gap: 60px; align-items: start; }
.ft7-quote p { font-size: clamp(22px, 2.3vw, 34px); font-weight: 800; line-height: 1.7; margin: 22px 0 26px; }
.ft7-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 32px; }
.ft7-cols h4, .ft-5 h4 { font-size: 13px; letter-spacing: .08em; color: var(--muted); margin-bottom: 14px; font-weight: 600; }
.ft7-cols ul { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.ft7-cols a { color: var(--nav); }
@media (hover: hover) { .ft7-cols a:hover { color: var(--accent); } }

/* ================= responsive ================= */
@media (max-width: 1150px) {
  .hd-2 .site-nav, .hd-6 .pill-nav { gap: 14px; }
  .hd-3 .site-nav { gap: 18px; }
  .hd-main { padding-inline: 5%; } .hd-util { padding-inline: 5%; }
}
@media (max-width: 960px) {
  .hd-3 { grid-template-columns: auto 1fr; }
  .hd-3 .brand-center { flex-direction: row; grid-column: 1; grid-row: 1; }
  .hd-3 .brand-center .brand-type { align-items: flex-start; }
  .hd-3 .hd-end { grid-column: 2; }
  .hd-3 .site-nav { display: none; }
  .hd-2 .site-nav { display: none; }
  .hd-overlay { grid-template-columns: 1fr; align-content: start; padding-top: 110px; }
  .ft7-split { grid-template-columns: 1fr; gap: 36px; }
  .foot-grid.no-about { grid-template-columns: 1fr 1fr; }
  .util-msg { display: none; }
  .hd-util { justify-content: center; }
}
@media (max-width: 759px) {
  .hd-2 { padding: 12px 12px 0 !important; }
  .hd-2 .hd-float { height: 60px; padding-inline: 14px 8px; }
  .hd-2 .wordmark { font-size: 22px; }
  .hd-2 .mobile-nav { top: 80px; }
  .hd-main { height: 76px; padding-inline: 16px; }
  .hd-util { padding-inline: 16px; }
  .hd-5 .mobile-nav { top: 116px; }
  .burger { height: 42px; padding: 0 12px; }
  .burger-label { display: none; }
  .hd4-cta { display: none; }
  .hd-overlay { padding: 100px 22px 40px; gap: 28px; }
  .ov-nav a.sub { padding-inline-start: 46px; }
  .ft4-band { padding: 28px 22px; border-radius: 24px; }
  .ft2-row { flex-direction: column; align-items: flex-start; }
  .foot-grid.no-about { grid-template-columns: 1fr; }
  .site-header.hd-stuck { height: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  .hd-overlay { transition: none; }
  .hd-7 .hd-beam::after, .hd-2.has-glow .hd-float::before, .ft4-glow { animation: none; }
}