:root{
  --bg-deep:   #081420;
  --bg-mid:    #0f2438;
  --bg-panel:  #122b42;
  --beam:      #E8B04B;
  --beam-soft: #F4CE85;
  --text-main: #F3EFE4;
  --text-muted:#87A0B5;
  --line:      rgba(232,176,75,0.28);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  height:100%;
  background:var(--bg-deep);
  color:var(--text-main);
  font-family:'Tajawal', sans-serif;
  overflow-x:hidden;
}

.scene{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:6vh 6vw;
  text-align:center;
  isolation:isolate;
  background:
    radial-gradient(120% 70% at 50% -10%, var(--bg-mid) 0%, var(--bg-deep) 55%),
    linear-gradient(180deg, var(--bg-deep) 0%, #050c14 100%);
}

/* ---------- ambient sea/sky ---------- */
.stars{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 20%, rgba(255,255,255,.55) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 15%, rgba(255,255,255,.4) 0, transparent 60%),
    radial-gradient(1px 1px at 35% 8%, rgba(255,255,255,.5) 0, transparent 60%),
    radial-gradient(1px 1px at 60% 30%, rgba(255,255,255,.35) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 90% 40%, rgba(255,255,255,.3) 0, transparent 60%),
    radial-gradient(1px 1px at 20% 45%, rgba(255,255,255,.3) 0, transparent 60%),
    radial-gradient(1px 1px at 50% 12%, rgba(255,255,255,.45) 0, transparent 60%);
  opacity:.8;
}

.horizon{
  position:absolute; left:0; right:0; bottom:14vh; height:1px; z-index:0;
  background:linear-gradient(90deg, transparent, rgba(135,160,181,.35) 20%, rgba(135,160,181,.35) 80%, transparent);
}

.horizon::after{
  content:'';
  position:absolute; inset:1px -100vw auto -100vw; height:26vh;
  background:linear-gradient(180deg, rgba(15,36,56,.55), transparent);
}

/* ---------- sweeping beacon beam ---------- */
.beam-wrap{
  position:absolute; top:9vh; left:50%; z-index:1; pointer-events:none;
  width:1px; height:1px;
}

.beam{
  position:absolute; top:0; right:0;
  width:140vmax; height:46vh;
  transform-origin:top right;
  background:conic-gradient(from 250deg at 100% 0%,
    transparent 0deg,
    rgba(232,176,75,.16) 8deg,
    rgba(232,176,75,.05) 15deg,
    transparent 22deg);
  animation:sweep 9s ease-in-out infinite alternate;
  mix-blend-mode:screen;
}

@keyframes sweep{
  0%   { transform:rotate(-34deg); }
  100% { transform:rotate(34deg); }
}

/* ---------- lighthouse mark ---------- */
.mark{
  position:relative; z-index:2;
  width:64px; height:64px;
  margin-bottom:28px;
}

.mark svg{ width:100%; height:100%; display:block; }

.lamp-glow{
  animation:pulse 2.6s ease-in-out infinite;
  transform-origin:center;
}

@keyframes pulse{
  0%,100%{ opacity:.55; }
  50%    { opacity:1; }
}

/* ---------- content ---------- */
.content{ position:relative; z-index:2; max-width:640px; }

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:.18em;
  color:var(--text-muted);
  text-transform:uppercase;
  margin-bottom:18px;
  direction:ltr;
}

.brand{
  font-family:'Cairo', sans-serif;
  font-weight:900;
  font-size:clamp(34px, 6vw, 58px);
  line-height:1.15;
  color:var(--text-main);
  letter-spacing:-.01em;
}

.tagline{
  font-weight:400;
  font-size:clamp(14px, 2vw, 17px);
  color:var(--text-muted);
  margin-top:12px;
}

.divider{
  width:64px; height:2px;
  margin:34px auto;
  background:linear-gradient(90deg, transparent, var(--beam), transparent);
  position:relative;
}

.divider::before{
  content:'';
  position:absolute; top:50%; left:50%;
  width:6px; height:6px; border-radius:50%;
  background:var(--beam);
  transform:translate(-50%,-50%);
  box-shadow:0 0 10px 2px rgba(232,176,75,.6);
}

.headline{
  font-family:'Cairo', sans-serif;
  font-weight:800;
  font-size:clamp(28px, 4.2vw, 40px);
  color:var(--beam-soft);
}

.desc{
  margin-top:16px;
  font-size:clamp(14.5px, 1.8vw, 16px);
  line-height:1.9;
  color:var(--text-muted);
  max-width:480px;
  margin-inline:auto;
}

.cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:40px;
  padding:14px 30px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(232,176,75,.06);
  color:var(--text-main);
  text-decoration:none;
  font-family:'IBM Plex Mono', monospace;
  font-size:14px;
  letter-spacing:.02em;
  direction:ltr;
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}

.cta:hover{
  background:rgba(232,176,75,.14);
  border-color:var(--beam);
  transform:translateY(-1px);
}

.cta::before{
  content:'';
  width:7px; height:7px; border-radius:50%;
  background:var(--beam);
  box-shadow:0 0 8px 2px rgba(232,176,75,.55);
  flex-shrink:0;
}

footer{
  position:relative; z-index:2;
  margin-top:64px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.05em;
  color:rgba(135,160,181,.55);
}

/* filled in by script.js */
.js-year{ direction:ltr; }

@media (prefers-reduced-motion: reduce){
  .beam{ animation:none; transform:rotate(0deg); }
  .lamp-glow{ animation:none; opacity:.85; }
}

@media (max-width:480px){
  .scene{ padding:8vh 7vw; }
  .cta{ padding:13px 22px; font-size:12.5px; }
}