@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=JetBrains+Mono:wght@400;500;600&family=Manrope:wght@400;500;600;700;800&display=swap');

/* =========================================================
   VARIABLES / RESET
   ========================================================= */

:root{--ink:#e9f0e8;--muted:#859896;--paper:#05070d;--line:#263537;--acid:#4da3ff;--coral:#ff765f;--cyan:#76c7ff;--white:#0c1622;--gauge:#4da3ff;--gauge-light:#76c7ff;--gauge-dark:#143a5e}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none}
html{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body{margin:0;background:
  radial-gradient(1200px 600px at 78% -10%,rgba(77,163,255,.14),transparent 60%),
  radial-gradient(900px 500px at 8% 22%,rgba(30,90,160,.12),transparent 55%),
  radial-gradient(1000px 700px at 50% 120%,rgba(77,163,255,.10),transparent 60%),
  linear-gradient(180deg,#05080f 0%,#071120 40%,#05070d 100%);
color:var(--ink);font-family:'Manrope',sans-serif}
body:before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.32;background-image:linear-gradient(rgba(77,163,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(77,163,255,.06) 1px,transparent 1px);background-size:48px 48px}
body:after{content:'';position:fixed;inset:0;pointer-events:none;background:radial-gradient(900px 500px at 82% 12%,rgba(77,163,255,.10),transparent 60%),radial-gradient(700px 400px at 10% 80%,rgba(77,163,255,.08),transparent 60%)}

/* =========================================================
   LAYOUT
   ========================================================= */

.shell{max-width:1440px;margin:auto;padding:0 4.5vw}
.topbar{height:86px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
footer{border-top:1px solid var(--line);padding:23px 0 35px;display:flex;align-items:center;justify-content:space-between;font:10px 'JetBrains Mono';color:var(--muted)}
.shell footer,.shell footer span{font-family:'JetBrains Mono',monospace}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.eyebrow,.label,.metric-label{font:10px 'DM Mono',monospace;letter-spacing:.14em;color:var(--muted);margin:0 0 13px}
.hero h1{font-size:clamp(42px,5.8vw,86px);line-height:.92;letter-spacing:-.04em;margin:0 0 21px;font-weight:600;font-family:'Manrope',sans-serif}
.lede{max-width:510px;color:#a1b1ad;font-size:16px;line-height:1.55;margin:0}
.grow-colon{color:var(--acid)}

/* =========================================================
   BRAND / HEADER
   ========================================================= */

.brand{display:flex;align-items:center;gap:12px}
.brand-mark{display:block;width:34px;height:34px;flex-shrink:0}
.brand strong,.brand span{display:block}
.brand strong{font-size:14px;letter-spacing:.16em}
.brand div span{font:10px 'JetBrains Mono',monospace;color:var(--muted);margin-top:4px;letter-spacing:.08em}
.top-meta{display:flex;align-items:center;gap:5px;color:var(--muted);font:11px 'JetBrains Mono',monospace}
.top-meta nav{display:flex;gap:26px}
.top-meta nav a{color:var(--muted);font:11px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.12em;transition:color .2s}
.top-meta nav a:hover{color:var(--ink)}

/* =========================================================
   HERO
   ========================================================= */

.hero{display:flex;justify-content:space-between;align-items:end;padding:74px 0 58px}
.hero>div:first-child{transform:translateY(31px)}

/* =========================================================
   WEATHER / SYSTEMS CARD
   ========================================================= */

.weather-card{width:min(100%,360px);padding:20px 21px 18px;border:1px solid var(--line);border-top:2px solid var(--cyan);background:#121b1d;border-radius:0;box-shadow:none}
.weather-heading{display:flex;justify-content:space-between;gap:16px;align-items:start}
.weather-heading .eyebrow{display:block;margin-bottom:7px}
.weather-heading strong{display:block;font-size:17px;line-height:1.1}
.weather-main{display:grid;grid-template-columns:62px 1fr;grid-template-rows:auto auto;column-gap:11px;align-items:center;margin:19px 0 17px}
.weather-main>div{display:flex;align-items:baseline;line-height:.9}
.weather-main>div strong{font-size:48px;letter-spacing:-.05em}
.weather-main>div span{margin-left:5px;color:var(--acid);font:15px 'JetBrains Mono',monospace}
.weather-main p{margin:5px 0 0;color:var(--muted);font-size:12px}
.weather-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding-top:13px;border-top:1px solid rgba(118,199,255,.17);gap:10px}
.weather-facts div{min-width:0}
.weather-facts span{display:block;margin-bottom:5px;color:var(--muted);font:8px 'JetBrains Mono',monospace;letter-spacing:.07em}
.weather-facts strong{display:block;font:11px 'JetBrains Mono',monospace;color:var(--ink);white-space:nowrap}

/* =========================================================
   PROJECTS
   ========================================================= */

.projects{padding:0 0 100px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:18px}
.section-title{margin:0;color:var(--muted);font:10px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.14em}
.section-count{color:#526476;font:11px 'JetBrains Mono',monospace}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{position:relative;min-height:360px;padding:28px;display:flex;flex-direction:column;overflow:hidden;background:var(--white);border:1px solid var(--line);transition:.25s ease}
.card:after{content:"";position:absolute;width:170px;height:170px;right:-75px;bottom:-75px;border:1px solid rgba(77,163,255,.1);transform:rotate(45deg);transition:.4s ease}
.card:hover{transform:translateY(-5px);border-color:rgba(77,163,255,.38);box-shadow:0 12px 40px rgba(0,0,0,.18)}
.card:hover:after{transform:rotate(45deg) scale(1.25)}
.card-number{color:#5d7084;font:11px 'JetBrains Mono',monospace;letter-spacing:.12em}
.card h2{margin:54px 0 12px;font-size:23px;font-weight:600;letter-spacing:-.03em;font-family:'Manrope',sans-serif}
.card p{margin:0;max-width:360px;color:#8999aa;font-size:14px;line-height:1.65}
.card-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.tag{padding:6px 8px;color:#8193a6;border:1px solid var(--line);font:9px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em}
.card-open{margin-top:auto;padding-top:30px;display:flex;justify-content:space-between;align-items:center;color:var(--acid);font:11px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.12em}
.arrow{font-size:19px;transition:.2s}
.card:hover .arrow{transform:translateX(5px)}

/* =========================================================
   FOOTER
   ========================================================= */

.footer-link{color:var(--muted);font:10px 'JetBrains Mono',monospace;letter-spacing:.06em;text-decoration:none}
.footer-link:hover{color:var(--acid);text-decoration:underline}
.footer-copy{display:inline-block}
.footer-inline{margin-left:8px;display:inline-block}

/* =========================================================
   AUTH / MODALS
   ========================================================= */

.info-modal{border:1px solid var(--line);background:var(--white);color:var(--ink);width:min(92vw,500px);padding:28px 30px;box-shadow:10px 10px 0 rgba(0,0,0,.28)}
.info-modal::backdrop{background:rgba(5,10,20,.72)}
.user-modal-close{display:flex;justify-content:flex-end;margin:-10px -10px 4px 0}
.icon-button{border:1px solid var(--line);background:transparent;width:34px;height:34px;font-size:21px;color:var(--ink);cursor:pointer}
.imprint-content{display:grid;gap:8px;margin-top:10px;font:13px 'Manrope',sans-serif;color:var(--ink);text-align:justify}
.imprint-content p{margin:0}
.imprint-content strong{color:var(--acid);font:10px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
.modal-hint{margin:9px 0 0;color:var(--muted);font-size:11px}
.info-modal h2{font-family:'Manrope',sans-serif;margin:2px 0 20px;font-size:26px}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:760px){.shell{padding:0 20px}.topbar{height:70px}.top-meta nav{display:none}.hero{padding:50px 0 38px;display:block}.weather-card{width:100%;margin-top:34px}.grid{grid-template-columns:1fr}.card{min-height:300px}.hero h1{font-size:56px}footer{display:block;line-height:2}}
@media(max-width:520px){.shell{padding:0 20px}.topbar{height:74px}.hero h1{font-size:48px}.lede{font-size:15px}}