:root {
    --mini-bg: #f4f1ea;
    --mini-text: #4a4a4a;
    --mini-primary: #e07a5f;
    --mini-secondary: #3d5a80;
    --mini-accent: #81b29a;
    --mini-surface: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background-color: var(--mini-bg); color: var(--mini-text);
    font-family: 'Round', 'Varela Round', 'Segoe UI', sans-serif;
    line-height: 1.6;
    background-image: radial-gradient(#d5d0c4 1px, transparent 1px);
    background-size: 20px 20px;
}
a { text-decoration: none; color: inherit; }

.mini-container { max-width: 1000px; margin: 0 auto; padding: 20px; perspective: 1000px;}

/* Miniature Box Mixin */
.mini-box {
    background: var(--mini-surface);
    border-radius: 10px;
    box-shadow: 
        2px 5px 0 #d5d0c4,
        0 10px 15px rgba(0,0,0,0.05);
    border: 1px solid #e8e5dc;
    transition: transform 0.2s, box-shadow 0.2s;
}
.mini-box:hover {
    transform: translateY(-2px) rotateX(2deg);
    box-shadow: 
        2px 7px 0 #d5d0c4,
        0 15px 20px rgba(0,0,0,0.08);
}

/* Header */
.mini-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 25px; margin-bottom: 40px;
    transform: rotateX(5deg); transform-origin: top;
}
.mini-brand {
    font-size: 24px; font-weight: 900; color: var(--mini-primary);
    text-shadow: 1px 2px 0 #f2cc8f;
}
.mini-nav { display: flex; gap: 15px; }
.mini-nav a {
    font-weight: 700; color: var(--mini-secondary); padding: 5px 15px;
    border-radius: 5px; transition: all 0.2s;
}
.mini-nav a:hover, .mini-nav a.active {
    background: #f2cc8f; color: var(--mini-text);
    box-shadow: 1px 2px 0 #e07a5f; transform: translateY(-1px);
}

/* Hero */
.mini-hero {
    display: flex; align-items: center; justify-content: space-between;
    padding: 50px 40px; margin-bottom: 50px;
    transform: rotateY(-2deg);
}
.hero-content { flex: 1; padding-right: 30px;}
.mini-hero h1 { font-size: 36px; font-weight: 900; margin-bottom: 15px; color: var(--mini-secondary); line-height: 1.3;}
.mini-hero p { font-size: 16px; color: #666; margin-bottom: 30px;}
.hero-visual {
    flex: 1; display: flex; justify-content: center; align-items: center;
    min-height: 250px;
}
.mini-scene {
    width: 200px; height: 200px; background: var(--mini-accent);
    border-radius: 20px; position: relative;
    box-shadow: 
        5px 10px 0 #52796f,
        inset 5px 5px 10px rgba(255,255,255,0.5);
    transform: rotateX(20deg) rotateZ(-15deg);
    transform-style: preserve-3d;
}
.mini-scene::before {
    content: '☁️'; position: absolute; top: 20px; left: 20px; font-size: 40px;
    transform: translateZ(30px); text-shadow: 2px 5px 5px rgba(0,0,0,0.1);
}
.mini-scene::after {
    content: '🏠'; position: absolute; bottom: 30px; right: 30px; font-size: 60px;
    transform: translateZ(40px); text-shadow: 2px 5px 5px rgba(0,0,0,0.2);
}

.btn-mini {
    display: inline-block; padding: 12px 25px; font-size: 16px; font-weight: 800;
    color: #fff; background: var(--mini-primary); border-radius: 8px;
    box-shadow: 0 4px 0 #c25e44; transition: all 0.1s; margin-right: 10px; border: none; cursor: pointer;
}
.btn-mini:active { transform: translateY(4px); box-shadow: 0 0 0 #c25e44;}
.btn-mini-alt {
    display: inline-block; padding: 10px 23px; font-size: 16px; font-weight: 800;
    color: var(--mini-primary); background: var(--mini-surface); border-radius: 8px;
    border: 2px solid var(--mini-primary); box-shadow: 0 4px 0 #f2cc8f; transition: all 0.1s; cursor: pointer;
}
.btn-mini-alt:active { transform: translateY(4px); box-shadow: 0 0 0 #f2cc8f;}

/* Stats */
.mini-stats {
    display: flex; justify-content: space-between; margin-bottom: 50px; gap: 15px;
}
.ms-item {
    flex: 1; padding: 20px; text-align: center;
}
.ms-val { font-size: 28px; font-weight: 900; color: var(--mini-accent); margin-bottom: 5px;}
.ms-lbl { font-size: 12px; font-weight: 700; color: #888;}

/* Grid */
.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 50px;}
.mg-card { padding: 30px 20px; text-align: center;}
.mg-icon {
    width: 60px; height: 60px; margin: 0 auto 15px;
    background: #f2cc8f; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; box-shadow: 2px 4px 0 #e07a5f;
}
.mg-card h3 { font-size: 18px; font-weight: 800; margin-bottom: 10px; color: var(--mini-secondary);}
.mg-card p { font-size: 14px; color: #666;}

/* Nodes */
.mini-nodes { padding: 30px; margin-bottom: 50px; text-align: center; transform: rotateY(2deg);}
.mini-nodes h2 { font-size: 24px; font-weight: 900; margin-bottom: 20px; color: var(--mini-primary);}
.node-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;}
.n-mini {
    padding: 8px 15px; font-size: 14px; font-weight: 700; color: var(--mini-secondary);
    background: #fff; border-radius: 5px; border: 1px solid #d5d0c4;
    box-shadow: 1px 2px 0 #d5d0c4;
}
.n-mini span { color: var(--mini-accent); margin-left: 5px;}

/* FAQ */
.mini-faq { padding: 30px; margin-bottom: 50px;}
.mini-faq h2 { font-size: 24px; font-weight: 900; margin-bottom: 20px; text-align: center; color: var(--mini-secondary);}
.faq-item { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 2px dotted #d5d0c4;}
.faq-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none;}
.fq-q { font-size: 16px; font-weight: 800; color: var(--mini-primary); margin-bottom: 5px;}
.fq-a { font-size: 14px; color: #666;}

footer { text-align: center; padding: 20px; font-weight: 700; color: #999; font-size: 12px;}

@media (max-width: 800px) {
    .mini-header { flex-direction: column; gap: 15px; transform: none;}
    .mini-hero { flex-direction: column; text-align: center; padding: 30px 20px; transform: none;}
    .hero-content { padding-right: 0; margin-bottom: 30px;}
    .hero-visual { display: none; }
    .mini-stats { flex-wrap: wrap; }
    .ms-item { min-width: 45%; }
    .mini-grid { grid-template-columns: 1fr; }
    .btn-mini, .btn-mini-alt { display: block; margin: 10px auto; width: 80%;}
}