/* ==========================================================================
   ProxyPacket base styles
   Locked design system from the homepage: tokens, reset, typography, layout, buttons, cards, header, footer, toast. Loaded on every page.
   ========================================================================== */
:root{--bg:#fff;--soft:#F2F6F5;--ink:#0B1B2B;--mut:#4F626D;--line:#DCE5E2;--brand:#0A7D68;--b2:#12B886;--sun:#FFC53D;--night:#08171F;--card:#fff;--dot:#C6D4D1;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#0C1A22;--soft:#112430;--ink:#EAF2F0;--mut:#9DB3B0;--line:#223641;--brand:#2BD4A6;--card:#102129;--dot:#2A4552}
}
:root[data-theme="dark"]{--bg:#0C1A22;--soft:#112430;--ink:#EAF2F0;--mut:#9DB3B0;--line:#223641;--brand:#2BD4A6;--card:#102129;--dot:#2A4552}
*{box-sizing:border-box}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{line-height:1.08;letter-spacing:-.02em}
h1{font-size:clamp(2.5rem,6.4vw,4.4rem);font-weight:800}
h2{font-size:clamp(1.8rem,4vw,2.7rem);font-weight:750}
h3{font-size:1.2rem;font-weight:700}
a{color:inherit}
:focus-visible{outline:3px solid var(--b2);outline-offset:3px;border-radius:6px}
.w{max-width:1180px;margin:auto;padding:0 20px}
section{padding:84px 0}
.lead{font-size:1.15rem;color:var(--mut);max-width:34em}
.sh{max-width:36em;margin-bottom:40px}
.sh p{color:var(--mut);margin-top:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:12px;font-family:inherit;font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px -10px var(--ink)}
.btn.p{background:var(--ink);color:var(--bg)}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.hb{display:flex;align-items:center;gap:20px;min-height:68px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:1.25rem;font-weight:800;letter-spacing:-.02em}
.logo b{font-weight:500}
.logo svg{width:34px;height:34px}
nav{margin-left:auto;display:flex;align-items:center;gap:6px}
nav a{padding:10px 12px;text-decoration:none;font-weight:600;color:var(--mut);border-radius:8px}
nav a:hover{color:var(--ink)}
.burger{display:none;margin-left:auto;width:48px;height:48px;border:1.5px solid var(--line);border-radius:12px;background:none;color:var(--ink);cursor:pointer}
@media(max-width:860px){
  .burger{display:block}
  nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:var(--bg);padding:12px 20px 20px;border-bottom:1px solid var(--line);margin:0}
  nav.open{display:flex}
  nav a{padding:14px 12px}
}
.hero{padding:56px 0 72px;background:linear-gradient(var(--soft),var(--bg) 70%)}
.hero h1{margin-bottom:20px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0}
.ind{display:flex;flex-wrap:wrap;gap:8px}
.ind li{padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-weight:600;font-size:.92rem}
.map{display:block;width:100%;height:auto}
.map .land{stroke:var(--dot);stroke-width:1.15;stroke-linecap:round}
.bar{display:flex;align-items:center;gap:6px;font-weight:700}
.bar i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.bar b{margin-left:8px}
label,legend{display:grid;gap:6px;font-weight:600;font-size:.88rem;color:var(--mut)}
select,.seg button{min-height:46px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font-family:inherit;font-weight:600;font-size:1rem;padding:0 12px}
fieldset{border:0;padding:0;margin:0}
.seg{display:flex;gap:6px}
.seg legend{margin-bottom:6px}
.seg button{flex:1;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
code{display:block;padding:14px;border-radius:10px;background:var(--night);color:#7CF0CB;font:500 .84rem/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere}
.fine{font-size:.82rem;color:var(--mut);margin-top:16px}
.night{background:var(--night);color:#EAF2F0}
.night .sh p,.night .fine{color:#9DB3B0}
.faq{max-width:820px}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:700;font-size:1.1rem;display:flex;justify-content:space-between;gap:16px;min-height:48px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font-size:1.5rem;line-height:1;transition:transform .2s}
details[open] summary:after{transform:rotate(45deg)}
details p{padding:0 0 20px;color:var(--mut)}
.cb{text-align:center;padding:84px 0}
.cb p{color:#9DB3B0;margin:14px auto 28px;max-width:30em}
.cb .btn{border-color:var(--sun);background:var(--sun);color:#1B1400}
footer{background:var(--night);color:#C5D3D0;padding:56px 0 32px;border-top:1px solid #16303C}
.fg{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.fg .br{grid-column:1/-1;max-width:30em}
@media(min-width:900px){
  .fg{grid-template-columns:2fr repeat(5,1fr)}
  .fg .br{grid-column:auto}
}
footer h3{font-size:.95rem;color:#fff;margin-bottom:12px}
footer li a{display:block;padding:5px 0;text-decoration:none;color:#9DB3B0}
footer li a:hover{color:#fff}
footer .logo{color:#fff;margin-bottom:12px}
.legal{margin-top:40px;padding-top:20px;border-top:1px solid #16303C;font-size:.85rem;color:#7F9692}
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,30px);background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:12px;font-weight:600;opacity:0;pointer-events:none;transition:.25s;z-index:50;max-width:90vw}
#toast.on{opacity:1;transform:translate(-50%,0)}
select{width:100%;min-width:0}
@keyframes rp{0%{transform:scale(1);opacity:.95}100%{transform:scale(10);opacity:0}}
@media(max-width:600px){
  section{padding:56px 0}
  .sh{margin-bottom:28px}
  .hero{padding:28px 0 44px}
  .cb{padding:60px 0}
  h1{font-size:2.3rem}
  .lead{font-size:1.05rem}
}