/* ===== RESET & BASE ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#FAFAFA;--sf:#FFF;--bd:#E5E5E5;
  --t1:#0F0F0F;--t2:#555;--t3:#999;
  --ac:#FF3D00;--ac2:#6C3CE9;--ac3:#00B87C;
  --r:14px;--rs:8px;
  --sh:0 1px 3px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.04);
  --shl:0 4px 12px rgba(0,0,0,.07),0 20px 40px rgba(0,0,0,.05)
}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--t1);font-family:'DM Sans',system-ui,-apple-system,sans-serif;overflow-x:hidden;min-height:100vh}
::selection{background:var(--ac);color:#fff}
a{color:inherit;text-decoration:none}

/* ===== NAV ===== */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between;background:rgba(250,250,250,.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--bd)}
.logo{font-weight:800;font-size:17px;letter-spacing:-.03em;display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--t1)}
.logo i{color:var(--ac);font-style:normal}
.nv{display:flex;gap:4px;align-items:center}
.nv a{padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--t2);border-radius:var(--rs);transition:all .2s ease;text-decoration:none;position:relative}
.nv a:hover{background:rgba(0,0,0,.04);color:var(--t1)}
.nv a.on{color:var(--t1);font-weight:800}
.nv .pro{background:var(--t1);color:#fff !important;font-weight:700}
.nv .pro:hover{background:#333}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;font-size:12px;font-weight:700;border:1.5px solid var(--bd);border-radius:var(--rs);background:var(--sf);color:var(--t1);cursor:pointer;transition:all .2s ease;font-family:inherit;white-space:nowrap;position:relative;overflow:hidden}
.btn:hover{border-color:#bbb;box-shadow:var(--sh)}
.btn:active{transform:scale(.97)}
.btn.on{background:var(--t1);color:#fff;border-color:var(--t1)}
.btn svg{width:14px;height:14px;flex-shrink:0}

/* ===== PILLS ===== */
.pill,.fp{padding:5px 12px;font-size:11px;font-weight:700;border:1.5px solid var(--bd);border-radius:18px;background:transparent;color:var(--t3);cursor:pointer;transition:all .2s ease;font-family:inherit}
.pill:hover,.fp:hover{border-color:var(--t1);color:var(--t1)}
.pill.on,.fp.on{background:var(--t1);color:#fff;border-color:var(--t1)}
.fp{padding:7px 16px;font-size:12px;border-radius:20px}

/* ===== TOAST ===== */
.toast{position:fixed;top:72px;right:20px;padding:10px 18px;background:var(--t1);color:#fff;border-radius:var(--rs);font-size:12px;font-weight:700;z-index:200;transform:translateX(120%);transition:.3s cubic-bezier(.4,0,.2,1);pointer-events:none}
.toast.show{transform:translateX(0)}

/* ===== MODAL ===== */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:300;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal-bg.open{display:flex}
.modal{background:var(--sf);border-radius:var(--r);padding:32px;max-width:480px;width:90%;position:relative;box-shadow:var(--shl)}
.modal h2{font-size:20px;font-weight:800;margin-bottom:8px;letter-spacing:-.02em}
.modal p{font-size:13px;color:var(--t2);line-height:1.6;margin-bottom:20px}
.modal-close{position:absolute;top:12px;right:12px;background:none;border:none;font-size:18px;cursor:pointer;color:var(--t3);transition:.2s}
.modal-close:hover{color:var(--t1)}
.modal .btn{width:100%;justify-content:center;padding:12px;font-size:13px;margin-bottom:8px}

/* ===== FOOTER ===== */
footer{padding:32px 20px;text-align:center;border-top:1px solid var(--bd);margin-top:48px}
footer p{font-size:11px;color:var(--t3)}
footer a{color:var(--t2);font-weight:700;text-decoration:none;transition:.2s}
footer a:hover{color:var(--ac)}

/* ===== RESPONSIVE NAV ===== */
@media(max-width:600px){
  .nv a:not(.pro){display:none}
}