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

:root { --pink: #f65488; --light: #ffe4ec; --ink: #171313; --yellow: #ffc928; --line: 3px solid var(--ink); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--light); font-family: "Space Grotesk", Arial, sans-serif; overflow-x: hidden; }
a { color: inherit; }
.topbar { min-height: 78px; padding: 12px clamp(18px, 4vw, 64px); border-bottom: var(--line); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--pink); }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 24px/1 "Archivo Black", sans-serif; text-decoration: none; letter-spacing: -1px; }
.brand img { width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 50%; object-fit: cover; }
nav, footer div { display: flex; gap: clamp(12px, 2vw, 28px); }
nav a, footer a { font: 700 13px/1 "DM Mono", monospace; text-decoration: none; letter-spacing: .06em; }
nav a:hover, footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .92fr); min-height: 625px; border-bottom: var(--line); }
.hero-copy { padding: clamp(46px, 8vw, 118px) clamp(22px, 7vw, 104px); display: flex; flex-direction: column; justify-content: center; background-color: var(--pink); background-image: radial-gradient(#171313 1.25px, transparent 1.25px); background-size: 11px 11px; }
.eyebrow, .label { margin: 0 0 18px; font: 500 12px/1.2 "DM Mono", monospace; letter-spacing: .12em; }
h1, h2 { margin: 0; font-family: "Archivo Black", sans-serif; letter-spacing: -.065em; }
h1 { font-size: clamp(88px, 14vw, 190px); line-height: .77; }
.intro { max-width: 410px; margin: 30px 0 34px; font-size: clamp(20px, 2.2vw, 29px); font-weight: 600; line-height: 1.06; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { min-height: 49px; padding: 16px 18px 13px; border: var(--line); box-shadow: 5px 5px 0 var(--ink); font: 700 12px/1 "DM Mono", monospace; text-decoration: none; letter-spacing: .06em; transition: transform .15s, box-shadow .15s; }
.button:hover, .button:focus-visible { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.button-dark { color: white; background: var(--ink); }.button-light { background: var(--yellow); }
.hero-art { position: relative; min-height: 440px; overflow: hidden; background: var(--yellow); }
.hero-art > img { width: 100%; height: 100%; position: absolute; object-fit: cover; object-position: center; filter: saturate(1.07) contrast(1.03); }
.sticker { position: absolute; display: grid; place-items: center; width: 91px; aspect-ratio: 1; border: var(--line); border-radius: 50%; background: var(--yellow); font: 16px/1 "Archivo Black", sans-serif; transform: rotate(-13deg); }.sticker-one { top: 8%; right: 7%; }.sticker-two { bottom: 8%; left: 7%; transform: rotate(12deg); }
.banner-section { padding: clamp(28px, 5vw, 70px); background: var(--ink); }.banner-section img { display: block; width: 100%; border: var(--line); box-shadow: 10px 10px 0 var(--pink); }
.details { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 8vw, 130px); padding: clamp(56px, 8vw, 118px) clamp(22px, 7vw, 104px); background: var(--light); }.details h2 { max-width: 690px; font-size: clamp(42px, 5vw, 78px); line-height: .94; }.details-copy > p:last-child { max-width: 550px; margin: 28px 0 0; font-size: 19px; line-height: 1.35; }.contract-card { align-self: center; padding: 22px; border: var(--line); background: #fff5f8; box-shadow: 8px 8px 0 var(--pink); }.contract-card .label { margin-bottom: 13px; }.contract-row { display: flex; border: 2px solid var(--ink); background: white; }.contract-row code { min-width: 0; flex: 1; padding: 15px; overflow: hidden; font: 500 16px/1 "DM Mono", monospace; text-overflow: ellipsis; }.contract-row button { flex: 0 0 auto; border: 0; border-left: 2px solid var(--ink); padding: 0 15px; color: white; background: var(--ink); font: 700 12px/1 "DM Mono", monospace; cursor: pointer; }.contract-row button:hover, .contract-row button:focus-visible { color: var(--ink); background: var(--yellow); }.copy-status { min-height: 14px; margin: 10px 0 0; font: 12px/1 "DM Mono", monospace; }
footer { padding: 22px clamp(18px, 4vw, 64px); border-top: var(--line); display: flex; justify-content: space-between; align-items: center; gap: 20px; background: var(--yellow); } footer p { margin: 0; font: 12px/1 "DM Mono", monospace; }
@media (max-width: 768px) { .topbar { min-height: 67px; }.brand { font-size: 20px; }.brand img { width: 37px; height: 37px; } nav { gap: 12px; } nav a { font-size: 11px; }.hero { grid-template-columns: 1fr; }.hero-copy { min-height: 450px; }.hero-art { min-height: 450px; }.details { grid-template-columns: 1fr; }.banner-section img { min-height: 180px; object-fit: cover; }.contract-card { width: 100%; } }
@media (max-width: 420px) { nav a:nth-child(2) { display: none; } h1 { font-size: 90px; }.intro { font-size: 22px; }.hero-copy { min-height: 405px; }.hero-art { min-height: 385px; }.sticker { width: 74px; font-size: 13px; } footer { align-items: flex-start; flex-direction: column; } }