
@import url('https://fonts.googleapis.com/css2?family=Playfair Display:wght@400;600;700&family=Source Sans Pro:wght@300;400;500;600;700&display=swap');
:root { --bg:#1F2A44; --accent:#FF6B6B; --light:#FFFFFF; --text:#F7FAFC; }
* { box-sizing: border-box; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family:'Source Sans Pro', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; line-height:1.6; }
a { color:var(--accent); text-decoration:none; }
header { position:sticky; top:0; backdrop-filter:saturate(140%) blur(8px); background:color-mix(in hsl, var(--bg) 85%, transparent); border-bottom:1px solid color-mix(in srgb, var(--accent) 30%, transparent); z-index:50; }
.nav { max-width:1120px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:14px 20px; }
.logo { font-family:'Playfair Display', serif; font-weight:700; letter-spacing:.5px; font-size:clamp(20px,2vw,26px); }
.nav a.button { padding:10px 16px; border-radius:12px; border:1px solid color-mix(in srgb, var(--accent) 60%, transparent); transition:transform .2s ease, background .2s ease; }
.nav a.button:hover { transform:translateY(-1px); background:color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.hero { display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center; max-width:1120px; padding:80px 20px 40px; margin:0 auto; }
.hero h1 { font-family:'Playfair Display', serif; font-size:clamp(34px,6vw,56px); line-height:1.1; margin:0 0 12px 0; }
.hero p.lede { font-size:clamp(16px,2.4vw,20px); opacity:.9; margin:0 0 18px 0; }
.hero .cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
.btn { display:inline-block; padding:12px 18px; border-radius:14px; background:var(--accent); color:#111; font-weight:700; transition:transform .2s ease, box-shadow .2s ease; box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent); }
.btn:hover { transform:translateY(-2px); box-shadow:0 8px 18px color-mix(in srgb, var(--accent) 45%, transparent); }
.card { background:color-mix(in srgb, var(--light) 6%, var(--bg)); border:1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius:18px; padding:20px; transition:transform .25s ease, border-color .25s ease, background .25s ease; }
.card:hover { transform:translateY(-3px); border-color:var(--accent); background:color-mix(in srgb, var(--light) 12%, var(--bg)); }
.grid { max-width:1120px; margin:0 auto; padding:20px; display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.section-title { max-width:1120px; margin:30px auto 10px; padding:0 20px; font-size:22px; letter-spacing:.4px; font-weight:700; font-family:'Playfair Display', serif; }
.img-hero { border-radius:18px; width:100%; height:420px; object-fit:cover; filter:saturate(96%) contrast(102%); box-shadow:0 16px 50px color-mix(in srgb, var(--accent) 24%, transparent); transform:translateY(12px); opacity:0; animation:floatIn .9s ease .15s forwards; }
@keyframes floatIn { to { transform:translateY(0); opacity:1; } }
.reveal { opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
footer { max-width:1120px; margin:40px auto; padding:20px; opacity:.8; font-size:14px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid color-mix(in srgb, var(--accent) 16%, transparent); }
@media (max-width:900px) { .hero { grid-template-columns:1fr; } }
