*{box-sizing:border-box}
:root{--bg:#FAF7F2;--ink:#111;--muted:#6b6b6b;--card:#fff;--line:#e8e2da;--petal:#f4a8b8;--petal2:#f7c3cf}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink)}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5}
.container{width:min(1100px,90vw);margin:0 auto}

/* BG Layer */
.bg-layer{position:fixed;inset:0;pointer-events:none;z-index:0}
.branch{position:absolute;right:0;top:0;height:100vh;opacity:.85}
#petals{position:absolute;inset:0;overflow:hidden}
.petal{position:absolute;display:block;background:radial-gradient(circle at 30% 30%, var(--petal), var(--petal2) 60%);border-radius:60% 40% 60% 40%;opacity:.85;
       filter:drop-shadow(0 2px 2px rgba(0,0,0,.08)); animation: fall linear forwards}
.petal::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 2px rgba(0,0,0,.08)}

@keyframes fall{
  0%{ transform: translate3d(0, -20px, 0) rotate(0deg); opacity:.0; }
  10%{ opacity:.9; }
  100%{ transform: translate3d(-var(--drift), 120px, 0) rotate(360deg); opacity:0; }
}

.petal-spin-a{ animation-name: fall, sway-a; animation-timing-function: linear, ease-in-out; animation-iteration-count: 1, infinite; }
.petal-spin-b{ animation-name: fall, sway-b; animation-timing-function: linear, ease-in-out; animation-iteration-count: 1, infinite; }
@keyframes sway-a{ 0%{ transform: translateX(0)} 50%{ transform: translateX(-12px)} 100%{ transform: translateX(0)} }
@keyframes sway-b{ 0%{ transform: translateX(0)} 50%{ transform: translateX(-8px)} 100%{ transform: translateX(0)} }

/* Nav */
.nav{position:sticky;top:0;backdrop-filter:blur(8px);background:color-mix(in srgb,var(--bg) 85%, white);border-bottom:1px solid var(--line);z-index:5}
.nav .container{display:flex;justify-content:space-between;align-items:center;padding:14px 0}
.brand{font-family:'Fraunces',serif;font-weight:600;letter-spacing:.04em}
.links a{margin-left:18px;text-decoration:none;color:var(--ink);opacity:.8}
.links a.cta{border:1px solid var(--ink);padding:6px 12px;border-radius:999px}

/* Content cards have a higher z so petals sit behind and appear to 'bounce off' edges visually */
.card-elevated{position:relative;z-index:2}

/* Hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);z-index:1}
.hero-inner{display:grid;place-items:center;padding:96px 0 72px;text-align:center}
.hero-logo{width:min(760px,86vw);height:auto;display:block;margin:0 auto 10px}
.tagline{color:var(--muted);margin:0 0 22px;font-size:18px}
.button{display:inline-block;background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;text-decoration:none}
.hero-bg{position:absolute;inset:0;background:radial-gradient(1200px 300px at 50% 100%, rgba(0,0,0,.06), transparent 60%);pointer-events:none}

/* Split / About */
.split{padding:56px 0}
.split-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.split-text h2{font-family:'Fraunces',serif;margin:0 0 10px;letter-spacing:.03em}
.split-text p{color:var(--muted)}
.placeholder-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;min-height:280px;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.ph-line{height:18px;background:#ece7df;width:60%;border-radius:8px;margin-bottom:16px}
.ph-block{height:100px;background:#f1ece5;border-radius:10px;margin-bottom:10px}

/* Subscribe */
.subscribe{padding:56px 0;border-top:1px solid var(--line);z-index:1}
.subscribe h2{font-family:'Fraunces',serif}
.form{display:flex;gap:8px;margin-top:12px}
.form input{flex:1;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:#fff}
.form button{padding:12px 16px;border-radius:10px;border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer}
.privacy{display:block;margin-top:10px;color:var(--muted)}

/* Footer */
.footer{padding:28px 0;border-top:1px solid var(--line)}
.footer .container{display:flex;justify-content:space-between;align-items:center}
.footer a{color:var(--muted);text-decoration:none;margin-left:12px}

/* Responsive */
@media (max-width:900px){
  .split-inner{grid-template-columns:1fr}
  .links{display:none}
}