@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: 'Nunito', sans-serif; background: #fef6ef; color: #6b3a1f; }

/* NAV */
.fz-nav { background: #fff8f4; border-bottom: 3px solid #e8855a; padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; }
.fz-logo { font-weight: 900; font-size: 30px; color: #e8855a; letter-spacing: -1px; text-decoration: none; }
.fz-tagline-nav { font-size: 14px; color: #c47a55; font-weight: 700; letter-spacing: 1px; }
.fz-nav-links { display: flex; gap: 16px; align-items: center; }
.fz-nav-cta { background: #e8855a; color: #fff; border-radius: 50px; padding: 8px 20px; font-size: 15px; font-weight: 800; text-decoration: none; font-family: 'Nunito', sans-serif; transition: background 0.15s; }
.fz-nav-cta:hover { background: #d4704a; }

/* HERO */
.fz-hero { position: relative; overflow: hidden; background: #fef6ef; padding: 60px 32px 48px; text-align: center; min-height: 380px; }
.fz-bubbles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.fz-hero-content { position: relative; z-index: 2; }
.fz-hero-title { font-size: 58px; font-weight: 900; color: #e8855a; line-height: 1; margin: 0 0 10px; letter-spacing: -2px; }
.fz-hero-sub { font-size: 20px; font-weight: 800; color: #c47a55; margin: 0 0 14px; }
.fz-hero-body { font-size: 16px; color: #a0613a; max-width: 440px; margin: 0 auto 32px; line-height: 1.7; font-weight: 500; }
.fz-cta { display: inline-block; background: #e8855a; color: #fff; border: none; border-radius: 50px; padding: 16px 40px; font-size: 18px; font-weight: 800; font-family: 'Nunito', sans-serif; cursor: pointer; text-decoration: none; transition: background 0.15s, transform 0.1s; }
.fz-cta:hover { background: #d4704a; transform: scale(1.03); }

/* SECTIONS */
.fz-section { padding: 48px 32px; background: #fef6ef; }
.fz-section-title { font-size: 30px; font-weight: 900; color: #e8855a; text-align: center; margin: 0 0 8px; }
.fz-section-sub { font-size: 15px; color: #a0613a; text-align: center; margin: 0 0 36px; font-weight: 500; }

/* CHOICE CARDS */
.fz-choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 580px; margin: 0 auto; }
.fz-choice-card { border-radius: 20px; padding: 28px 20px; text-align: center; cursor: pointer; transition: transform 0.15s; }
.fz-choice-card.chaos { background: #fff8f0; border: 3px solid #e8855a; transform: rotate(-1deg); }
.fz-choice-card.structure { background: #f0fafa; border: 3px solid #7ecdc4; transform: rotate(1deg); }
.fz-choice-card:hover { transform: translateY(-4px) rotate(0deg); }
.fz-choice-icon { font-size: 44px; margin-bottom: 10px; }
.fz-choice-title { font-size: 24px; font-weight: 900; margin: 0 0 8px; }
.fz-choice-card.chaos .fz-choice-title { color: #c47a55; }
.fz-choice-card.structure .fz-choice-title { color: #3a9e96; }
.fz-choice-desc { font-size: 14px; font-weight: 600; line-height: 1.5; margin: 0; }
.fz-choice-card.chaos .fz-choice-desc { color: #a06040; }
.fz-choice-card.structure .fz-choice-desc { color: #3a8e86; }

/* HOW IT WORKS */
.fz-how { background: #fff8f0; padding: 48px 32px; border-top: 3px dashed #f4b183; border-bottom: 3px dashed #f4b183; }
.fz-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 640px; margin: 0 auto; }
.fz-step { text-align: center; }
.fz-step-num { width: 48px; height: 48px; border-radius: 50%; background: #fef6ef; border: 3px solid #e8855a; color: #e8855a; font-size: 22px; font-weight: 900; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.fz-step-title { font-size: 16px; font-weight: 900; color: #c47a55; margin: 0 0 6px; }
.fz-step-desc { font-size: 14px; color: #a0613a; font-weight: 500; line-height: 1.6; }

/* ACTIVITIES */
.fz-activities { padding: 48px 32px; background: #fef6ef; }
.fz-activity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 580px; margin: 0 auto; }
.fz-activity-pill { background: #fff8f0; border: 3px solid #f4b183; border-radius: 50px; padding: 12px 16px; text-align: center; font-size: 15px; font-weight: 800; color: #c47a55; }
.fz-activity-pill:nth-child(even) { border-color: #7ecdc4; color: #3a9e96; background: #f0fafa; }
.fz-activity-pill:nth-child(3n) { transform: rotate(-1deg); }
.fz-activity-pill:nth-child(3n+1) { transform: rotate(0.5deg); }

/* WHY FIZZ */
.fz-why { background: #fff8f0; padding: 48px 32px; border-top: 3px dashed #f4b183; }
.fz-why-box { background: #fef6ef; border-radius: 20px; padding: 28px; max-width: 520px; margin: 0 auto; text-align: center; border: 3px solid #f4b183; transform: rotate(-0.5deg); }
.fz-why-text { font-size: 15px; color: #a0613a; font-weight: 500; line-height: 1.8; margin: 0 0 14px; }
.fz-why-credit { font-size: 16px; font-weight: 900; color: #e8855a; }

/* FOOTER */
.fz-footer { background: #e8855a; padding: 32px; text-align: center; border-top: 4px solid #c47a55; }
.fz-footer-logo { font-size: 36px; font-weight: 900; color: #fff; letter-spacing: -1px; margin-bottom: 6px; }
.fz-footer-tag { font-size: 16px; font-weight: 700; color: #fde8d5; margin-bottom: 4px; }
.fz-footer-credit { font-size: 13px; color: #f4c4a0; font-weight: 500; margin-bottom: 12px; }
.fz-footer-links { display: flex; justify-content: center; gap: 20px; margin-bottom: 12px; }
.fz-footer-links a { color: #fde8d5; font-size: 14px; font-weight: 700; text-decoration: none; }
.fz-footer-links a:hover { text-decoration: underline; }
.fz-footer-beta { font-size: 12px; color: #f4c4a0; font-weight: 500; max-width: 400px; margin: 0 auto; }

/* LEGAL PAGES */
.fz-legal { max-width: 720px; margin: 0 auto; padding: 48px 32px; }
.fz-legal h1 { font-size: 36px; font-weight: 900; color: #e8855a; margin-bottom: 8px; }
.fz-legal .fz-legal-intro { font-size: 15px; color: #a0613a; font-weight: 600; background: #fff8f0; border: 2px solid #f4b183; border-radius: 12px; padding: 14px 18px; margin-bottom: 32px; }
.fz-legal h2 { font-size: 20px; font-weight: 900; color: #c47a55; margin: 28px 0 10px; }
.fz-legal p { font-size: 15px; color: #6b3a1f; line-height: 1.8; margin-bottom: 12px; font-weight: 500; }
.fz-legal ul { padding-left: 20px; margin-bottom: 12px; }
.fz-legal ul li { font-size: 15px; color: #6b3a1f; line-height: 1.8; font-weight: 500; margin-bottom: 6px; }
.fz-legal-updated { font-size: 13px; color: #c47a55; font-weight: 600; margin-bottom: 24px; }