/* brand.css — Separappy tokens & basisstijl (gedeeld door landing + app) */
:root{
    --brand-coral:#FF968A;
    --brand-blue:#9FD1E8;
    --brand-sand:#F8E7D4;
    --ink:#1F2A37;
    --ink-soft:#334155;
    --bg:#FFFDF8;
    --ring:#fda29b;
    --radius:14px;
    --radius-lg:28px;
  }
  
  /* basis */
  html{font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol',sans-serif}
  body{color:var(--ink);background:var(--bg);margin:0}
  
  /* helpers */
  .container{max-width:860px;margin-inline:auto;padding:1.5rem}
  .text-soft{color:var(--ink-soft)}
  
  /* card */
  .card{
    width:100%;
    max-width:860px;
    background:#fff;
    border:1px solid rgba(0,0,0,0.06);
    border-radius:var(--radius-lg);
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    padding:40px 28px;
    text-align:center;
  }
  
  /* knoppen */
  .btn-brand{
    display:inline-block;
    background:linear-gradient(180deg, var(--brand-blue), #7cc3e4);
    color:#0b2a3a;
    text-decoration:none;
    padding:14px 22px;
    border-radius:var(--radius);
    font-weight:700;
    box-shadow:0 6px 18px rgba(159,209,232,.35);
    transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
  }
  .btn-brand:hover{ transform: translateY(-1px); filter:saturate(1.05); box-shadow:0 10px 22px rgba(159,209,232,.40); }
  .btn-brand:active{ transform: translateY(0px); }
  
  /* alternatieve coral-cta (optioneel) */
  .cta{
    display:inline-block;
    background:linear-gradient(180deg, var(--brand-coral), #ff7f70);
    color:white;
    text-decoration:none;
    padding:14px 22px;
    border-radius:var(--radius);
    font-weight:700;
    box-shadow:0 6px 18px rgba(255,150,138,.35);
    transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
  }
  .cta:hover{ transform: translateY(-1px); filter:saturate(1.05); box-shadow:0 10px 22px rgba(255,150,138,.40); }
  .cta:active{ transform: translateY(0px); }