/* MK BEYOND — Launch Site v2  */
:root{
  --deep:#0F2D3F;      /* brand ink */
  --emerald:#10B981;   /* accent */
  --ink:#0C111B;       /* body text */
  --muted:#5B6574;
  --bg:#FAFCFE;        /* page */
  --card:#FFFFFF;      /* card */
  --line:#E6EBF2;
  --wash:#F2F7FB;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#E6EEF7;
    --muted:#A7B3C2;
    --bg:#0A1118;
    --card:#0F151D;
    --line:#1E2835;
    --wash:#0D141C;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.65;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
.container{width:min(1140px,92%); margin-inline:auto}
a{text-decoration:none}

/* Top bar */
.topbar{background:linear-gradient(90deg,#EAFDF6,#EFF6FF); color:var(--deep); font-weight:800; text-align:center; padding:.55rem 1rem; border-bottom:1px solid var(--line)}
@media (prefers-color-scheme: dark){ .topbar{background:linear-gradient(90deg,#0f2b24,#0f223b)}}

/* Header */
.header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.85); backdrop-filter:blur(9px); border-bottom:1px solid var(--line)}
@media (prefers-color-scheme: dark){ .header{background:rgba(10,17,24,.65)} }
.header-row{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 0}
.brand{display:flex; align-items:center; color:var(--deep)}
.nav{display:flex; gap:1rem}
.nav a{color:var(--ink); font-weight:800; padding:.25rem .5rem; border-radius:10px}
.nav a:hover{color:#fff; background:var(--emerald)}

/* Logo */
.logo{display:block}
.logo .logo-text{color:var(--deep)}
.logo .logo-accent{color:var(--emerald)} /* stroke=currentColor */

/* Hero */
.hero{padding:clamp(2rem,6vw,5rem) 0; background:
  radial-gradient(80% 60% at 70% 10%, #EAF9FF 0%, rgba(234,249,255,0) 60%),
  radial-gradient(70% 60% at 0% 90%, #E7FFF5 0%, rgba(231,255,245,0) 60%);
}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center}
.hero-copy h1{font-size:clamp(2rem,4.5vw,3.4rem); line-height:1.15; margin:0 0 .5rem; letter-spacing:-.02em}
.brand-ink{background:linear-gradient(90deg,var(--emerald), #2BE0B3); -webkit-background-clip:text; background-clip:text; color:transparent}
.sub{color:var(--muted); max-width:40ch}
.actions{display:flex; gap:.75rem; margin-top:1rem}

.btn{border:1px solid var(--line); background:#fff; color:var(--deep); padding:.75rem 1rem; border-radius:14px; font-weight:900; cursor:pointer; transition:.18s transform, .18s box-shadow}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--emerald); border-color:var(--emerald); color:#fff; box-shadow:0 8px 20px rgba(16,185,129,.25)}
.btn-ghost{background:transparent; color:var(--deep)}

.countdown{display:flex; gap:.75rem; margin-top:1.25rem}
.countdown .box{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:.55rem .8rem; min-width:78px; text-align:center}
.countdown .box span{display:block; font-size:1.4rem; font-weight:900; line-height:1}
.countdown small{color:var(--muted); font-weight:700}

/* Hero art */
.hero-art{position:relative; min-height:320px}
.orb{position:absolute; filter:blur(40px); opacity:.9}
.o1{width:260px;height:260px; right:8%; top:10%; background:radial-gradient(circle at 30% 30%, #c5f7e6, transparent 60%), radial-gradient(circle at 70% 70%, #d5ecff, transparent 60%)}
.o2{width:200px;height:200px; left:4%; bottom:6%; background:radial-gradient(circle at 25% 25%, #d4fff2, transparent 60%), radial-gradient(circle at 65% 70%, #e7f1ff, transparent 60%)}
.stack{position:absolute; inset:0; display:grid; place-items:center; gap:1rem; grid-template-columns:repeat(2, 180px)}
.card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:1rem; box-shadow:0 12px 24px rgba(0,0,0,.08)}
.chip{display:inline-block; background:var(--emerald); color:#fff; font-weight:900; padding:.22rem .5rem; border-radius:999px}
.line{height:12px; background:#EEF2F7; border-radius:8px; margin-top:.6rem}
.line.thin{height:8px}
.emoji{font-size:1.6rem}
.label{font-weight:800; color:var(--deep); margin-top:.35rem}

/* Sections */
.section{padding:clamp(2rem,6vw,4rem) 0}
.section.alt{background:var(--wash)}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1rem}
.muted{color:var(--muted)}

/* Icon grid */
.icon-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem}
.ic{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:1rem; transition:transform .2s, box-shadow .2s}
.ic h3{margin:.3rem 0 .2rem; font-size:1.05rem}
.ic p{margin:0; color:var(--muted)}
.ic:hover{transform:translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,.08)}

/* Tiles */
.tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem}
.tile{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:1rem}
.badge{display:inline-block; background:var(--deep); color:#fff; border-radius:999px; padding:.2rem .55rem; font-weight:900}
.badge.ghost{background:transparent; color:var(--deep); border:1px solid var(--deep)}
.sk{height:12px; background:#EAF0F6; border-radius:8px; margin:.4rem 0}
.mini{height:52px; background:#F3F6FA; border:1px solid var(--line); border-radius:14px}

/* About */
.about{display:grid; grid-template-columns:100px 1fr; gap:1rem; align-items:center}
.avatar{width:88px;height:88px;border-radius:999px;background:linear-gradient(135deg,var(--emerald),#33e0b7);display:grid;place-items:center;color:#063a2d;font-weight:900}

/* Notify */
.notify{display:grid; grid-template-columns:1.1fr .9fr; gap:1rem; align-items:end}
.notify-form{display:grid; grid-template-columns:1fr 1fr auto; gap:.5rem}
.notify-form input{border:1px solid var(--line); border-radius:14px; padding:.75rem .9rem; background:var(--card); color:var(--ink)}
.notify-form input:focus{outline:none; box-shadow:0 0 0 3px rgba(16,185,129,.25); border-color:var(--emerald)}
.status{margin:.6rem 0 0; font-weight:900; color:var(--deep)}

/* Roadmap */
.roadmap{list-style:none; display:flex; gap:1rem; padding:0}
.roadmap li{position:relative; padding-left:1.1rem}
.roadmap li::before{content:''; position:absolute; left:0; top:.55em; width:.55rem; height:.55rem; border-radius:50%; background:var(--emerald)}

/* FAQ */
.faq details{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:.7rem .9rem; margin:.6rem 0}
.faq summary{font-weight:900; cursor:pointer}

/* Contact */
.contact{display:grid; grid-template-columns:1fr 1.1fr; gap:1rem; align-items:start}
.contact .grid{display:grid; grid-template-columns:1fr 1fr; gap:.5rem}
.contact input, .contact textarea{border:1px solid var(--line); border-radius:14px; padding:.75rem .9rem; background:var(--card); color:var(--ink)}
.contact input:focus, .contact textarea:focus{outline:none; box-shadow:0 0 0 3px rgba(16,185,129,.25); border-color:var(--emerald)}

/* Footer */
.footer{background:#0F1115; color:#C7D0DB; margin-top:1rem; padding:2rem 0}
.foot{display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:1rem; align-items:center}
.foot a{color:#C7D0DB; font-weight:800}
.foot a:hover{color:#fff}
.foot-brand{display:flex; flex-direction:column; gap:.2rem}

/* Accessibility helper */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* Responsive */
@media (max-width: 1020px){
  .hero-grid{grid-template-columns:1fr}
  .icon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .notify{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
}
@media (max-width: 680px){
  .notify-form{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .contact .grid{grid-template-columns:1fr}
}