/* Thorns to Roses Coaching – gradient theme (charcoal → rose) */
:root{
  --bg1:#1c1c1c;
  --bg2:#8b2f3c;
  --text:#ffffff;
  --muted:#d0d0d0;
  --accent-rose:#8b2f3c;
  --accent-green:#3d5745;
  --maxw: 1100px;
  --radius:16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  color: var(--text);
  background: linear-gradient(115deg, var(--bg1) 10%, var(--bg2) 90%);
  min-height:100dvh;
  line-height:1.6;
}
a{color: var(--accent-green)}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}
header{position:sticky; top:0; z-index:100; backdrop-filter:saturate(140%) blur(8px);
  background:rgba(0,0,0,.25); border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text)}
.brand img{width:30px; height:30px; border-radius:6px}
.brand .name{font-weight:700; letter-spacing:.2px}
nav a{margin-left:16px; text-decoration:none; color:var(--muted)}
nav a:hover, nav a:focus{color:var(--text)}
.hero{display:grid; grid-template-columns:1.1fr 0.9fr; gap:32px; align-items:center; padding:80px 0 40px;}
@media (max-width:900px){ .hero{grid-template-columns:1fr; padding:56px 0 24px} }
.card{
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px;
}
h1{font-size:clamp(28px, 4vw, 48px); line-height:1.1; margin:0 0 16px}
h2{font-size:clamp(22px, 3vw, 32px); margin:24px 0 12px}
.lead{font-size:1.15rem; color:var(--muted)}
.cta{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
.btn{
  appearance:none; border:none; border-radius:12px; padding:12px 18px;
  background: var(--accent-rose);
  color:#ffffff; font-weight:700; cursor:pointer; text-decoration:none; display:inline-block;
}
.btn.alt{background:transparent; border:1px solid rgba(255,255,255,.28); color:var(--text)}
.section{padding:48px 0}
.grid{display:grid; gap:20px; grid-template-columns: repeat(3, 1fr)}
@media (max-width:900px){ .grid{grid-template-columns:1fr} }
.feature{padding:20px}
ul.clean{list-style:none; padding-left:0}
.badge{display:inline-block; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); color:var(--muted); font-size:.9rem}
footer{padding:40px 0; color:#d4d4d4; border-top:1px solid rgba(255,255,255,.12)}
.small{font-size:.9rem}
kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:#1e1e1e; padding:.2em .4em; border-radius:6px; border:1px solid rgba(255,255,255,.12)}
form{display:grid; gap:12px}
input, textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.25); color:var(--text)
}
input::placeholder, textarea::placeholder{color:#c8c8c8}
label{font-weight:600}
.notice{
  border-left:3px solid var(--accent-green);
  padding:12px 14px; background:rgba(255,255,255,.08); border-radius:8px; color:#f7f7f7
}