/* BARE estate — public landing (self-contained, containerizable). Suite fonts. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --ink:#17141f; --ink-2:#423d52; --muted:#6b6580;
  --bg:#faf9fc; --card:#ffffff; --line:#e9e6f0;
  /* --accent / --grad-a / --grad-b are set inline per product */
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink); background:var(--bg);
  background-image:radial-gradient(900px 360px at 50% -120px,
    color-mix(in srgb, var(--accent) 15%, transparent), transparent 70%);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
/* Centred layout — content column centred on the page (BARElink is left-aligned; this is not). */
.page{max-width:720px; margin:0 auto; padding:28px 24px 46px;
  text-align:center; display:flex; flex-direction:column; min-height:100vh}

.topnav{display:flex; flex-direction:column; align-items:center; gap:14px; padding-bottom:26px}
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.logo{width:30px; height:30px; border-radius:9px;
  background:linear-gradient(135deg, var(--grad-a), var(--grad-b));
  box-shadow:0 2px 8px rgba(23,20,31,.16)}
.wm{font-family:'Fraunces',Georgia,serif; font-weight:700; font-size:1.15rem; letter-spacing:-.01em}
.wm-pre{color:var(--ink)} .wm-ac{color:var(--accent)}

.menu{display:inline-flex; gap:4px; background:var(--card);
  border:1px solid var(--line); border-radius:999px; padding:5px}
.menu a{font-size:.85rem; font-weight:500; color:var(--ink-2); text-decoration:none;
  padding:6px 16px; border-radius:999px; transition:background .15s,color .15s}
.menu a:hover{color:var(--accent)}
.menu a.active{background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent)}

.hero{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px}
.pill{font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius:999px; padding:6px 14px}
.wordmark{font-family:'Fraunces',Georgia,'Times New Roman',serif; font-weight:700;
  font-size:clamp(2.8rem,9vw,4.6rem); line-height:1; letter-spacing:-.02em; margin:0}
.wordmark .wm-pre{color:var(--ink)} .wordmark .wm-ac{color:var(--accent)}
.tagline{font-family:'Sora','Inter',sans-serif; font-size:1.12rem; font-weight:500;
  color:var(--ink-2); margin:0; max-width:34ch}

.card{background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:22px 26px; max-width:46ch; box-shadow:0 6px 24px rgba(23,20,31,.05)}
.card p{margin:0; font-size:.98rem; line-height:1.6; color:var(--ink-2)}
.card p + p{margin-top:12px}

.badge{display:inline-block; margin-top:14px; font-family:'JetBrains Mono',monospace;
  font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; padding:3px 10px; border-radius:6px}
.badge--live{color:#0b6b52; background:#e2f7ef; border:1px solid #b9e8d8}
.badge--building{color:#8a5a00; background:#fff3d6; border:1px solid #f2dca3}
.badge--placeholder{color:#6b5a00; background:#f4efdc; border:1px solid #e4d9ad}
.note{display:block; margin-top:12px; font-size:.82rem; color:var(--muted)}

.cta{display:inline-flex; align-items:center; gap:8px; font-family:'Sora',sans-serif;
  font-weight:600; font-size:.95rem; color:#fff; background:var(--accent);
  border-radius:12px; padding:12px 22px; text-decoration:none;
  box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 34%, transparent);
  transition:filter .15s}
.cta:hover{filter:brightness(1.06)}

.foot{padding-top:32px; font-size:.82rem; color:var(--muted)}
.foot strong{font-family:'Fraunces',serif; color:var(--ink); font-weight:700}
@media (max-width:520px){.card{max-width:100%}}