/* cocliko landing page — no framework, no JavaScript, no external dependencies */
:root{--red:#E5484D;--ink:#222936;--ivory:#FAF8F5}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif}
body{background:var(--ivory);color:var(--ink)}
.landing{position:relative;isolation:isolate;display:grid;place-items:center;min-height:100vh;min-height:100svh;overflow:hidden;padding:48px 24px;background:radial-gradient(ellipse at 52% 45%,#fff 0%,#faf8f5 70%)}
.centerpiece{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:37px;width:min(100%,760px)}
.brand{margin:0;line-height:0}
.brand img{display:block;width:clamp(235px,31vw,392px);height:auto;filter:drop-shadow(0 8px 18px rgba(34,41,54,.025))}
.actions{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:64px;padding:17px 28px;border-radius:999px;text-decoration:none;font-size:17px;font-weight:600;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;white-space:nowrap}
.button:hover{transform:translateY(-2px)}
.button:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.button--primary{color:white;background:var(--red);box-shadow:0 12px 28px rgba(229,72,77,.15)}
.button--primary:hover{background:#d83f44;box-shadow:0 16px 30px rgba(229,72,77,.24)}
.button--primary span{font-size:24px;font-weight:400}
.button--secondary{color:var(--ink);border:1.5px solid var(--ink);background:rgba(255,255,255,.6)}
.button--secondary:hover{background:white}
.decoration,.curve{position:absolute;pointer-events:none}
.decoration--top{top:0;left:0;width:35vw;height:49vh}
.decoration--bottom{right:0;bottom:0;width:36vw;height:43vh}
.petal{position:absolute;display:block}
.petal--top{top:-22%;left:-27%;width:82%;height:110%;border-radius:12% 65% 70% 20%;transform:rotate(34deg);background:linear-gradient(145deg,#fa6e69,var(--red))}
.petal--top-soft{top:-55%;left:21%;width:73%;height:125%;border-radius:20% 80% 80% 30%;transform:rotate(28deg);background:rgba(229,72,77,.075);z-index:-1}
.petal--bottom{right:-27%;bottom:-43%;width:93%;height:123%;border-radius:75% 18% 20% 75%;transform:rotate(-28deg);background:linear-gradient(155deg,#ff8c84,var(--red))}
.petal--bottom-soft{right:20%;bottom:-57%;width:88%;height:111%;border-radius:75% 20% 20% 70%;transform:rotate(-22deg);background:rgba(229,72,77,.11);z-index:-1}
.curve{width:56vw;height:42vh;fill:none;stroke:var(--red);stroke-width:1.25;opacity:.9}
.curve--top{top:0;left:0}
.curve--bottom{bottom:0;right:0;transform:rotate(180deg)}
@media(max-width:650px){
 .landing{padding:32px 22px}
 .centerpiece{gap:34px;transform:translateY(-8px)}
 .brand img{width:min(75vw,320px)}
 .actions{width:100%;max-width:340px;flex-direction:column;gap:14px}
 .button{width:100%;min-height:56px;font-size:15px;padding:14px 20px}
 .decoration--top{width:64vw;height:31vh}
 .decoration--bottom{width:62vw;height:30vh}
 .curve{width:95vw;height:34vh}
}
@media(max-height:560px) and (min-width:651px){
 .landing{padding:16px}
 .brand img{width:210px}
 .centerpiece{gap:14px}
 .button{min-height:48px;padding:10px 22px}
}
@media(prefers-reduced-motion:reduce){.button{transition:none}}