/* ============================================================
   Velpo — under-construction landing page.
   Standalone by design: does NOT depend on home.css, so the
   marketing stylesheet can be rewritten or deleted without
   touching this page. Tokens are copied from the same
   Tangerine system (home.css / Velpo/Design/Theme.swift).
   CSP: style-src 'self' — this file is the only stylesheet.
   ============================================================ */

@font-face{font-family:'Nunito';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/nunito-latin-var.woff2') format('woff2')}

:root{
  color-scheme:light;
  --bg:#F6F0E7; --bg-grad:#E8DCCB;
  --card:#FFFCF7;
  --border:#DED3C5;
  --ink:#241B14; --ink-2:#6D6257; --ink-3:#776B5E;
  --accent:#E0491A;
  --hairline:rgb(36 27 20 / .07);
  --sh-card:0 8px 24px rgb(36 27 20 / .06);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#15110D; --bg-grad:#161410;
  --card:#211B15;
  --border:#43372C;
  --ink:#F4EDE3; --ink-2:#B8AA99; --ink-3:#948B81;
  --accent:#FF8A5C;
  --hairline:rgb(244 237 227 / .09);
  --sh-card:0 10px 28px rgb(0 0 0 / .45);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#15110D; --bg-grad:#161410;
    --card:#211B15;
    --border:#43372C;
    --ink:#F4EDE3; --ink-2:#B8AA99; --ink-3:#948B81;
    --accent:#FF8A5C;
    --hairline:rgb(244 237 227 / .09);
    --sh-card:0 10px 28px rgb(0 0 0 / .45);
  }
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:32px 20px;
  font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg);
  background-image:linear-gradient(170deg,var(--bg) 0%,var(--bg-grad) 100%);
  background-attachment:fixed;
  text-align:center;
  line-height:1.6;
}

main{
  width:100%;
  max-width:34rem;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:28px;
  box-shadow:var(--sh-card);
  padding:clamp(28px,6vw,52px) clamp(22px,5vw,44px);
}

/* Brand lockup — mark SVG + live text, matching home.css `.brand`.
   The wordmark PNG is deliberately NOT used: its lettering is dark and
   disappears on the dark card. Text inherits var(--ink), so it adapts. */
.brand{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin:0 0 24px;
  color:var(--ink);
}
.brand-icon{width:clamp(38px,9vw,46px); height:auto}
.brand-name{
  font-weight:800;
  font-size:clamp(1.5rem,5vw,1.8rem);
  letter-spacing:-.01em;
  line-height:1;
}
.brand-dot{color:#FF7060}

h1{
  margin:0 0 14px;
  font-size:clamp(1.55rem,5.2vw,2.1rem);
  font-weight:800;
  letter-spacing:-.015em;
  line-height:1.25;
}

p{
  margin:0 auto 14px;
  max-width:30rem;
  font-size:clamp(1rem,2.6vw,1.06rem);
  color:var(--ink-2);
}

p:last-of-type{margin-bottom:0}

.mail{
  color:var(--accent);
  font-weight:700;
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.mail:hover,.mail:focus-visible{border-bottom-color:currentColor}

footer{
  margin-top:26px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  color:var(--ink-3);
}

footer a{
  color:var(--ink-3);
  text-decoration:none;
  border-bottom:1px solid var(--hairline);
}
footer a:hover,footer a:focus-visible{color:var(--ink);border-bottom-color:currentColor}

@media (prefers-reduced-motion:no-preference){
  main{animation:rise .5s ease-out both}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}