:root{ --ink-navy:#032444; --navy-2:#0A3A63; --navy-3:#0F4A82; --gold:#0966C3; --gold-soft:#07529C; --teal:#0966C3; --parchment:#EBF0FA; --parchment-2:#D9E5F8; --ink-text:#F2F6FC; --ink-text-dim:#AEC2DE; --dark-text:#032444; --dark-text-dim:#3E5E82; --danger:#B95C4A; --rust:#B95C4A; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--ink-navy); color:var(--ink-text); font-family:'Source Serif 4', serif; line-height:1.5; } h1,h2,h3,.display{ font-family:'Space Grotesk', sans-serif; letter-spacing:-0.01em; } .mono{ font-family:'IBM Plex Mono', monospace; } /* ---------- background contour texture ---------- */ .contours{ position:fixed; inset:0; z-index:0; opacity:0.16; pointer-events:none; } .wrap{ position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:0 28px; } /* ---------- hero ---------- */ .topnav{ display:flex; align-items:center; gap:10px; padding:22px 0 0; } .topnav-logo{ width:32px; height:32px; border-radius:50%; } .topnav-name{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14.5px; color:var(--ink-text); } header.hero{ padding:76px 0 40px; border-bottom:1px solid rgba(237,231,218,0.12); } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:22px; } .eyebrow::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px rgba(198,138,61,0.25); } h1.title{ font-size:clamp(30px, 4.4vw, 50px); font-weight:600; margin:0 0 20px; max-width:820px; color:#fff; } h1.title em{ font-style:normal; color:var(--gold-soft); } p.lede{ font-size:18px; color:var(--ink-text-dim); max-width:640px; margin:0 0 6px; } .disclaimer{ margin-top:26px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-text-dim); border-left:2px solid var(--teal); padding-left:12px; max-width:640px; } /* ---------- geological cross-section (signature element) ---------- */ .real-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px; } .real-card{ background:var(--navy-2); border:1px solid var(--gold); border-radius:10px; padding:22px 24px; position:relative; } .real-tag{ display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--dark-text); background:var(--gold-soft); padding:3px 10px; border-radius:4px; margin-bottom:12px; } .real-card h3{ font-family:'Space Grotesk',sans-serif; font-size:17px; color:#fff; margin:0 0 16px; } .real-row{ display:flex; gap:20px; flex-wrap:wrap; margin-bottom:14px; } .real-stat{ flex:1; min-width:130px; } .real-num{ font-family:'IBM Plex Mono',monospace; font-size:28px; color:var(--gold-soft); line-height:1; } .real-lab{ font-size:12px; color:var(--ink-text-dim); margin-top:6px; line-height:1.4; } .real-finding{ font-size:13.5px; color:var(--ink-text); background:rgba(255,255,255,0.04); border-left:2px solid var(--danger); padding:10px 12px; border-radius:0 6px 6px 0; margin:0 0 14px; } .real-src{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--gold-soft); border-top:1px solid rgba(237,231,218,0.14); padding-top:10px; } .real-callout{ margin-top:22px; background:var(--parchment); color:var(--dark-text); border-radius:10px; padding:18px 22px; font-size:14px; } .real-card.good{ border-color:#4CA771; } .real-tag.good{ background:#7CD9A0; color:#0D2417; } .real-num.good{ color:#7CD9A0; } .real-finding.good{ border-left-color:#4CA771; } .real-callout.good{ background:#E7F5EC; } .arch-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:34px; align-items:start; } @media (max-width:820px){ .arch-grid{ grid-template-columns:1fr; } } .pipeline{ display:flex; flex-direction:column; gap:0; } .pipe-step{ display:grid; grid-template-columns:26px 1fr; gap:14px; padding:14px 0; border-bottom:1px solid rgba(237,231,218,0.10); } .pipe-step:last-child{ border-bottom:none; } .pipe-dot{ width:26px; height:26px; border-radius:50%; background:var(--navy-3); border:1px solid var(--teal); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--teal); flex-shrink:0; } .pipe-step b{ display:block; font-family:'Space Grotesk',sans-serif; font-size:14.5px; color:#fff; margin-bottom:3px; } .pipe-step span{ font-size:13.5px; color:var(--ink-text-dim); } .why-box{ background:var(--navy-2); border:1px solid rgba(237,231,218,0.14); border-radius:10px; padding:22px 24px; font-size:14.5px; color:var(--ink-text-dim); } .why-box h3{ color:#fff; font-size:15px; margin:0 0 10px; } .why-box p{ margin:0 0 12px; } .why-box .rule{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gold-soft); background:rgba(198,138,61,0.1); border-left:2px solid var(--gold); padding:8px 12px; margin-top:14px; } .live-card{ background:var(--navy-2); color:var(--ink-text); border:1px solid var(--teal); border-radius:8px; padding:18px 18px 16px; grid-column:1/-1; } .live-card .k{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.09em; color:var(--teal); margin-bottom:10px; display:flex; align-items:center; gap:7px; } .live-dot{ width:6px; height:6px; border-radius:50%; background:var(--teal); animation:pulse 1.4s infinite ease-in-out; } .live-card .row{ display:flex; flex-wrap:wrap; gap:26px; margin-top:6px; } .live-card .stat{ min-width:120px; } .live-card .stat .num{ font-family:'IBM Plex Mono',monospace; font-size:19px; color:#fff; } .live-card .stat .lab{ font-size:11.5px; color:var(--ink-text-dim); margin-top:2px; } .live-card .src{ margin-top:14px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--teal); border-top:1px solid rgba(237,231,218,0.14); padding-top:10px; } .live-card .src a{ color:var(--gold-soft); } .live-fallback{ font-size:13px; color:var(--ink-text-dim); font-family:'IBM Plex Mono',monospace; } .reg-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-top:24px; } .reg-card{ background:var(--navy-2); border:1px solid rgba(237,231,218,0.14); border-radius:8px; padding:16px 18px; } .reg-card .k{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--gold-soft); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:8px; display:block; } .reg-card h4{ font-family:'Space Grotesk',sans-serif; font-size:14px; color:#fff; margin:0 0 6px; } .reg-card p{ font-size:13px; color:var(--ink-text-dim); margin:0; } .attribution{ margin-top:26px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-text-dim); background:var(--navy-2); border-left:2px solid var(--teal); padding:12px 16px; border-radius:0 6px 6px 0; } .attribution a{ color:var(--gold-soft); } .difficulty-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; } .diff-card{ background:var(--navy-2); border:1px solid rgba(185,92,74,0.35); border-left:3px solid var(--danger); border-radius:8px; padding:18px 20px; } .diff-card .k{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--danger); margin-bottom:8px; display:block; } .diff-card h4{ font-family:'Space Grotesk',sans-serif; font-size:15px; color:#fff; margin:0 0 8px; } .diff-card p{ font-size:13.5px; color:var(--ink-text-dim); margin:0; } .verdict-box{ margin-top:28px; background:var(--parchment); color:var(--dark-text); border-radius:10px; padding:22px 26px; font-size:14.5px; } .verdict-box b{ font-family:'Space Grotesk',sans-serif; display:block; margin-bottom:8px; font-size:15px; } .strata{ margin:44px 0 0; border-radius:6px; overflow:hidden; border:1px solid rgba(237,231,218,0.14); } .stratum{ display:grid; grid-template-columns:34px 150px 1fr; align-items:center; gap:16px; padding:12px 18px; font-size:12.5px; } .stratum .n{ font-family:'IBM Plex Mono',monospace; opacity:0.6; } .stratum .name{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13px; } .stratum .desc{ color:rgba(255,255,255,0.75); } .s1{ background:#1a2f52; } .s2{ background:#20375c; } .s3{ background:#2a4166; } .s4{ background:#35507a; color:var(--dark-text); } .s4 .desc{ color:rgba(35,28,18,0.7); } .s4 .name{ color:var(--dark-text); } .s5{ background:var(--gold-soft); color:var(--dark-text); } .s5 .desc{ color:rgba(35,28,18,0.7); } .s5 .name{ color:var(--dark-text); } .s6{ background:var(--teal); } /* ---------- section shell ---------- */ section{ padding:56px 0; border-bottom:1px solid rgba(237,231,218,0.10); } h2.section-title{ font-size:24px; color:#fff; margin:0 0 8px; } p.section-sub{ color:var(--ink-text-dim); margin:0 0 30px; max-width:620px; font-size:15px; } /* ---------- district selector ---------- */ .districts{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px; } .district-btn{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; background:var(--navy-2); color:var(--ink-text-dim); border:1px solid rgba(237,231,218,0.16); border-radius:100px; padding:9px 16px; cursor:pointer; transition:all .15s ease; } .district-btn:hover{ border-color:var(--gold); color:#fff; } .district-btn.active{ background:var(--gold); color:var(--dark-text); border-color:var(--gold); font-weight:600; } /* breadcrumb */ .breadcrumb{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink-text-dim); margin-bottom:8px; } .breadcrumb b{ color:#fff; font-weight:600; } .breadcrumb .sep{ color:var(--gold); opacity:0.7; } .ubigeo-tag{ display:inline-block; margin-top:2px; margin-bottom:34px; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.08em; color:var(--ink-navy); background:var(--gold-soft); padding:3px 9px; border-radius:4px; } /* evidence grid */ .evidence-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; } .card{ background:var(--parchment); color:var(--dark-text); border-radius:8px; padding:18px 18px 16px; position:relative; box-shadow:0 8px 20px rgba(0,0,0,0.18); } .card .k{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.09em; color:var(--dark-text-dim); margin-bottom:10px; display:block; } .card .v{ font-family:'Space Grotesk',sans-serif; font-size:20px; font-weight:600; margin-bottom:4px; } .card .v small{ font-size:12px; font-weight:400; color:var(--dark-text-dim); } .card ul{ margin:8px 0 0; padding-left:16px; font-size:13px; } .card li{ margin-bottom:5px; } .card .src{ margin-top:12px; font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--teal); border-top:1px solid rgba(35,28,18,0.12); padding-top:8px; } .bar-row{ display:flex; align-items:center; gap:8px; margin-bottom:7px; font-size:12px; } .bar-track{ flex:1; height:6px; background:rgba(35,28,18,0.12); border-radius:4px; overflow:hidden; } .bar-fill{ height:100%; background:var(--danger); border-radius:4px; } .bar-label{ width:118px; flex-shrink:0; } .bar-pct{ width:34px; text-align:right; font-family:'IBM Plex Mono',monospace; flex-shrink:0; } /* query box */ .query-box{ margin-top:38px; background:var(--navy-2); border:1px solid rgba(237,231,218,0.14); border-radius:10px; padding:24px 26px; } .query-q{ font-family:'Space Grotesk',sans-serif; font-size:17px; color:#fff; margin:0 0 14px; } .query-q .qmark{ color:var(--gold); } button.generate{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px; background:var(--gold); color:var(--dark-text); border:none; border-radius:6px; padding:11px 20px; cursor:pointer; transition:transform .12s ease, background .15s ease; } button.generate:hover{ background:var(--gold-soft); } button.generate:disabled{ opacity:0.55; cursor:progress; } button.generate:active{ transform:scale(0.98); } .answer{ margin-top:20px; padding-top:20px; border-top:1px dashed rgba(237,231,218,0.2); display:none; } .answer.show{ display:block; } .answer-badge{ display:inline-flex; align-items:center; gap:7px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--teal); margin-bottom:12px; text-transform:uppercase; letter-spacing:0.08em; } .answer-badge::before{ content:'●'; font-size:8px; } .answer-text{ font-size:16px; color:var(--ink-text); white-space:pre-wrap; } .answer-text strong{ color:var(--gold-soft); } .hitl{ margin-top:18px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--dark-text); background:var(--parchment-2); padding:10px 14px; border-radius:6px; border-left:3px solid var(--danger); } .loading-line{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-text-dim); display:none; align-items:center; gap:8px; margin-top:16px; } .loading-line.show{ display:flex; } .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); animation:pulse 1s infinite ease-in-out; } .dot:nth-child(2){ animation-delay:.15s; } .dot:nth-child(3){ animation-delay:.3s; } @keyframes pulse{ 0%,100%{ opacity:0.25; } 50%{ opacity:1; } } footer{ padding:40px 0 60px; } .brand-mark{ text-align:center; pointer-events:none; margin-top:28px; } .brand-mark .brand-sig{ display:flex; align-items:center; justify-content:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.03em; color:rgba(242,246,252,0.55); } .brand-mark .brand-icon{width:14px; height:14px; border-radius:50%; flex-shrink:0;} .brand-mark .brand-sig a{ color:rgba(242,246,252,0.8); pointer-events:auto; text-decoration:none; border-bottom:1px solid rgba(242,246,252,0.35); } .brand-mark .brand-sig a:hover{color:#F2F6FC; border-bottom-color:#F2F6FC;} .brand-mark .claude-star{color:var(--rust); font-size:14px; display:inline-block;} .brand-mark .brand-inspired{ margin-top:1px; font-family:'IBM Plex Mono',monospace; font-size:8.5px; color:rgba(242,246,252,0.35); } .brand-mark .brand-inspired a{ color:rgba(242,246,252,0.5); pointer-events:auto; text-decoration:none; border-bottom:1px solid rgba(242,246,252,0.2); } .brand-mark .brand-inspired a:hover{color:rgba(242,246,252,0.8);} footer p{ font-size:12.5px; color:var(--ink-text-dim); font-family:'IBM Plex Mono',monospace; max-width:640px; } @media (max-width:640px){ .stratum{ grid-template-columns:24px 1fr; } .stratum .desc{ grid-column:2/-1; } }