@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400..800&display=swap");


:root {
  --font-hercules: "Manrope", "Segoe UI", Arial, sans-serif;
  --font-hercules-display: "Times New Roman", Times, Georgia, serif;
  font-family: var(--font-hercules);
  color: #292114;
  background: #f7f2e7;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  color-scheme: light;
  --bg: #f7f2e7;
  --surface: #fffdf8;
  --surface-raised: #fff9ec;
  --surface-soft: #f4ead4;
  --border: #dfcca0;
  --text: #292114;
  --muted: #786d59;
  --muted-strong: #574b38;
  --primary: #b87900;
  --primary-light: rgba(218, 151, 20, 0.13);
  --success: #20bd8b;
  --success-light: #e5f8f2;
  --danger: #c64232;
  --chart-queries: #9b680c;
  --chart-blocked: #77618f;
  --chart-traffic: #397780;
  --chart-threat: #a65348;
  --chart-allowed: #327b60;
  --chart-fill-opacity: .12;
  --chart-tooltip-shadow: 0 4px 16px rgba(87, 58, 8, .12);
  --map-sphere: #f7eedc;
  --map-country: #fffaf0;
  --shadow: 0 12px 35px rgba(87, 58, 8, 0.08);
  --space-4: 20px;
}

:root[data-theme="dark"] {
  color: #f3ead8;
  background: #090a0d;
  color-scheme: dark;
  --bg: #090a0d;
  --surface: #111318;
  --surface-raised: #17191f;
  --surface-soft: #1d1e22;
  --border: #3a3221;
  --text: #f3ead8;
  --muted: #9d9586;
  --muted-strong: #c4bba9;
  --primary: #f0b429;
  --primary-light: rgba(240, 180, 41, 0.12);
  --success: #36d69f;
  --success-light: rgba(54, 214, 159, 0.11);
  --danger: #ff7465;
  --chart-queries: #d4af55;
  --chart-blocked: #a295bd;
  --chart-traffic: #7ba6ad;
  --chart-threat: #b88078;
  --chart-allowed: #79b59a;
  --chart-fill-opacity: .16;
  --chart-tooltip-shadow: 0 4px 16px rgba(0, 0, 0, .3);
  --map-sphere: #090b0f;
  --map-country: #13161b;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
}

.about-page { position: relative; min-height: calc(100vh - 70px); overflow: hidden; background: var(--bg); }
.about-content { position: relative; z-index: 1; width: min(100%, 1050px); margin: 0 auto; padding: 62px 42px 48px; }
.about-hero { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--border); }
.about-brand { display: flex; align-items: center; gap: 22px; min-width: 0; }
.about-brand img { width: 78px; height: 78px; object-fit: contain; filter: drop-shadow(0 7px 14px color-mix(in srgb, var(--primary), transparent 62%)); }
.about-brand h1 { max-width: 650px; margin: 0; font-size: clamp(27px, 4vw, 44px); line-height: 1.1; letter-spacing: -.8px; }
.about-brand p:last-child { max-width: 610px; margin: 13px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.about-badge { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 8px 0; color: var(--success); font-size: 10px; }
.about-intro { max-width: 700px; padding: 34px 0; border-bottom: 1px solid var(--border); }
.about-intro h2, .about-section-heading h2 { margin: 0; font-size: 21px; }
.about-intro p:last-child { margin: 11px 0 0; color: var(--muted); font-size: 11px; line-height: 1.75; }
.about-projects { padding: 34px 0; border-bottom: 1px solid var(--border); }
.about-section-heading { margin-bottom: 20px; }
.about-project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; }
.about-project { display: flex; gap: 16px; min-width: 0; padding: 18px 0; border-top: 1px solid var(--border); }
.about-project img { width: 58px; height: 58px; flex: 0 0 auto; object-fit: contain; }
.about-project img.about-project__logo--large { width: 112px; height: 96px; }
.about-project img.about-project__logo--medium { width: 92px; height: 80px; }
@media (max-width: 400px) { .about-project img.about-project__logo--large { width: 84px; height: 80px; } }
.about-project h3 { margin: 0; font-size: 15px; }
.about-project p { margin: 7px 0 13px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.about-project div > div { display: flex; flex-wrap: wrap; gap: 14px; }
.about-project a, .about-footer a { display: inline-flex; align-items: center; gap: 5px; color: var(--primary); font-size: 9px; text-decoration: none; }
.about-project a:hover, .about-footer a:hover { text-decoration: underline; }
.about-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; padding: 28px 0; border-bottom: 1px solid var(--border); }
.about-tools > div { display: flex; gap: 12px; padding: 12px 0; }
.about-tools svg { flex: 0 0 auto; color: var(--primary); }
.about-tools span { display: grid; gap: 5px; }
.about-tools strong { font-size: 11px; }
.about-tools small { color: var(--muted); font-size: 9px; line-height: 1.5; }
.about-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; color: var(--muted); font-size: 9px; }
@media (max-width: 700px) { .about-content { padding: 34px 20px; } .about-hero { align-items: flex-start; flex-direction: column; gap: 16px; } .about-project-grid, .about-tools { grid-template-columns: 1fr; } .about-brand { align-items: flex-start; } .about-brand img { width: 58px; height: 58px; } }

*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--bg);color:var(--text)}h1{font-family:var(--font-hercules-display)}.eyebrow{font-size:10px;letter-spacing:1.5px;color:var(--primary);margin:0 0 10px}.icon-button{width:39px;height:39px;display:grid;place-items:center;border:1px solid var(--border);border-radius:10px;background:var(--surface);cursor:pointer}.icon-button[hidden]{display:none}.icon-button:hover{background:var(--surface-soft)}.icon-button img{width:19px;height:19px}.github-section{display:flex;justify-content:center;padding:28px 0;border-bottom:1px solid var(--border)}.github-section a{display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--primary);font-size:12px;text-decoration:none}.github-section a:hover span{text-decoration:underline}.github-section a>span{display:flex;align-items:center;gap:7px}.octocat{width:180px;height:180px;object-fit:contain;background:white;border-radius:12px}.github-icon{width:15px;height:15px}.icon-button img,.github-icon{filter:invert(45%) sepia(93%) saturate(1100%) hue-rotate(5deg)}:root[data-theme="dark"] .icon-button img,:root[data-theme="dark"] .github-icon{filter:invert(80%) sepia(61%) saturate(775%) hue-rotate(345deg)}a:focus-visible,button:focus-visible{outline:3px solid var(--primary);outline-offset:4px}@media(max-width:700px){.about-hero{flex-direction:row}.about-footer{flex-wrap:wrap}}
.globe-section{padding:16px 0 28px;border-bottom:1px solid var(--border);text-align:center}.globe-section svg{display:block;width:min(100%,640px);height:auto;margin:auto}.globe-section p{font-size:10px;color:var(--primary)}.globe-section p span{color:var(--muted)}.globe-sphere{fill:var(--map-sphere);stroke:var(--border)}.globe-grid{fill:none;stroke:var(--border);stroke-width:.5;opacity:.55}.globe-land{fill:var(--map-country);stroke-opacity:.8;stroke-width:.7}.globe-ping{fill:var(--success)}.ping-halo{fill:none;stroke:var(--success);opacity:.4;animation:ping 2.5s ease-out infinite;transform-box:fill-box;transform-origin:center}@keyframes ping{from{transform:scale(.5);opacity:.6}to{transform:scale(1.6);opacity:0}}@media(prefers-reduced-motion:reduce){.ping-halo{animation:none}}

.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.github-button img{width:19px;height:19px}

@media(max-width:400px){.about-content{padding:26px 16px}.about-hero{gap:12px}.about-brand{gap:10px}.about-brand img{width:44px;height:44px}.about-brand h1{font-size:27px}.header-actions{gap:6px}.icon-button{width:35px;height:35px}.about-project img.about-project__logo--medium{width:70px;height:64px}}

.globe-section{position:relative;padding:20px 0}.globe-section svg{width:100%;max-width:960px;touch-action:none;cursor:grab}.globe-section svg:active{cursor:grabbing}.map-controls{position:absolute;right:10px;top:28px;display:flex;gap:5px}.map-controls button{width:32px;height:32px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--primary);font-size:20px;cursor:pointer}.globe-land{stroke-width:1;vector-effect:non-scaling-stroke}@media(max-width:600px){.map-controls{display:none}.globe-section svg{max-width:450px;touch-action:auto;cursor:default}.globe-section{padding:8px 0}.about-brand h1{font-size:27px}}@media(max-width:400px){.about-brand h1{font-size:23px}.about-brand{gap:7px}.about-brand img{width:38px;height:38px}.about-hero{gap:8px}}

.secure-vpn-pin{color:var(--success);filter:drop-shadow(0 0 2px var(--success))}.secure-vpn-pin__body,.secure-vpn-pin__badge{fill:var(--surface);stroke:currentColor;stroke-width:1.2}.secure-vpn-pin__center{fill:currentColor}.secure-vpn-pin__lock{fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}

.secure-vpn-pin__lock { color:#f5b82e; stroke:#f5b82e; }