/* landing.css — the entire landing page in one screen, matching the provided brand mockup
   as closely as CSS allows. No nav, no scroll sections — the two buttons ARE the navigation. */

:root{
  --text-0:#ffffff; --text-1:rgba(255,255,255,0.86); --text-2:rgba(255,255,255,0.6);
  --sans:'Satoshi', system-ui, sans-serif;
}
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; overflow:hidden; }
body{ font-family:var(--sans); color:var(--text-0); }

.landing{
  height:100vh; width:100vw; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:24px; position:relative;
  background-image:url('hero.jpg');
  background-size:cover; background-position:center; background-repeat:no-repeat;
}

/* the real brand wordmark (wordmark.svg), used as a CSS mask so its color is controllable
   and the file itself stays a single cacheable static asset rather than duplicated inline
   markup on every page that needs it. */
.wordmark{
  display:block; width:130px; height:130px; margin-bottom:28px;
  background-color:rgba(255,255,255,0.92);
  -webkit-mask-image:url('wordmark.svg'); mask-image:url('wordmark.svg');
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  filter:drop-shadow(0 2px 20px rgba(0,0,0,0.15));
}

h1{
  font-family:var(--sans); font-weight:700; letter-spacing:-0.02em;
  font-size:clamp(32px, 5.2vw, 58px); line-height:1.12; margin:0 0 22px; color:var(--text-0);
  text-shadow:0 2px 24px rgba(0,0,0,0.12);
}

.sub{
  font-size:clamp(14px, 1.4vw, 16.5px); line-height:1.6; color:var(--text-1);
  max-width:560px; margin:0 0 36px;
}

.actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

.btn{
  font-family:var(--sans); font-size:14px; font-weight:600; border:none; border-radius:999px;
  padding:13px 24px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  transition:transform .15s, filter .15s;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(0.98); }
.btn-ghost{ background:rgba(0,0,0,0.28); color:#fff; backdrop-filter:blur(10px); }
.btn-ghost:hover{ background:rgba(0,0,0,0.36); }
.btn-primary{ background:rgba(255,255,255,0.94); color:#221a10; }
.btn-primary:hover{ background:#fff; }

@media (max-width:520px){
  .wordmark{ width:96px; height:96px; margin-bottom:20px; }
  .actions{ flex-direction:column; width:100%; max-width:280px; }
  .btn{ justify-content:center; }
}