:root {
    --goo-green: #8df500;
    --goo-pink: #ff00a8;
    --goo-purple: #df00ef;
    --goo-blue: #59c9f4;
    --goo-yellow: #ffd719;
    --goo-ink: #171d29;
    --goo-white: #ffffff;
    --goo-soft: #f7f8fb;
    --goo-muted: #697386;
    --line: 4px solid var(--goo-ink);
    --shadow: 0 8px 0 var(--goo-ink);
    --radius: 28px;
    --radius-sm: 18px;
    --shell: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--goo-ink);
    background:
        radial-gradient(ellipse at 8% 18%, rgba(141,245,0,.50) 0 10%, transparent 10.5%),
        radial-gradient(ellipse at 94% 31%, rgba(255,0,168,.35) 0 11%, transparent 11.5%),
        radial-gradient(ellipse at 12% 78%, rgba(255,215,25,.40) 0 12%, transparent 12.5%),
        radial-gradient(ellipse at 90% 88%, rgba(223,0,239,.24) 0 10%, transparent 10.5%),
        linear-gradient(135deg, #61d8d0 0%, #4fc8c4 48%, #6edfd8 100%);
    background-attachment: fixed;
    line-height: 1.55;
    min-height: 100vh;
    position: relative;
}
body::before,
body::after {
    content: '';
    position: fixed;
    pointer-events: none;
    z-index: 0;
    filter: saturate(1.08);
}
body::before {
    width: 430px;
    height: 330px;
    left: -120px;
    top: 34vh;
    background: rgba(141,245,0,.46);
    border: 5px solid rgba(23,29,41,.16);
    border-radius: 42% 58% 61% 39% / 56% 36% 64% 44%;
    transform: rotate(-18deg);
    box-shadow: 90px 160px 0 -45px rgba(255,215,25,.34);
}
body::after {
    width: 500px;
    height: 360px;
    right: -170px;
    bottom: 10vh;
    background: rgba(255,0,168,.32);
    border: 5px solid rgba(23,29,41,.14);
    border-radius: 61% 39% 47% 53% / 41% 59% 41% 59%;
    transform: rotate(15deg);
    box-shadow: -120px -170px 0 -70px rgba(223,0,239,.22);
}
.site-header, main, .site-footer { position: relative; z-index: 1; }

img { max-width: 100%; height: auto; }
a { color: inherit; }
.shell { width: min(calc(100% - 32px), var(--shell)); margin-inline: auto; }
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,.96);
    border-bottom: 3px solid var(--goo-ink);
}
.nav-shell { min-height: 92px; display: flex; align-items: center; gap: 28px; }
.brand img { width: 148px; display: block; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; font-weight: 800; }
.site-nav a { text-decoration: none; }
.nav-toggle { display:none; margin-left:auto; border:var(--line); border-radius:14px; padding:10px 14px; background:#fff; font-weight:900; }

.hero { padding: 76px 0 64px; overflow: hidden; }
.hero-grid { display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:48px; }
.eyebrow { text-transform:uppercase; letter-spacing:.12em; font-weight:900; font-size:.83rem; }
h1,h2,h3 { line-height: .98; margin: 0 0 18px; }
h1 { font-size: clamp(3.25rem, 8vw, 6.8rem); letter-spacing:-.05em; }
h2 { font-size: clamp(2.2rem, 5vw, 4.3rem); letter-spacing:-.04em; }
h3 { font-size: 1.5rem; }
.lead { font-size: 1.18rem; max-width: 720px; color:#323946; }
.hero-logo-card { background:#fff; border:var(--line); border-radius:44px; padding:30px; box-shadow:var(--shadow); transform:rotate(1deg); }
.button-row { display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.button {
    display:inline-flex; justify-content:center; align-items:center;
    text-decoration:none; font-weight:900; text-transform:uppercase;
    border:var(--line); border-radius:999px; padding:14px 22px;
    box-shadow:0 5px 0 var(--goo-ink); transition:.15s ease;
    cursor:pointer;
}
.button:hover { transform:translateY(2px); box-shadow:0 3px 0 var(--goo-ink); }
.button-pink { background:var(--goo-pink); color:#fff; }
.button-green { background:var(--goo-green); color:var(--goo-ink); }
.button-yellow { background:var(--goo-yellow); color:var(--goo-ink); }
.button-blue { background:var(--goo-blue); color:var(--goo-ink); }
.button-white { background:#fff; color:var(--goo-ink); }

.band { padding:30px 0; border-block:var(--line); background:var(--goo-yellow); text-align:center; }
.band strong { font-size:clamp(1.2rem,3vw,2rem); letter-spacing:.04em; }

.section { padding:76px 0; background:rgba(232,252,250,.84); }
.section-soft { background:rgba(247,248,251,.86); }
.section-blue { background:rgba(234,248,255,.88); }
.section-pink { background:rgba(255,240,250,.88); }
.section-green { background:rgba(243,255,228,.88); }
.section-heading { max-width:760px; margin-bottom:34px; }

.grid-2,.grid-3,.grid-4 { display:grid; gap:24px; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }

.card {
    background:#fff; border:var(--line); border-radius:var(--radius);
    padding:28px; box-shadow:0 6px 0 var(--goo-ink);
}
.card.green { background:#f3ffe4; }
.card.pink { background:#fff0fa; }
.card.blue { background:#eaf8ff; }
.card.yellow { background:#fff9d8; }
.price { font-size:2rem; font-weight:950; }
.kicker { font-weight:950; text-transform:uppercase; font-size:.82rem; letter-spacing:.08em; }
.clean-list { padding-left:20px; margin:18px 0; }
.clean-list li { margin:8px 0; }

.steps { counter-reset:steps; }
.step { position:relative; padding-left:74px; min-height:62px; }
.step::before {
    counter-increment:steps; content:counter(steps);
    position:absolute; left:0; top:-4px; width:52px; height:52px;
    display:grid; place-items:center; border:3px solid var(--goo-ink);
    border-radius:50%; background:var(--goo-green); font-weight:950;
}

.form-card { background:#fff; border:var(--line); border-radius:34px; padding:34px; box-shadow:var(--shadow); }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field.full { grid-column:1 / -1; }
label { font-weight:900; }
input,select,textarea {
    width:100%; border:3px solid var(--goo-ink); border-radius:14px; padding:13px 14px;
    font:inherit; background:#fff; color:var(--goo-ink);
}
textarea { min-height:120px; resize:vertical; }
.notice { border:3px solid var(--goo-ink); border-radius:18px; padding:16px 18px; background:#fff9d8; }
.notice.error { background:#ffe9ee; }
.notice.success { background:#efffe3; }

.faq details { background:#fff; border:3px solid var(--goo-ink); border-radius:18px; padding:18px 20px; margin:14px 0; }
.faq summary { cursor:pointer; font-weight:950; font-size:1.06rem; }

.site-footer { background:var(--goo-ink); color:#fff; padding:56px 0 28px; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:32px; }
.footer-logo { width:180px; background:#fff; border-radius:24px; padding:8px; }
.footer-links { display:flex; flex-direction:column; gap:10px; }
.footer-links a { color:#fff; text-decoration:none; }
.legal { margin-top:40px; padding-top:24px; border-top:1px solid rgba(255,255,255,.2); color:#dbe0e8; font-size:.9rem; }

@media (max-width: 850px) {
    .nav-toggle { display:block; }
    .site-nav {
        display:none; position:absolute; left:16px; right:16px; top:84px;
        flex-direction:column; align-items:stretch; padding:20px;
        background:#fff; border:var(--line); border-radius:22px; box-shadow:var(--shadow);
    }
    .site-nav.is-open { display:flex; }
    .hero-grid,.grid-2,.grid-3,.grid-4,.footer-grid,.form-grid { grid-template-columns:1fr; }
    .field.full { grid-column:auto; }
    .hero { padding-top:48px; }
    .brand img { width:125px; }
}


/* 505 Goo Crew v0.2 additions */
.theme-stack { display:grid; gap:26px; }
.theme-card { padding:32px; }
.theme-details { display:grid; grid-template-columns:repeat(2,1fr); gap:10px 28px; margin-top:18px; }
.theme-details p { margin:8px 0; }
.theme-tag { margin:22px 0 0; font-weight:950; letter-spacing:.04em; }
.more-themes { margin-top:28px; text-align:center; background:rgba(255,255,255,.88); }
.terms-hero { background:rgba(228,251,249,.90); }
.terms-card { background:rgba(255,255,255,.94); border:var(--line); border-radius:34px; box-shadow:var(--shadow); padding:clamp(24px,4vw,48px); }
.terms-section { padding:28px 0; border-bottom:2px dashed rgba(23,29,41,.24); }
.terms-section:last-of-type { border-bottom:0; }
.terms-section h2 { font-size:clamp(1.55rem,3vw,2.25rem); margin-bottom:14px; }
.terms-section ul { padding-left:24px; }
.terms-section li { margin:7px 0; }
.signature-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px 30px; margin-top:24px; }
.terms-ending { margin-top:34px; padding:24px; text-align:center; border:3px solid var(--goo-ink); border-radius:22px; background:#fff9d8; font-size:1.15rem; }
@media (max-width: 850px) {
    .theme-details, .signature-grid { grid-template-columns:1fr; }
}
