/* ==========================================================
   Jomana — "Coming soon" page for jomana.my
   Same theme as the main app: white, royal blue and gold,
   Cormorant Garamond headings + Manrope body.

   One-screen layout: header + hero + footer fill exactly the
   browser window (100dvh) on phones, tablets and desktops.
   Sizes scale with both width (vw) and height (vh), so short
   screens (landscape phones, small laptops) still fit. If a
   screen is truly tiny, the page simply scrolls — nothing is
   ever cut off.
   ========================================================== */

:root {
  --clr-bg: #ffffff;
  --clr-bg-alt: #f6f8fc;
  --clr-text: #121a33;
  --clr-text-secondary: #5a6378;
  --clr-border: #e3e7f0;

  --clr-blue: #1c3f94;
  --clr-blue-dark: #122b66;
  --clr-blue-tint: #eef2fb;

  --clr-gold: #b8913a;
  --clr-gold-light: #d9bc75;
  --clr-gold-tint: #fbf6ea;
  --clr-gold-border: #e8dcc0;
  --clr-gold-text: #6e5218;
  --clr-gold-label: #8a6a22;
  --clr-sphere: #dce4f7;

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --header-h: clamp(56px, 8vh, 72px);
  --gap: clamp(10px, 2.2vh, 24px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--clr-text);
  background: linear-gradient(180deg, var(--clr-bg-alt) 0%, var(--clr-bg) 100%);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;           /* real visible height on phones (ignores the address bar) */
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
h1, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

.container {
  width: 100%; max-width: 1200px; margin: 0 auto;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-mark {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--clr-gold);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.logo-mark span { width: 15px; height: 15px; border-radius: 50%; background: var(--clr-blue); }
.logo-word {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--clr-blue);
}

/* ---------- Header ---------- */
.site-header {
  flex-shrink: 0;
  border-bottom: 1px solid var(--clr-border); background: #fff;
  padding-top: env(safe-area-inset-top);
}
.header-inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  background: var(--clr-gold-tint); border: 1px solid var(--clr-gold-border);
  color: var(--clr-gold-text); font-size: 13px; font-weight: 700; white-space: nowrap;
}
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--clr-gold); position: relative; flex-shrink: 0; }
.pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--clr-gold); animation: pulse 2s ease-out infinite;
}
@keyframes pulse { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }

/* ---------- Hero (fills the space between header and footer) ---------- */
.hero {
  flex: 1 1 auto;
  display: flex; align-items: center;
  padding: var(--gap) 0;
  min-height: 0;
}
.hero-inner {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: clamp(24px, 4vw, 56px); align-items: center;
}

.eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--clr-gold-label);
}
.greeting { margin-top: clamp(6px, 1.2vh, 14px); font-size: 15px; color: var(--clr-text-secondary); }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, min(5.6vw, 8.2vh), 72px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin-top: 4px;
}
.hero h1 em { font-style: italic; color: var(--clr-blue); }
.gold-rule { width: 48px; height: 1px; background: var(--clr-gold); margin: clamp(10px, 2.2vh, 24px) 0; border: 0; }
.lead { font-size: clamp(15px, min(1.4vw, 2.2vh), 18px); color: var(--clr-text-secondary); max-width: 540px; }

.launch-note {
  margin-top: var(--gap); display: inline-block;
  padding: clamp(10px, 1.6vh, 14px) 20px; border-radius: 16px;
  background: #fff; border: 1px solid var(--clr-gold-border);
  font-size: clamp(14px, 1.9vh, 16px);
}
.launch-note strong { color: var(--clr-blue); }
.launch-note .malay {
  display: block; margin-top: 2px;
  font-family: var(--font-display); font-style: italic; font-size: clamp(18px, 2.4vh, 21px); font-weight: 600;
  color: var(--clr-gold-label);
}

/* live strip */
.live-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--gap); }
.live-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 18px 8px 8px; border-radius: 16px;
  background: #fff; border: 1px solid var(--clr-gold-border);
}
.live-item div { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.live-item strong { font-size: 17px; color: var(--clr-blue); font-weight: 700; }
.live-item span:not(.live-icon) { font-size: 12.5px; color: var(--clr-text-secondary); }
.live-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--clr-blue-tint); color: var(--clr-blue);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.live-icon svg { width: 18px; height: 18px; }

/* feature chips */
.feature-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(10px, 1.8vh, 18px); }
.feature-chips li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--clr-gold-tint); border: 1px solid var(--clr-gold-border);
  font-size: 13px; font-weight: 600; color: var(--clr-blue);
}
.feature-chips svg { width: 15px; height: 15px; }

/* ---------- 360° planet illustration ---------- */
.planet-wrap {
  position: relative; justify-self: center;
  width: min(100%, 440px, 56vh);
  aspect-ratio: 1 / 1;
}
.planet-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--clr-gold);
  display: flex; align-items: center; justify-content: center;
  animation: float 6s ease-in-out infinite;
}
.planet-ring::before {
  content: ""; position: absolute; inset: -4%; border-radius: 50%;
  border: 1px dashed var(--clr-gold-border);
  animation: spin 60s linear infinite;
}
.planet {
  width: 88%; height: 88%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, var(--clr-sphere) 45%, #c4d0ee 100%);
  box-shadow: inset -18px -24px 48px rgba(28, 63, 148, 0.18), 0 24px 60px rgba(28, 63, 148, 0.12);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.planet-lines { width: 100%; height: 100%; color: rgba(28, 63, 148, 0.28); animation: spin 40s linear infinite; }
.orbit-dot { position: absolute; border-radius: 50%; background: var(--clr-gold); }
.dot-1 { width: 12px; height: 12px; top: 10%; right: 12%; box-shadow: 0 0 0 6px rgba(184, 145, 58, 0.18); }
.dot-2 { width: 8px; height: 8px; bottom: 14%; left: 8%; background: var(--clr-blue); box-shadow: 0 0 0 5px rgba(28, 63, 148, 0.14); }
.tag-360 {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--clr-blue); background: #fff; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--clr-gold-border); white-space: nowrap;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- Footer (one line) ---------- */
.site-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--clr-gold-border); background: #fff;
  padding: clamp(10px, 1.8vh, 16px) 0;
  padding-bottom: max(clamp(10px, 1.8vh, 16px), env(safe-area-inset-bottom));
}
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 6px 24px; flex-wrap: wrap; }
.footer-inner p { font-size: 13px; color: var(--clr-text-secondary); }

/* ---------- Entrance animation ---------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ==========================================================
   Tablets (iPad portrait, small laptops) and phones:
   stack the globe above the text, centre everything.
   ========================================================== */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: var(--gap); text-align: center; }
  .planet-wrap { order: -1; width: min(60vw, 30vh, 320px); }
  .hero h1 { font-size: clamp(30px, min(7.4vw, 5.6vh), 56px); }
  .hero h1 br { display: none; }
  .gold-rule { margin-left: auto; margin-right: auto; }
  .lead { margin: 0 auto; }
  .live-strip, .feature-chips { justify-content: center; }
  .footer-inner { justify-content: center; text-align: center; }
}

/* Phones */
@media (max-width: 600px) {
  .container { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .logo-word { font-size: 21px; }
  .logo-mark { width: 26px; height: 26px; }
  .logo-mark span { width: 13px; height: 13px; }
  .status-pill { padding: 6px 12px; font-size: 12px; }
  .planet-wrap { width: min(46vw, 21vh, 220px); }
  .tag-360 { font-size: 10px; padding: 4px 10px; }
  .greeting { font-size: 14px; }
  .hero h1 { font-size: clamp(28px, min(8.2vw, 4.6vh), 40px); }
  .lead { font-size: 14px; line-height: 1.45; }
  .launch-note { font-size: 14px; padding: 10px 14px; }
  .launch-note .malay { font-size: 18px; }
  .live-strip { display: none; }              /* phones: keep it to one screen */
  .feature-chips { gap: 6px; }
  .feature-chips li { padding: 5px 10px; font-size: 12px; gap: 5px; }
  .feature-chips svg { width: 13px; height: 13px; }
  .footer-inner p:first-child { display: none; }
}

/* Very short screens (landscape phones, iPhone SE) */
@media (max-height: 700px) and (max-width: 900px) {
  .feature-chips { display: none; }
}
@media (max-height: 620px) {
  .greeting { display: none; }
  .live-strip { display: none; }
}
/* Landscape phones: side by side again so it fits the short height */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-inner { grid-template-columns: 1.4fr 1fr; text-align: left; }
  .planet-wrap { order: 0; width: min(38vw, 62vh); }
  .gold-rule { margin-left: 0; }
  .lead { margin: 0; }
  .hero h1 { font-size: clamp(26px, 7.5vh, 40px); }
  .launch-note { padding: 8px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}