/* =========================================================
   Karim & Aisha — Starry Night Theme (Minimal + Elegant)
   Robust stars layer using a REAL element: .bg-stars
   No pseudo-elements for the background (deterministic)
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Allura&display=swap");


:root{
  --bg: #070B16;
  --bg2:#0A1230;

  --panel: rgba(255,255,255,.035);
  --panel2: rgba(255,255,255,.02);

  --ivory:#F3F0E8;
  --muted: rgba(243,240,232,.72);

  --gold:#D4AF37;
  --gold-soft: rgba(212,175,55,.16);

  --border: rgba(243,240,232,.14);
  --shadow: 0 18px 55px rgba(0,0,0,.35);

  --radius: 18px;
  --radius-sm: 14px;
  --max: 1100px;

  --font-body: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-serif: ui-serif, Georgia, "Times New Roman", Times, serif;
  --font-script: "Allura", ui-serif, Georgia, "Times New Roman", Times, serif;



  /* Background tuning knobs (safe, deterministic) */
  --stars-opacity: 1;    /* overall intensity of stars layer */
  --stars-blur: 0.15px;     /* subtle soften; set 0px for sharper stars */
  --milky-opacity: 0.18;    /* diagonal milky-way band intensity */
  --dust-opacity: 0.10;     /* interstellar dust pockets */
  --color-stars: 0.38;      /* colored star visibility */
}

/* -------------------------
   Base / Reset
   ------------------------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  min-height:100vh;
  font-family: var(--font-body);
  color: var(--ivory);

  /* Clean base background */
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(212,175,55,.10), transparent 58%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 55%, var(--bg) 100%);
}

/* =========================================================
   Background stars layer (REAL ELEMENT)
   - fixed, behind content
   - no negative z-index
   - no pseudo-element overlays
   - no stretched ellipses that cause repeat seams
   ========================================================= */
.bg-stars{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--stars-opacity);
  background-color: transparent;

  /* The idea:
     - Non-repeating “atmosphere” layers first (vignette + milky way + dust).
     - Then repeating star layers using DIFFERENT tile sizes + offsets to avoid patterning.
     - Sparkle is simulated via small cross-glow at a handful of fixed points (NOT repeating ellipses).
  */

  background-image:
    /* 1) Vignette (non-repeating) */
    radial-gradient(900px 560px at 50% 35%, rgba(0,0,0,0) 62%, rgba(0,0,0,.30) 100%),

    /* 2) Milky Way band (non-repeating, diagonal, very soft) */
    linear-gradient(
      125deg,
      rgba(0,0,0,0) 34%,
      rgba(255,255,255, calc(var(--milky-opacity) * 0.55)) 46%,
      rgba(165,195,255, calc(var(--milky-opacity) * 0.45)) 50%,
      rgba(255,200,180, calc(var(--milky-opacity) * 0.38)) 53%,
      rgba(0,0,0,0) 66%
    ),

    /* 3) Dust pockets (non-repeating, subtle) */
    radial-gradient(820px 640px at 18% 28%, rgba(140,180,255, var(--dust-opacity)), rgba(0,0,0,0) 62%),
    radial-gradient(760px 620px at 78% 42%, rgba(255,170,185, calc(var(--dust-opacity) * 0.85)), rgba(0,0,0,0) 60%),
    radial-gradient(980px 760px at 55% 82%, rgba(235,225,170, calc(var(--dust-opacity) * 0.65)), rgba(0,0,0,0) 65%),

    /* 4) A couple of faint depth glows (non-repeating) */
    radial-gradient(900px 600px at 70% 10%, rgba(255, 235, 180, 0.08), rgba(0, 0, 0, 0) 60%),
    radial-gradient(760px 520px at 15% 80%, rgba(160, 200, 255, 0.06), rgba(0, 0, 0, 0) 60%),

    /* 5) Sparkle “feature stars” (non-repeating, fixed positions)
          - core dot + gentle cross glow.
          - because these are non-repeating, there are no seam/line artifacts. */
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,.95), transparent 60%),
    radial-gradient(18px 2px at 12% 18%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(2px 18px at 12% 18%, rgba(255,255,255,.10), transparent 60%),

    radial-gradient(1.3px 1.3px at 72% 22%, rgba(255,255,255,.92), transparent 60%),
    radial-gradient(18px 2px at 72% 22%, rgba(255,255,255,.09), transparent 60%),
    radial-gradient(2px 18px at 72% 22%, rgba(255,255,255,.09), transparent 60%),

    radial-gradient(1.1px 1.1px at 46% 40%, rgba(255,255,255,.88), transparent 60%),
    radial-gradient(16px 2px at 46% 40%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(2px 16px at 46% 40%, rgba(255,255,255,.08), transparent 60%),

    /* 6) Rare colored stars (repeat — but small dots only, no lines) */
    radial-gradient(circle, rgba(140, 190, 255, var(--color-stars)) 1px, rgba(140, 190, 255, 0) 2.6px),
    radial-gradient(circle, rgba(255, 165, 155, calc(var(--color-stars) * 0.85)) 1px, rgba(255, 165, 155, 0) 2.6px),
    radial-gradient(circle, rgba(255, 225, 175, calc(var(--color-stars) * 0.75)) 1px, rgba(255, 225, 175, 0) 2.8px),

    /* 7) Base star fields (repeat, multiple densities) */
    radial-gradient(circle, rgba(255, 255, 255, 0.90) 1px, rgba(255, 255, 255, 0) 2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.68) 1px, rgba(255, 255, 255, 0) 2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.52) 0.75px, rgba(255, 255, 255, 0) 1.6px),
    radial-gradient(circle, rgba(255, 255, 255, 0.34) 0.55px, rgba(255, 255, 255, 0) 1.3px),

    /* 8) Occasional soft clusters (repeat, very faint) */
    radial-gradient(circle, rgba(255, 255, 255, 0.12) 1.2px, rgba(255, 255, 255, 0) 10px),

    /* 9) subtle gold warmth near bottom (non-repeating) */
    radial-gradient(900px 420px at 50% 115%, rgba(212,175,55,.10), transparent 60%);

  /* Important:
     - Only the “star dot” layers repeat via background-size.
     - The atmosphere + feature stars are non-repeating (100% 100%).
  */
  background-repeat:
    no-repeat,  /* vignette */
    no-repeat,  /* milky way band */
    no-repeat,  /* dust 1 */
    no-repeat,  /* dust 2 */
    no-repeat,  /* dust 3 */
    no-repeat,  /* glow 1 */
    no-repeat,  /* glow 2 */

    no-repeat,  /* feature star 1 core */
    no-repeat,  /* feature star 1 horiz */
    no-repeat,  /* feature star 1 vert */
    no-repeat,  /* feature star 2 core */
    no-repeat,  /* feature star 2 horiz */
    no-repeat,  /* feature star 2 vert */
    no-repeat,  /* feature star 3 core */
    no-repeat,  /* feature star 3 horiz */
    no-repeat,  /* feature star 3 vert */

    repeat,     /* colored star layer 1 */
    repeat,     /* colored star layer 2 */
    repeat,     /* colored star layer 3 */

    repeat,     /* base stars 1 */
    repeat,     /* base stars 2 */
    repeat,     /* base stars 3 */
    repeat,     /* base stars 4 */

    repeat,     /* clusters */
    no-repeat;  /* bottom warmth */

  background-size:
    /* vignette */
    100% 100%,

    /* milky way band */
    100% 100%,

    /* dust pockets */
    100% 100%,
    100% 100%,
    100% 100%,

    /* depth glows */
    100% 100%,
    100% 100%,

    /* feature stars (fixed, non-repeating) */
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,

    /* colored stars (rare) */
    520px 520px,
    640px 640px,
    780px 780px,

    /* base stars (densities) */
    260px 260px,
    360px 360px,
    180px 180px,
    120px 120px,

    /* clusters */
    900px 900px,

    /* bottom warmth */
    100% 100%;

  background-position:
    /* vignette */
    center,

    /* milky way */
    center,

    /* dust pockets */
    center,
    center,
    center,

    /* depth glows */
    center,
    center,

    /* feature stars (positions already defined by gradients; keep centered) */
    center,
    center,
    center,
    center,
    center,
    center,
    center,
    center,
    center,

    /* colored stars offsets */
    160px 220px,
    60px 380px,
    300px 140px,

    /* base stars offsets */
    0 0,
    120px 180px,
    60px 30px,
    200px 90px,

    /* clusters */
    40px 240px,

    /* bottom warmth */
    center;

  /* gentle soften + stable compositing */
  filter: blur(var(--stars-blur));
  transform: translateZ(0);
}

/* Page content above stars */
.page{
  position: relative;
  z-index: 1;
}

img{
  max-width:100%;
  height:auto;
  display:block;
  border-radius: var(--radius-sm);
}

a{
  color: var(--ivory);
  text-decoration:none;
  text-underline-offset: 3px;
}
a:hover{ text-decoration:underline; }

h1,h2,h3{
  font-family: var(--font-serif);
  font-weight:600;
  letter-spacing:.01em;
  margin:0 0 10px;
}
h1{ font-size: clamp(38px, 5vw, 80px); }
h2{ font-size: clamp(24px, 3.2vw, 34px); }
h3{ font-size: 18px; }

p{ margin:0 0 12px; line-height:1.65; }
.lead{ font-size: 16px; color: var(--muted); }
.small{ font-size: 13px; color: var(--muted); }
.subtle{ color: var(--muted); }

.container{
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

/* -------------------------
   Navigation
   ------------------------- */
.nav{
  position: sticky;
  top:0;
  z-index: 50;
  background: rgba(7,11,22,.68);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(243,240,232,.10);
}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  gap: 16px;
}

.brand{
  font-family: var(--font-serif);
  font-size: 16px;
  letter-spacing:.04em;
  opacity:.95;
  white-space:nowrap;
}

.links{
  display:flex;
  align-items:center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.links a{
  font-size: 13px;
  letter-spacing:.06em;
  text-transform: uppercase;
  color: rgba(243,240,232,.86);
  opacity:.9;
  text-decoration:none;
  position:relative;
  padding: 6px 2px;
}
.links a:hover{ opacity:1; text-decoration:none; }

.links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  height:1px;
  width:0;
  background: rgba(212,175,55,.55);
  transition: width 260ms cubic-bezier(.2,.9,.2,1);
}
.links a:hover::after{ width:100%; }

.badge{
  border: 1px solid rgba(212,175,55,.55);
  padding: 7px 10px !important;
  border-radius: 999px;
  background: rgba(212,175,55,.10);
}
.badge::after{ display:none; }

/* -------------------------
   Hero
   ------------------------- */
.hero{
  position: relative;
  min-height: 70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 64px 0 70px;
  overflow:hidden;
}

/* Compact hero for inner pages (less scrolling) */
.hero.compact{
  min-height: auto;
  padding: 44px 0 34px;
}

/* Title color consistency across pages */
.cta h1{
  margin: 0 0 10px;
  color: var(--gold);
  text-shadow: 0 8px 30px rgba(0,0,0,.40);

  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.05;
}

/* extremely subtle hero glow (keeps minimalist) */
.hero::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity:.55;
  background:
    radial-gradient(700px 320px at 50% 65%, rgba(212,175,55,.10), transparent 62%);
  filter: blur(.2px);
}

.cta{
  position:relative;
  z-index:2;
  width: min(880px, calc(100% - 40px));
  padding: 22px 20px;
  border-radius: calc(var(--radius) + 6px);
  background: rgba(7,11,22,.30);
  border: 1px solid rgba(243,240,232,.10);
  box-shadow: 0 14px 50px rgba(0,0,0,.28);
}

.cta p{
  color: rgba(243,240,232,.85);
  margin-bottom: 10px;
}

/* Buttons */
.btn{
  display:inline-block;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid rgba(212,175,55,.55);
  background: rgba(212,175,55,.12);
  color: var(--ivory);
  letter-spacing:.05em;
  text-transform: uppercase;
  font-size: 12px;
  text-decoration:none;
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), background 220ms cubic-bezier(.2,.9,.2,1), border-color 220ms cubic-bezier(.2,.9,.2,1);
}
.btn:hover{
  text-decoration:none;
  transform: translateY(-1px);
  background: rgba(212,175,55,.18);
  border-color: rgba(212,175,55,.70);
}
.btn.ghost{
  background: transparent;
  border-color: rgba(243,240,232,.22);
}
.btn.ghost:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(243,240,232,.30);
}

/* -------------------------
   Sections / Cards
   ------------------------- */
.section{ padding: 54px 0; }

.grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.card{
  border: 1px solid rgba(243,240,232,.14);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 18px 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.20);
}

.sep{
  height: 1px;
  margin: 34px auto;
  width: min(860px, calc(100% - 40px));
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.28), transparent);
  border:0;
}

.list{ margin:0; padding-left: 18px; }
.list li{ margin: 8px 0; color: rgba(243,240,232,.88); }

/* -------------------------
   Footer
   ------------------------- */
.footer{
  padding: 28px 0 38px;
  border-top: 1px solid rgba(243,240,232,.10);
  background: rgba(7,11,22,.45);
}
.footer p{ margin:0; color: rgba(243,240,232,.75); font-size: 13px; }

/* -------------------------
   Responsive
   ------------------------- */
@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr; }
  .links{ gap: 12px; }
  .cta{ padding: 18px 14px; }
}