/* Architecture page (/architecture): how TechnikBrain works, told with
   code-native SVG illustrations — no photos, no extra requests. The drawing kit
   (palette, .a-* shapes, motion, .art-* companions) lives in art.css; this
   bundle holds the page layout and the page-only security figure. Loaded via
   $page_styles = ['marketing', 'art', 'architecture']. */

/* Page-only primitives on top of the kit's real-world palette: the top-tube
   close-up in the bike's colour, and a river on the hero phone's map (a
   water-coloured ribbon drawn over its darker casing, --edge first). */
.tb-art .ar-tube { stroke: var(--art-bike); stroke-opacity: 0.72; }
.tb-art .ar-river { fill: none; stroke: var(--art-water); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.tb-art .ar-river--edge { stroke: var(--art-water-edge); stroke-opacity: 0.7; stroke-width: 9; }

/* Security figure (always on the deck) */
.tb-art .sh-ring { fill: none; stroke: rgba(148, 163, 184, 0.3); stroke-width: 1.5; }
.tb-art .sh-ring--inner { stroke: rgba(103, 232, 249, 0.5); }
.tb-art .sh-ring--outer { stroke: rgba(148, 163, 184, 0.45); stroke-dasharray: 3 7; }
.tb-art .sh-core { fill: #0a1224; stroke: #67e8f9; stroke-opacity: 0.7; stroke-width: 1.5; }
.tb-art .sh-badge { fill: #0e1a33; stroke: rgba(103, 232, 249, 0.5); stroke-width: 1.5; }
.tb-art .sh-block { fill: rgba(255, 255, 255, 0.05); stroke: rgba(148, 163, 184, 0.35); stroke-width: 1; }
.tb-art .sh-block--new { stroke: rgba(103, 232, 249, 0.6); }
.tb-art .sh-block-text { fill: #a9b7cc; font-family: var(--font-mono); font-size: 12px; }

/* ═══════════ Hero (command deck) ═══════════ */
.arch-hero { padding: clamp(56px, 8vw, 100px) var(--page-x) clamp(48px, 7vw, 84px); }
.arch-hero__inner {
    position: relative; max-width: var(--container); margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1.08fr; gap: var(--sp-8); align-items: center;
}
.arch-hero h1 { font-size: var(--fs-display); margin-bottom: var(--sp-4); }
.arch-hero h1 .gradient-text { background-image: linear-gradient(120deg, #93c5fd, #67e8f9 55%, #c4b5fd); }
.arch-hero .lede { font-size: clamp(16px, 1.9vw, 19px); max-width: 540px; margin: 0 0 var(--sp-6); }
.arch-hero__art { position: relative; margin: 0; }
.arch-hero__art::before {
    content: ''; position: absolute; inset: 8% 4% 10%; z-index: -1; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(34, 211, 238, 0.16), transparent);
    filter: blur(8px);
}

/* ═══════════ The journey: four illustrated stages ═══════════ */
.arch-journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.arch-stage {
    position: relative; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur);
}
.arch-stage:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.arch-stage__art {
    position: relative; padding: var(--sp-4) var(--sp-4) var(--sp-3);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 1px solid var(--border);
    background: radial-gradient(120% 100% at 50% 0%, var(--primary-soft), transparent 72%), var(--surface-inset);
}
.arch-stage__art svg:not(.ic) { max-width: 280px; margin-inline: auto; }
.arch-stage__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.arch-stage__num {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-bottom: 10px;
    border-radius: 50%; background: var(--grad-primary); color: #fff; font-family: var(--font-display); font-size: 13px; font-weight: 700;
}
.arch-stage h3 { font-size: 17px; margin-bottom: 6px; }
.arch-stage p { font-size: 14px; color: var(--text-muted); margin: 0; }
/* Dashed "data flowing" connector into the next stage */
.arch-stage:not(:last-child) .arch-stage__art::after {
    content: ''; position: absolute; z-index: 1; top: 50%; right: calc(-1 * var(--sp-5) - 1px);
    width: var(--sp-5); height: 3px; border-radius: 2px;
    background: repeating-linear-gradient(90deg, var(--accent-bright) 0 5px, transparent 5px 11px);
    background-size: 22px 3px; animation: arch-conn 0.9s linear infinite;
}
@keyframes arch-conn { to { background-position: 22px 0; } }

/* ═══════════ Split rows (battery, under the hood) ═══════════ */
.arch-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--sp-8); align-items: center; }
.arch-split .section-heading { margin-bottom: 0; }
.arch-points { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; gap: var(--sp-4); }
.arch-points li { display: flex; gap: 14px; align-items: flex-start; }
.arch-points__icon {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
    border-radius: var(--radius-sm); background: var(--tint-soft, var(--accent-soft)); color: var(--tint, var(--accent)); font-size: 18px;
}
.arch-points strong { display: block; margin-bottom: 2px; }
.arch-points p { margin: 0; color: var(--text-muted); font-size: 14px; }


/* ═══════════ Under the hood ═══════════ */
.arch-feature { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-7); align-items: center; }
.arch-feature + .arch-feature { margin-top: var(--sp-9); }
.arch-feature--flip .arch-feature__art { order: 2; }
.arch-feature__title { display: flex; align-items: center; gap: 12px; font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }
.arch-feature__title .ic { color: var(--tint, var(--accent)); }
.arch-feature__lede { color: var(--text-muted); margin: 0 0 var(--sp-5); }
.arch-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.arch-legend li {
    display: flex; gap: 14px; align-items: flex-start; padding: 14px var(--sp-4);
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-inset);
}
.arch-legend li .art-num { margin-top: 1px; }
.arch-legend h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 4px; font-size: 15px; }
.arch-legend p { margin: 0; font-size: 14px; color: var(--text-muted); }
.arch-cost {
    display: inline-flex; align-items: center; gap: 2px; padding: 2px 9px 2px 7px; border-radius: var(--radius-full);
    background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted);
    font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
}
.arch-cost .ic { color: var(--warn); font-size: 12px; }
.arch-cost span { margin-left: 4px; }

/* ═══════════ Security (deck) ═══════════ */
.arch-security .security-split { grid-template-columns: 1.05fr 0.95fr; align-items: center; }
.arch-security h2 { font-size: var(--fs-3xl); margin-bottom: var(--sp-3); }
.arch-security .security-list { margin-top: var(--sp-5); }
.arch-shield { margin: 0; }

/* ═══════════ Responsive ═══════════ */
@media (max-width: 1080px) {
    .arch-journey { grid-template-columns: repeat(2, 1fr); }
    .arch-stage:nth-child(2n) .arch-stage__art::after { display: none; }
}
@media (max-width: 960px) {
    .arch-hero__inner, .arch-split, .arch-feature, .arch-security .security-split { grid-template-columns: 1fr; gap: var(--sp-6); }
    .arch-feature--flip .arch-feature__art { order: 0; }
    .arch-hero__art { max-width: 620px; }
}
@media (max-width: 620px) {
    .arch-journey { grid-template-columns: 1fr; gap: var(--sp-6); }
    .arch-stage .arch-stage__art::after { display: none; }
    .arch-stage:not(:last-child)::after {
        content: ''; position: absolute; left: 50%; top: 100%; width: 3px; height: var(--sp-6); margin-left: -1.5px;
        background: repeating-linear-gradient(180deg, var(--accent-bright) 0 5px, transparent 5px 11px);
        background-size: 3px 22px; animation: arch-conn-v 0.9s linear infinite;
    }
}
@keyframes arch-conn-v { to { background-position: 0 22px; } }

@media (prefers-reduced-motion: reduce) {
    .arch-stage:not(:last-child) .arch-stage__art::after, .arch-stage:not(:last-child)::after { animation: none; }
    .arch-stage, .arch-stage:hover { transform: none; }
}