:root {
    --ink-bg: #f9f9f9;
    --ink-text: #2c2c2c;
    --ink-primary: #333333;
    --ink-secondary: #666666;
    --ink-accent: #b03a2e; /* A touch of red seal color */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background-color: var(--ink-bg); color: var(--ink-text);
    font-family: 'Noto Serif SC', 'Songti SC', serif;
    line-height: 1.8; overflow-x: hidden;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPgo8cmVjdCB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjZjlmOWY5IiAvPgo8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJyZ2JhKDAsMCwwLDAuMDMpIiAvPgo8L3N2Zz4=');
}
a { text-decoration: none; color: inherit; }

.ink-container { max-width: 900px; margin: 0 auto; padding: 40px 20px;}

/* Header */
.ink-header {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 20px; margin-bottom: 60px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    position: relative;
}
.ink-header::after {
    content: ''; position: absolute; bottom: -3px; left: 0; width: 30%; height: 1px;
    background: var(--ink-primary);
}
.ink-brand {
    font-size: 28px; font-weight: bold; color: var(--ink-primary);
    letter-spacing: 2px; position: relative;
}
.ink-brand::after {
    content: '印'; position: absolute; top: -5px; right: -25px;
    font-size: 12px; color: var(--ink-accent); border: 1px solid var(--ink-accent);
    padding: 2px; border-radius: 2px; transform: rotate(-10deg);
}
.ink-nav { display: flex; gap: 30px; }
.ink-nav a {
    font-size: 16px; color: var(--ink-secondary); transition: all 0.3s;
    position: relative; padding-bottom: 5px;
}
.ink-nav a:hover, .ink-nav a.active { color: var(--ink-primary); }
.ink-nav a.active::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px;
    background: var(--ink-accent);
}

/* Hero */
.ink-hero {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 80px; position: relative;
}
.ink-hero::before {
    content: ''; position: absolute; top: -50px; right: -50px; width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(0,0,0,0.03) 0%, transparent 70%);
    border-radius: 50%; z-index: -1; filter: blur(20px);
}
.ih-content { flex: 1; padding-right: 40px;}
.ih-content h1 {
    font-size: 48px; margin-bottom: 20px; color: var(--ink-primary);
    line-height: 1.3; font-weight: normal;
}
.ih-content h1 span { font-weight: bold; position: relative; z-index: 1;}
.ih-content h1 span::after {
    content: ''; position: absolute; bottom: 5px; left: 0; width: 100%; height: 15px;
    background: rgba(176, 58, 46, 0.1); z-index: -1; transform: skewX(-15deg);
}
.ih-content p { font-size: 18px; color: var(--ink-secondary); margin-bottom: 40px;}

.ih-visual {
    flex: 1; display: flex; justify-content: center; align-items: center;
    position: relative;
}
.ink-circle {
    width: 250px; height: 250px; border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.1); position: relative;
    display: flex; justify-content: center; align-items: center;
}
.ink-circle::before {
    content: ''; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px;
    border-radius: 50%; border: 1px dashed rgba(0,0,0,0.2); animation: spinSlow 20s linear infinite;
}
.ink-circle::after {
    content: '速'; font-size: 80px; color: rgba(0,0,0,0.05); font-weight: bold;
}
@keyframes spinSlow { 100% { transform: rotate(360deg); } }

.btn-ink {
    display: inline-block; padding: 12px 35px; font-size: 16px;
    color: #fff; background: var(--ink-primary); border: 1px solid var(--ink-primary);
    transition: all 0.3s; margin-right: 20px; letter-spacing: 2px;
}
.btn-ink:hover { background: var(--ink-text); box-shadow: 5px 5px 0px rgba(0,0,0,0.1);}
.btn-ink-alt {
    display: inline-block; padding: 12px 35px; font-size: 16px;
    color: var(--ink-primary); background: transparent; border: 1px solid var(--ink-primary);
    transition: all 0.3s; letter-spacing: 2px;
}
.btn-ink-alt:hover { background: rgba(0,0,0,0.03); }

/* Stats */
.ink-stats {
    display: flex; justify-content: space-between; margin-bottom: 80px;
    border-top: 1px solid rgba(0,0,0,0.1); border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 30px 0;
}
.is-item { text-align: center; flex: 1; border-right: 1px dashed rgba(0,0,0,0.1);}
.is-item:last-child { border-right: none;}
.is-val { font-size: 36px; font-weight: bold; color: var(--ink-primary); margin-bottom: 5px;}
.is-lbl { font-size: 14px; color: var(--ink-secondary); letter-spacing: 1px;}

/* Features */
.ink-features { margin-bottom: 80px;}
.if-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px;}
.if-card {
    padding: 30px; background: #fff; border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.02); transition: all 0.3s;
    position: relative;
}
.if-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.05);}
.if-card::before {
    content: '「'; position: absolute; top: 10px; left: 10px; font-size: 30px; color: rgba(0,0,0,0.1); font-family: serif;
}
.if-card h3 { font-size: 22px; margin-bottom: 15px; color: var(--ink-primary); font-weight: bold;}
.if-card p { font-size: 15px; color: var(--ink-secondary); text-align: justify;}

/* Nodes */
.ink-nodes {
    margin-bottom: 80px; padding: 40px; background: rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.05); text-align: center;
}
.ink-nodes h2 { font-size: 28px; margin-bottom: 30px; color: var(--ink-primary); font-weight: normal;}
.in-list { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;}
.in-item {
    padding: 8px 20px; background: #fff; color: var(--ink-secondary);
    border: 1px solid rgba(0,0,0,0.1); font-size: 15px; transition: all 0.2s;
}
.in-item:hover { border-color: var(--ink-primary); color: var(--ink-primary);}

/* FAQ */
.ink-faq { margin-bottom: 100px;}
.ink-faq h2 { font-size: 28px; margin-bottom: 40px; color: var(--ink-primary); text-align: center; font-weight: normal;}
.i-faq-item {
    margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px dashed rgba(0,0,0,0.1);
}
.i-fq { font-size: 18px; font-weight: bold; color: var(--ink-primary); margin-bottom: 10px;}
.i-fa { font-size: 15px; color: var(--ink-secondary); text-align: justify;}

footer { text-align: center; padding: 30px 0; color: #999; font-size: 14px; border-top: 1px solid rgba(0,0,0,0.1);}

@media (max-width: 800px) {
    .ink-header { flex-direction: column; gap: 20px; }
    .ink-hero { flex-direction: column; text-align: center;}
    .ih-content { padding-right: 0; margin-bottom: 40px;}
    .ink-stats { flex-direction: column; gap: 20px;}
    .is-item { border-right: none; border-bottom: 1px dashed rgba(0,0,0,0.1); padding-bottom: 20px;}
    .is-item:last-child { border-bottom: none;}
    .if-grid { grid-template-columns: 1fr; }
    .btn-ink, .btn-ink-alt { display: block; margin: 10px auto; width: 80%;}
}