@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

:root { --ink:#182447; --muted:#59637a; --paper:#f8f5ee; --coral:#ff715d; --yellow:#ffcd55; --blue:#b7ddf2; --line:#dce0e6; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,Arial,sans-serif; }
.header { height:82px; max-width:1240px; margin:auto; padding:0 28px; display:flex; align-items:center; justify-content:space-between; }
.brand { color:var(--ink); text-decoration:none; font-weight:800; font-size:1.35rem; letter-spacing:-.06em; }.brand span { color:var(--coral); font-size:1.8rem; vertical-align:-2px; margin-right:2px; }
nav { display:flex; gap:25px; } nav a { color:var(--muted); text-decoration:none; font-weight:700; font-size:.9rem; } nav a:hover { color:var(--coral); }
.hero { max-width:1240px; margin:6px auto 0; padding:55px 28px 38px; display:grid; grid-template-columns: .88fr 1.12fr; align-items:center; gap:50px; }
.eyebrow { margin:0 0 15px; color:var(--coral); text-transform:uppercase; font-size:.72rem; letter-spacing:.13em; font-weight:800; }.hero h1,.section-heading h2,.phrase h2,.closing h2 { margin:0; letter-spacing:-.055em; line-height:.99; }.hero h1 { font-size:clamp(3rem,5.8vw,5.5rem); max-width:600px; }.lead { max-width:520px; margin:28px 0; color:var(--muted); line-height:1.75; font-size:1.02rem; }
.button { display:inline-flex; align-items:center; gap:18px; background:var(--ink); color:white; padding:17px 20px 17px 24px; border-radius:99px; text-decoration:none; font-weight:700; font-size:.92rem; }.button span { background:var(--coral); width:28px; height:28px; display:grid; place-items:center; border-radius:50%; }
.hero-picture { overflow:hidden; border-radius:42px; height:min(53vw,550px); background:#e6ddc8; }.hero-picture img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.manifesto { max-width:1240px; margin:20px auto 74px; padding:0 28px; }.manifesto p { border-left:4px solid var(--yellow); padding:12px 0 12px 24px; max-width:860px; color:#414b63; font-family:'Playfair Display',Georgia,serif; font-size:clamp(1.45rem,2.6vw,2.4rem); line-height:1.25; margin:0; }
.ideas { background:var(--ink); color:#fff; padding:82px max(28px,calc((100vw - 1184px)/2)); }.section-heading h2,.phrase h2 { font-size:clamp(2.35rem,4vw,4rem); }.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; margin-top:42px; }.card { min-height:285px; padding:25px; border-radius:24px; color:var(--ink); display:flex; flex-direction:column; }.card-number { font-size:.78rem; font-weight:800; letter-spacing:.1em; }.card h3 { margin:44px 0 18px; font-size:1.28rem; letter-spacing:-.035em; line-height:1.2; }.card p { margin:0; font-size:.92rem; line-height:1.65; }.coral { background:var(--coral); }.yellow { background:var(--yellow); }.blue { background:var(--blue); }
.phrase { max-width:1184px; margin:0 auto; padding:94px 0; display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:center; }.phrase-card { background:#fff; border:1px solid var(--line); padding:40px; border-radius:24px; box-shadow:0 18px 40px rgba(24,36,71,.08); }.phrase-card p { font-family:'Playfair Display',Georgia,serif; font-size:clamp(1.45rem,2.4vw,2.1rem); line-height:1.25; margin:0 0 30px; }.phrase-card button { border:0; background:transparent; cursor:pointer; padding:0; color:var(--coral); font:700 .88rem Manrope,Arial,sans-serif; }.phrase-card button span { font-size:1.25rem; margin-left:6px; }
.closing { text-align:center; background:var(--yellow); padding:86px 28px; }.star { font-size:2.2rem; color:var(--coral); }.closing h2 { font-size:clamp(2.2rem,4.3vw,4.4rem); max-width:890px; margin:18px auto; }.closing p { color:#535160; max-width:570px; margin:0 auto; line-height:1.7; } footer { max-width:1240px; margin:auto; padding:27px 28px; color:var(--muted); font-size:.78rem; display:flex; justify-content:space-between; gap:20px; }
@media (max-width:760px) { .header { height:68px; padding:0 20px; } nav { gap:15px; } .hero { grid-template-columns:1fr; padding:36px 20px 28px; gap:31px; }.hero-picture { height:75vw; border-radius:26px; }.manifesto { margin:12px auto 48px; padding:0 20px; }.manifesto p { padding-left:17px; }.ideas { padding:60px 20px; }.cards { grid-template-columns:1fr; margin-top:30px; }.card { min-height:220px; }.card h3 { margin:28px 0 15px; }.phrase { grid-template-columns:1fr; gap:32px; padding:62px 20px; }.phrase-card { padding:28px; }.closing { padding:65px 24px; } footer { padding:23px 20px; flex-direction:column; gap:6px; } }