/* Hand-drawn Rocket Illustration Style (Scrapbook/Notebook Layout) */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=ZCOOL+KuaiLe&family=Nunito:wght@400;700;900&display=swap');

:root {
    --draw-dark: #2d3436;
    --draw-paper: #fdfcf0;
    --draw-blue: #74b9ff;
    --draw-yellow: #ffeaa7;
    --draw-red: #ff7675;
    --draw-green: #55efc4;
    --draw-purple: #a29bfe;
    
    --font-head: 'ZCOOL KuaiLe', cursive;
    --font-hand: 'Caveat', cursive;
    --font-body: 'Nunito', sans-serif;
}

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

body {
    background-color: var(--draw-paper);
    color: var(--draw-dark);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    /* Graph paper background */
    background-image: 
        linear-gradient(rgba(116, 185, 255, 0.2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(116, 185, 255, 0.2) 1px, transparent 1px);
    background-size: 30px 30px;
}

h1, h2, h3, h4 {
    font-family: var(--font-head);
    letter-spacing: 1px;
    color: var(--draw-dark);
}

a {
    text-decoration: none;
    color: var(--draw-dark);
    font-weight: bold;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Sketchy Borders Mixins (Simulated with border-radius) */
.sketch-border {
    border: 3px solid var(--draw-dark);
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    background: #fff;
}
.sketch-border-alt {
    border: 3px solid var(--draw-dark);
    border-radius: 15px 225px 15px 255px/255px 15px 225px 15px;
    background: #fff;
}

/* Tape Effect */
.tape {
    position: absolute;
    width: 100px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transform: rotate(-2deg);
    top: -15px;
    left: 50%;
    margin-left: -50px;
    z-index: 10;
}
.tape::after, .tape::before {
    content: '';
    position: absolute;
    top: 0;
    width: 10px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
}
.tape::before { left: -10px; border-left: 1px dashed rgba(0,0,0,0.1); }
.tape::after { right: -10px; border-right: 1px dashed rgba(0,0,0,0.1); }

/* Buttons */
.btn-draw {
    display: inline-block;
    padding: 12px 30px;
    font-family: var(--font-head);
    font-size: 22px;
    color: var(--draw-dark);
    background: var(--draw-yellow);
    border: 3px solid var(--draw-dark);
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
}
.btn-draw:hover {
    transform: scale(1.05) rotate(-3deg);
    box-shadow: 6px 6px 0 rgba(0,0,0,0.15);
}
.btn-draw.primary {
    background: var(--draw-red);
    color: #fff;
}
.btn-draw.secondary {
    background: var(--draw-blue);
    color: #fff;
}

/* Navigation - Paper Strip */
.draw-nav {
    padding: 20px 0;
    position: relative;
    z-index: 1000;
}
.nav-paper {
    background: #fff;
    border: 3px solid var(--draw-dark);
    border-radius: 10px 255px 10px 255px/255px 10px 255px 10px;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.05);
    position: relative;
}
.nav-brand {
    font-size: 32px;
    color: var(--draw-red);
    transform: rotate(-2deg);
    display: inline-block;
}
.nav-links {
    display: flex;
    gap: 30px;
}
.nav-links a {
    font-family: var(--font-head);
    font-size: 20px;
    position: relative;
}
.nav-links a:hover, .nav-links a.active {
    color: var(--draw-blue);
}
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; width: 100%; height: 3px;
    background: var(--draw-blue);
    border-radius: 5px;
    transform: scaleX(0) rotate(-2deg);
    transition: transform 0.2s;
    transform-origin: left;
}
.nav-links a:hover::after, .nav-links a.active::after {
    transform: scaleX(1) rotate(-2deg);
}
.nav-tools {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Hero Section - Scrapbook Page */
.draw-hero {
    padding: 50px 0;
}
.hero-scrapbook {
    background: #fff;
    border: 3px solid var(--draw-dark);
    border-radius: 20px;
    padding: 50px;
    position: relative;
    box-shadow: 10px 10px 0 rgba(0,0,0,0.05);
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
}
.hero-scrapbook::before {
    content: '';
    position: absolute;
    top: 20px; left: 20px; right: 20px; bottom: 20px;
    border: 2px dashed rgba(0,0,0,0.1);
    border-radius: 15px;
    pointer-events: none;
}
.hero-text {
    position: relative;
    z-index: 1;
}
.hero-title {
    font-size: 60px;
    line-height: 1.2;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}
.hero-title::after {
    content: '';
    position: absolute;
    bottom: 5px; left: 0; width: 100%; height: 15px;
    background: rgba(255, 234, 167, 0.6);
    z-index: -1;
    transform: rotate(-1deg);
}
.hero-desc {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #555;
}
.hero-actions {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}
.trust-doodles {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.trust-doodles span {
    font-family: var(--font-hand);
    font-size: 22px;
    color: var(--draw-blue);
    display: flex;
    align-items: center;
    gap: 5px;
}
.trust-doodles span::before { content: '✓'; color: var(--draw-red); }
.hero-img {
    position: relative;
    z-index: 1;
    transform: rotate(2deg);
}
.hero-img img {
    border: 3px solid var(--draw-dark);
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    box-shadow: 5px 5px 0 rgba(0,0,0,0.1);
}

/* Metrics - Sticky Notes */
.draw-metrics {
    padding: 40px 0;
}
.metrics-board {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.sticky-note {
    background: var(--draw-yellow);
    padding: 25px 20px;
    text-align: center;
    flex: 1;
    position: relative;
    box-shadow: 3px 5px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}
.sticky-note:hover { transform: translateY(-5px) scale(1.02); }
.sticky-note:nth-child(1) { transform: rotate(-3deg); background: var(--draw-yellow); }
.sticky-note:nth-child(2) { transform: rotate(2deg); background: var(--draw-green); }
.sticky-note:nth-child(3) { transform: rotate(-1deg); background: var(--draw-blue); color: #fff; }
.sticky-note:nth-child(4) { transform: rotate(4deg); background: var(--draw-red); color: #fff; }
.sticky-note::before {
    content: '';
    position: absolute;
    top: -10px; left: 50%;
    margin-left: -15px;
    width: 30px; height: 30px;
    background: radial-gradient(circle at 30% 30%, #fff, #ccc);
    border-radius: 50%;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
}
.m-val {
    font-family: var(--font-hand);
    font-size: 56px;
    line-height: 1;
    margin-bottom: 5px;
}
.m-lbl {
    font-family: var(--font-head);
    font-size: 18px;
}

/* Features - Polaroids */
.draw-features {
    padding: 60px 0;
}
.sec-title {
    font-size: 48px;
    text-align: center;
    margin-bottom: 50px;
    position: relative;
}
.sec-title::after {
    content: '';
    display: block;
    width: 150px; height: 4px;
    background: var(--draw-dark);
    margin: 10px auto 0;
    border-radius: 50%;
}
.polaroid-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.polaroid {
    background: #fff;
    padding: 15px 15px 40px 15px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    position: relative;
}
.polaroid:nth-child(1) { transform: rotate(-2deg); }
.polaroid:nth-child(2) { transform: rotate(1deg); top: 20px; }
.polaroid:nth-child(3) { transform: rotate(-1deg); }
.p-img-placeholder {
    height: 180px;
    background: var(--draw-paper);
    border: 2px solid var(--draw-dark);
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    margin-bottom: 20px;
}
.polaroid:nth-child(1) .p-img-placeholder { background: rgba(116, 185, 255, 0.2); }
.polaroid:nth-child(2) .p-img-placeholder { background: rgba(255, 118, 117, 0.2); }
.polaroid:nth-child(3) .p-img-placeholder { background: rgba(85, 239, 196, 0.2); }
.polaroid h3 {
    font-family: var(--font-hand);
    font-size: 32px;
    text-align: center;
    margin-bottom: 10px;
}
.polaroid p {
    font-size: 15px;
    text-align: center;
    color: #666;
}

/* Nodes - Treasure Map */
.draw-nodes {
    padding: 60px 0;
}
.treasure-map {
    background: #fff;
    border: 3px solid var(--draw-dark);
    border-radius: 15px 225px 15px 255px/255px 15px 225px 15px;
    padding: 50px;
    box-shadow: 8px 8px 0 rgba(0,0,0,0.05);
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
    align-items: center;
}
.map-info h2 { font-size: 40px; margin-bottom: 20px; }
.map-info p { font-size: 18px; margin-bottom: 30px; }
.map-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    position: relative;
}
.map-grid::before {
    content: '';
    position: absolute;
    top: 50%; left: 0; right: 0;
    border-top: 2px dashed var(--draw-red);
    z-index: 0;
    opacity: 0.5;
}
.map-pin {
    background: #fff;
    border: 2px solid var(--draw-dark);
    padding: 15px;
    border-radius: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.1);
}
.map-pin::before {
    content: '📍';
    font-size: 24px;
    margin-right: 10px;
}
.map-pin:nth-child(odd) { transform: rotate(-2deg); }
.map-pin:nth-child(even) { transform: rotate(2deg); }
.pin-name { font-family: var(--font-head); font-size: 20px; }
.pin-speed { font-family: var(--font-hand); font-size: 24px; color: var(--draw-red); }

/* Reviews - Speech Bubbles */
.draw-reviews {
    padding: 60px 0;
}
.speech-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.speech-bubble {
    background: #fff;
    border: 3px solid var(--draw-dark);
    border-radius: 30px;
    padding: 30px;
    position: relative;
    box-shadow: 5px 5px 0 rgba(0,0,0,0.05);
}
.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -20px; left: 40px;
    border-width: 20px 20px 0 0;
    border-style: solid;
    border-color: var(--draw-dark) transparent transparent transparent;
}
.speech-bubble::before {
    content: '';
    position: absolute;
    bottom: -15px; left: 43px;
    border-width: 15px 15px 0 0;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    z-index: 1;
}
.speech-bubble:nth-child(2) { transform: translateY(20px); }
.speech-bubble:nth-child(2)::after { left: auto; right: 40px; border-width: 20px 0 0 20px; }
.speech-bubble:nth-child(2)::before { left: auto; right: 43px; border-width: 15px 0 0 15px; }
.r-stars { color: var(--draw-yellow); font-size: 24px; margin-bottom: 10px; text-shadow: 1px 1px 0 #000; }
.r-text { font-family: var(--font-hand); font-size: 24px; line-height: 1.4; margin-bottom: 20px; }
.r-user { font-weight: 900; font-size: 16px; color: var(--draw-blue); text-align: right; }

/* Pricing - Clipboards */
.draw-pricing {
    padding: 60px 0;
}
.clip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: center;
}
.clipboard {
    background: #fff;
    border: 3px solid var(--draw-dark);
    border-radius: 10px;
    padding: 40px 20px 30px;
    position: relative;
    box-shadow: 6px 6px 0 rgba(0,0,0,0.05);
    text-align: center;
}
.clipboard::before {
    content: '';
    position: absolute;
    top: -15px; left: 50%;
    margin-left: -40px;
    width: 80px; height: 30px;
    background: #ccc;
    border: 3px solid var(--draw-dark);
    border-radius: 10px;
}
.clipboard::after {
    content: '';
    position: absolute;
    top: -5px; left: 50%;
    margin-left: -20px;
    width: 40px; height: 10px;
    background: var(--draw-dark);
    border-radius: 5px;
}
.clipboard.pro {
    transform: scale(1.05);
    background: var(--draw-paper);
    border-color: var(--draw-red);
    z-index: 2;
}
.clipboard.pro::before { background: var(--draw-red); border-color: var(--draw-dark); }
.c-badge {
    position: absolute;
    top: 20px; right: -15px;
    background: var(--draw-yellow);
    border: 2px solid var(--draw-dark);
    padding: 5px 15px;
    font-family: var(--font-head);
    transform: rotate(15deg);
    box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}
.c-title { font-size: 28px; margin-bottom: 10px; }
.c-desc { font-family: var(--font-hand); font-size: 22px; color: #666; margin-bottom: 20px; }
.c-price { font-family: var(--font-head); font-size: 50px; margin-bottom: 20px; color: var(--draw-blue); }
.clipboard.pro .c-price { color: var(--draw-red); }
.c-price span { font-size: 20px; font-family: var(--font-body); color: var(--draw-dark); }
.c-feat { list-style: none; text-align: left; margin-bottom: 30px; }
.c-feat li { padding: 10px 0; border-bottom: 1px dashed #ccc; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.c-feat li::before { content: '👉'; color: var(--draw-red); }

/* FAQ - Notebook Lines */
.draw-faq {
    padding: 60px 0;
}
.notebook-faq {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    border: 3px solid var(--draw-dark);
    border-radius: 10px;
    padding: 40px;
    box-shadow: 8px 8px 0 rgba(0,0,0,0.05);
    background-image: repeating-linear-gradient(transparent, transparent 39px, #74b9ff 39px, #74b9ff 40px);
    background-position: 0 40px;
}
.q-item {
    margin-bottom: 30px;
    background: #fff; /* Cover lines behind text slightly */
    padding: 10px;
    border-radius: 10px;
}
.q-title {
    font-family: var(--font-head);
    font-size: 24px;
    color: var(--draw-red);
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.q-title::before { content: 'Q:'; font-size: 28px; }
.q-ans {
    font-family: var(--font-hand);
    font-size: 24px;
    padding-left: 35px;
    color: #444;
    line-height: 1.4;
}

/* Footer */
.draw-footer {
    background: var(--draw-dark);
    color: #fff;
    padding: 50px 0 20px;
    text-align: center;
    position: relative;
    margin-top: 50px;
}
.draw-footer::before {
    content: '';
    position: absolute;
    top: -15px; left: 0; width: 100%; height: 30px;
    background: var(--draw-dark);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.f-brand { font-family: var(--font-head); font-size: 40px; color: var(--draw-yellow); margin-bottom: 20px; }
.f-links { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; }
.f-links a { color: #fff; font-family: var(--font-head); font-size: 18px; }
.f-links a:hover { color: var(--draw-green); text-decoration: underline wavy; }
.f-copy { font-family: var(--font-hand); font-size: 20px; color: #aaa; }

/* Subpages */
.sub-hero {
    padding: 60px 0;
    text-align: center;
}
.sub-hero h1 { font-size: 64px; color: var(--draw-red); margin-bottom: 15px; display: inline-block; position: relative; }
.sub-hero h1::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 20px; background: rgba(116, 185, 255, 0.4); z-index: -1; transform: rotate(-2deg); }
.sub-hero p { font-family: var(--font-hand); font-size: 28px; color: #555; }

.dl-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    padding-bottom: 60px;
}
.dl-card {
    background: #fff;
    border: 3px solid var(--draw-dark);
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    padding: 40px;
    display: flex;
    align-items: center;
    gap: 30px;
    box-shadow: 5px 5px 0 rgba(0,0,0,0.05);
    transition: transform 0.3s;
}
.dl-card:hover { transform: translateY(-5px) rotate(1deg); }
.dl-icon { font-size: 70px; }
.dl-info h3 { font-size: 32px; margin-bottom: 10px; }
.dl-info p { font-family: var(--font-hand); font-size: 24px; color: #666; margin-bottom: 20px; }

.help-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 40px;
    padding-bottom: 60px;
}
.h-nav { position: sticky; top: 100px; }
.h-nav a {
    display: block;
    background: #fff;
    border: 2px solid var(--draw-dark);
    border-radius: 10px 255px 10px 255px/255px 10px 255px 10px;
    padding: 15px 20px;
    margin-bottom: 15px;
    font-family: var(--font-head);
    font-size: 20px;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.05);
}
.h-nav a:hover, .h-nav a.active {
    background: var(--draw-yellow);
    transform: translateX(5px);
}
.h-content {
    background: #fff;
    border: 3px solid var(--draw-dark);
    border-radius: 15px 225px 15px 255px/255px 15px 225px 15px;
    padding: 50px;
    box-shadow: 8px 8px 0 rgba(0,0,0,0.05);
}
.h-content h2 { font-size: 40px; color: var(--draw-blue); border-bottom: 3px dashed #ccc; padding-bottom: 15px; margin-bottom: 30px; }
.h-content h3 { font-size: 28px; margin: 30px 0 15px; color: var(--draw-red); }
.h-content p, .h-content li { font-family: var(--font-hand); font-size: 24px; color: #444; margin-bottom: 15px; line-height: 1.5; }
.h-content ul { padding-left: 30px; }

/* Responsive */
@media (max-width: 1024px) {
    .hero-scrapbook, .treasure-map, .dl-grid, .help-layout { grid-template-columns: 1fr; }
    .metrics-board { flex-wrap: wrap; }
    .sticky-note { min-width: 45%; }
    .polaroid-grid, .speech-grid, .clip-grid { grid-template-columns: repeat(2, 1fr); }
    .clipboard.pro { transform: none; }
    .h-nav { position: static; display: flex; flex-wrap: wrap; gap: 10px; }
    .h-nav a { margin-bottom: 0; }
}
@media (max-width: 768px) {
    .nav-links { display: none; }
    .hero-title { font-size: 48px; }
    .hero-actions { flex-direction: column; }
    .polaroid-grid, .speech-grid, .clip-grid { grid-template-columns: 1fr; }
    .map-grid { grid-template-columns: 1fr; }
    .dl-card { flex-direction: column; text-align: center; }
}