:root { --ink: #294863; --blue: #8cd5fc; --pink: #fb5593; --pink-dark: #e93c7e; --lime: #b7f459; --cream: #fff9df; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: #9fdbfc; font-family: Arial, Helvetica, sans-serif; }
.page-shell { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; padding: 25px clamp(22px, 7vw, 106px) 24px; background: linear-gradient(180deg, #74c7f4 0%, #b7e7fc 63%, var(--lime) 63.1%, #9ee748 100%); }
.page-shell::after { content: ''; position: absolute; z-index: -1; inset: 63% 0 0; opacity: .35; background: radial-gradient(ellipse at 10% 60%, #72c835 0 3px, transparent 4px), radial-gradient(ellipse at 18% 25%, #72c835 0 3px, transparent 4px), radial-gradient(ellipse at 72% 58%, #72c835 0 3px, transparent 4px), radial-gradient(ellipse at 89% 24%, #72c835 0 3px, transparent 4px); background-size: 140px 90px; }
.nav, .hero, footer { position: relative; z-index: 2; max-width: 1240px; margin: auto; }
.nav { display: flex; justify-content: space-between; align-items: center; }
.brand { display: inline-flex; gap: 10px; align-items: center; color: var(--ink); text-decoration: none; font-family: "Arial Rounded MT Bold", Arial, sans-serif; font-size: 29px; font-weight: 800; letter-spacing: -.8px; }
.brand img { width: 48px; height: 48px; object-fit: cover; border-radius: 50% 46% 49% 45%; border: 3px solid rgba(255,255,255,.84); box-shadow: 0 3px 0 rgba(38, 84, 103, .14); }
.nav-links { display: flex; gap: 10px; }
.nav-links a { min-width: 47px; padding: 7px 12px; border: 2px solid rgba(255,255,255,.73); border-radius: 99px; color: var(--ink); background: rgba(255,255,255,.27); text-align: center; text-decoration: none; font-weight: 800; transition: transform .2s, background .2s; }
.nav-links a:hover, .nav-links a:focus-visible { background: #fffce9; transform: translateY(-2px) rotate(-2deg); outline: none; }
.hero { display: grid; grid-template-columns: minmax(280px, .95fr) minmax(380px, 1.05fr); align-items: center; min-height: calc(100vh - 148px); gap: clamp(20px, 5vw, 84px); padding: 25px 0 34px; }
.eyebrow { display: inline-block; margin: 0 0 9px; padding: 5px 14px; border-radius: 50% 45% 49% 42%; color: #3e8f58; background: #efffcb; font-weight: 800; transform: rotate(-3deg); }
h1 { margin: 0; color: #fffdf1; font: 800 clamp(76px, 11vw, 155px)/.72 "Arial Rounded MT Bold", Arial, sans-serif; letter-spacing: -7px; text-shadow: 0 6px 0 #ef77a6, 2px 9px 0 rgba(48, 102, 134, .1); transform: rotate(-2deg); }
h1 span { color: #ffe367; }
.description { max-width: 405px; margin: 33px 0 24px; font-size: clamp(18px, 2vw, 23px); font-weight: 800; line-height: 1.3; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { padding: 13px 19px; border: 2px solid rgba(79,78,89,.12); border-radius: 19px 21px 18px 22px; color: var(--ink); font-weight: 800; text-decoration: none; box-shadow: 0 4px 0 rgba(47, 89, 83, .15); transition: transform .2s, box-shadow .2s; }
.button:hover, .button:focus-visible { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 7px 0 rgba(47, 89, 83, .12); outline: none; }
.button-pink { color: white; background: var(--pink); } .button-soft { background: #fffce4; }
.contract-card { width: min(100%, 410px); margin-top: 28px; padding: 11px 14px 10px; border: 2px solid rgba(255,255,255,.65); border-radius: 20px 16px 19px 15px; background: rgba(255,255,255,.26); }
.contract-label { display: block; margin-bottom: 3px; color: rgba(41,72,99,.76); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.contract-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } code { overflow: hidden; font: 800 16px Nunito, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
#copy-button { flex: 0 0 auto; border: 0; border-radius: 9px 11px 8px 10px; padding: 6px 11px; color: #fff; background: var(--ink); font: 800 13px Arial, sans-serif; cursor: pointer; } #copy-button:hover, #copy-button:focus-visible { background: var(--pink-dark); outline: 2px solid #fff; }
.copy-status { min-height: 15px; margin: 3px 0 0; color: #3e8f58; font-size: 12px; font-weight: 800; }
.art-wrap { position: relative; justify-self: center; width: min(100%, 530px); }
.hero-art { display: block; width: 100%; border: 9px solid #fffdec; border-radius: 47% 53% 43% 57% / 48% 45% 55% 52%; box-shadow: 9px 12px 0 rgba(48, 123, 145, .16); transform: rotate(3deg); }
.lollipop { position: absolute; z-index: -1; bottom: 4%; left: -3%; width: 122px; height: 122px; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%, #ff94c1 0 8px, #fa478b 9px 20px); border: 8px solid #dd3975; box-shadow: inset 9px 8px 0 rgba(255,255,255,.44); transform: rotate(-16deg); }
.lollipop::after { content: ''; position: absolute; top: 108px; left: 52px; width: 17px; height: 134px; border-radius: 12px; background: #a97442; transform: rotate(12deg); transform-origin: top; }
.sparkles { position: absolute; z-index: 2; right: -16px; top: 7%; color: #fffceb; font-size: 36px; text-shadow: 1px 2px #77b8dd; } .sparkles b { display: block; margin: 8px 0; } .sparkles b:nth-child(2) { margin-left: 38px; color: #fb5593; }
.sky-doodle { position: absolute; z-index: 0; opacity: .8; border: 5px solid rgba(255,255,255,.76); } .cloud { width: 155px; height: 55px; border-radius: 52% 45% 48% 50%; border-bottom: 0; } .cloud::before, .cloud::after { content: ''; position: absolute; border: 5px solid rgba(255,255,255,.76); border-bottom: 0; border-radius: 100% 100% 0 0; } .cloud::before { width: 78px; height: 60px; bottom: 0; left: 26px; } .cloud::after { width: 56px; height: 40px; bottom: 0; right: 7px; } .cloud-one { top: 106px; left: 7%; transform: rotate(-5deg); } .cloud-two { right: 24%; bottom: 24%; transform: scale(.65) rotate(7deg); }
.sun { position: absolute; z-index: 0; top: -43px; right: 6%; width: 150px; height: 150px; border: 8px solid #ffbe3e; border-radius: 50%; background: #ffe55d; box-shadow: inset -12px -11px #ffc142; } .sun i { position: absolute; width: 9px; height: 30px; border-radius: 20px; background: #ffe875; left: 50%; top: 168px; transform-origin: 5px -93px; } .sun i:nth-child(2){transform:rotate(60deg)} .sun i:nth-child(3){transform:rotate(120deg)} .sun i:nth-child(4){transform:rotate(180deg)} .sun i:nth-child(5){transform:rotate(240deg)} .sun i:nth-child(6){transform:rotate(300deg)}
footer { display: flex; justify-content: space-between; padding-top: 12px; color: rgba(41,72,99,.8); font-size: 14px; font-weight: 800; } .footer-ticker { font-family: "Arial Rounded MT Bold", Arial, sans-serif; font-size: 19px; }
@media (max-width: 760px) { .page-shell { padding: 18px 20px 18px; } .nav-links { gap: 5px; } .nav-links a { min-width: auto; padding: 6px 9px; } .brand { font-size: 24px; } .hero { grid-template-columns: 1fr; min-height: auto; gap: 40px; padding: 70px 0 48px; } .hero-copy { text-align: center; } .description, .contract-card { margin-right: auto; margin-left: auto; } .actions { justify-content: center; } .art-wrap { width: min(88vw, 460px); } .lollipop { width: 96px; height: 96px; left: -5px; } .lollipop::after { top: 84px; left: 40px; height: 105px; } .sun { transform: scale(.7); transform-origin: top right; right: -26px; } .cloud-one { top: 120px; left: -46px; transform: scale(.65) rotate(-5deg); } .cloud-two { display: none; } h1 { letter-spacing: -5px; } footer { font-size: 12px; } }
@media (max-width: 390px) { .nav-links a { font-size: 13px; } .brand img { width: 39px; height: 39px; } .brand { gap: 6px; font-size: 22px; } }