@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fredoka:wght@500;600;700&display=swap');

:root { --ink:#40200f; --brown:#5a2911; --blue:#dff6ff; --blue-2:#edfaff; --aqua:#61d6f4; --butter:#ffcf52; --pink:#ffb8cb; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; color:var(--ink); background:var(--blue-2); font-family:"Fredoka", ui-rounded, sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.site-header { width:min(1180px, calc(100% - 48px)); margin:0 auto; padding:22px 0; display:flex; justify-content:space-between; align-items:center; }
.brand { display:flex; align-items:center; gap:10px; font-size:16px; font-weight:700; line-height:.83; letter-spacing:-.5px; }
.brand img { width:38px; height:38px; border-radius:13px; object-fit:cover; object-position:center; box-shadow:0 3px 0 rgba(91,41,17,.16); }
nav { display:flex; gap:7px; }
nav a { font-family:"DM Mono", monospace; font-size:12px; padding:8px 11px; border:1.5px solid rgba(90,41,17,.22); border-radius:999px; transition:.2s ease; }
nav a:hover, nav a:focus-visible { background:var(--brown); border-color:var(--brown); color:#fff; outline:none; }
main { width:min(1180px, calc(100% - 48px)); margin:0 auto; }
.hero { min-height:560px; display:grid; grid-template-columns:1fr 1fr; align-items:center; padding:26px 5% 48px; position:relative; }
.hero-copy { z-index:1; }
.eyebrow { margin:0 0 13px; color:#98633d; font-family:"DM Mono",monospace; font-size:11px; font-weight:500; letter-spacing:1.3px; text-transform:uppercase; }
h1 { margin:0; max-width:520px; color:var(--brown); font-size:clamp(56px,7vw,105px); line-height:.79; letter-spacing:-4px; }
h1 em { color:#e86d91; font-style:normal; }
.intro { font-size:20px; line-height:1.3; max-width:310px; margin:27px 0; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; }
.button { display:inline-flex; align-items:center; gap:9px; padding:13px 17px; border:2px solid var(--brown); border-radius:13px; font-size:15px; font-weight:600; transition:transform .2s, box-shadow .2s; }
.button:hover, .button:focus-visible { transform:translateY(-3px); box-shadow:0 5px 0 var(--brown); outline:none; }
.button-primary { background:var(--brown); color:#fff9ed; }
.button-soft { background:#fff9ed; }
.hero-art { position:relative; min-height:460px; display:grid; place-items:center; }
.hero-art::after { content:""; position:absolute; z-index:-1; width:82%; aspect-ratio:1; border-radius:48% 52% 48% 52%; background:var(--aqua); transform:rotate(-9deg); }
.hero-art img { width:min(430px, 100%); filter:drop-shadow(0 25px 17px rgba(49,118,139,.19)); transform:rotate(3deg); }
.sun { position:absolute; top:17%; right:4%; width:66px; height:66px; background:var(--butter); border-radius:50%; z-index:-1; }
.sparkle { position:absolute; color:#f4a831; font-size:34px; }
.sparkle-one { top:16%; left:7%; }.sparkle-two { right:4%; bottom:18%; font-size:27px; }
.contract-card { background:#fffaf0; border:2px solid var(--brown); border-radius:22px; padding:22px 25px; display:flex; justify-content:space-between; align-items:center; box-shadow:6px 6px 0 var(--pink); }
.contract-card .eyebrow { margin-bottom:5px; }.contract-card h2 { margin:0; font-family:"DM Mono",monospace; font-size:clamp(20px,3vw,32px); font-weight:500; letter-spacing:-1.5px; }
.copy-button { cursor:pointer; display:flex; align-items:center; gap:9px; border:0; border-radius:11px; background:var(--aqua); color:var(--brown); padding:12px 15px; font:600 15px "Fredoka",sans-serif; transition:transform .2s, background .2s; }
.copy-button:hover, .copy-button:focus-visible { transform:rotate(-2deg) scale(1.04); background:var(--butter); outline:2px solid var(--brown); }.copy-icon { font-family:"DM Mono",monospace; font-size:21px; line-height:.5; }
.note { margin:72px auto; max-width:680px; display:flex; align-items:center; gap:18px; text-align:left; }.note-mark { width:51px; height:51px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; background:var(--butter); font-size:24px; }.note p { margin:0; font-size:clamp(18px,2.1vw,25px); line-height:1.18; letter-spacing:-.5px; }
.banner-section { margin-bottom:60px; overflow:hidden; border-radius:22px; border:2px solid rgba(90,41,17,.18); box-shadow:7px 7px 0 rgba(90,41,17,.12); background:#c7efff; }.banner-section img { display:block; width:100%; }
footer { width:min(1180px, calc(100% - 48px)); margin:0 auto; border-top:1px solid rgba(90,41,17,.2); padding:21px 0 30px; display:flex; align-items:center; justify-content:space-between; gap:15px; font-family:"DM Mono",monospace; font-size:11px; color:#835334; } footer a { text-decoration:underline; text-underline-offset:4px; }.ticker { color:var(--brown); font-weight:500; }
@media (max-width: 700px) { .site-header, main, footer { width:min(100% - 30px, 1180px); }.site-header { padding-top:16px; } .hero { min-height:auto; grid-template-columns:1fr; padding:42px 0 36px; }.hero-copy { text-align:center; }.eyebrow { font-size:10px; }.intro { margin:20px auto; font-size:18px; }.hero-actions { justify-content:center; }.hero-art { min-height:auto; margin-top:31px; }.hero-art img { width:min(350px, 94%); }.hero-art::after { width:82%; }.sun { top:4%; right:5%; }.sparkle-one { top:6%; }.contract-card { padding:18px; border-radius:17px; }.contract-card h2 { font-size:24px; }.note { margin:58px 0; gap:13px; }.note p { font-size:19px; }.banner-section { border-radius:15px; margin-bottom:45px; } footer { flex-wrap:wrap; justify-content:center; text-align:center; } }
@media (max-width: 390px) { nav { gap:3px; } nav a { padding:7px 8px; font-size:11px; }.brand { font-size:14px; }.brand img { width:34px; height:34px; }.contract-card { align-items:flex-start; gap:10px; }.copy-button { padding:10px; }.copy-icon { display:none; } h1 { letter-spacing:-3px; } }