@font-face{font-family:'Satoshi';font-weight:400;font-style:normal;font-display:swap;src:url('/assets/fonts/satoshi-400.woff2') format('woff2')}@font-face{font-family:'Satoshi';font-weight:500;font-style:normal;font-display:swap;src:url('/assets/fonts/satoshi-500.woff2') format('woff2')}@font-face{font-family:'Satoshi';font-weight:700;font-style:normal;font-display:swap;src:url('/assets/fonts/satoshi-700.woff2') format('woff2')}@font-face{font-family:'Satoshi';font-weight:900;font-style:normal;font-display:swap;src:url('/assets/fonts/satoshi-900.woff2') format('woff2')}
 h1,h2,.callout h2{font-family:'Satoshi',system-ui,-apple-system,sans-serif;font-weight:700;letter-spacing:-.025em;line-height:1.12}
 h1{font-size:clamp(32px,4.6vw,46px)}
 ::selection{background:rgba(176,134,58,.25)}
 .card a:not(.btn){color:var(--accent)}
 .statSync strong{display:block;font-size:24px;color:#c9a24a;font-family:'Satoshi',system-ui,-apple-system,sans-serif;font-weight:700}
 .statSync span{color:rgba(255,255,255,.6);font-size:13px}

 :root{
 --bg:#f6f4ef;
 --panel:#ffffff;
 --text:#283042;
 --muted:#5a6478;
 --border:#e5e1d6;
 --accent:#14213d;
 --accent2:#1c2c4f;
 --shadow:0 10px 30px rgba(20,33,61,.10);
 --radius:22px;
 }
 *{box-sizing:border-box;margin:0;padding:0}
 html{scroll-behavior:smooth}
 body{
 font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
 background:
 radial-gradient(900px 500px at 15% 0%, rgba(201,162,74,.20), transparent 60%),
 radial-gradient(900px 500px at 85% 10%, rgba(255,122,0,.16), transparent 60%),
 var(--bg);
 color:var(--text);
 line-height:1.7;
 }
 a{color:var(--accent);text-decoration:none;transition:opacity 0.2s}
 a:hover{opacity:0.8}
 .wrap{max-width:960px;margin:0 auto;padding:40px 24px}

 .header{
 text-align:center;
 padding:20px 0 60px;
 border-bottom:1px solid var(--border);
 }
 .logo{height:72px;width:auto;margin-bottom:20px}
 .backLink{
 color:var(--muted);
 font-size:15px;
 display:inline-flex;
 align-items:center;
 gap:6px;
 }

 .article{
 margin:60px 0;
 }
 .articleMeta{
 text-align:center;
 margin-bottom:40px;
 }
 .articleMeta .badge{
 display:inline-flex;
 align-items:center;
 gap:8px;
 padding:8px 16px;
 border-radius:999px;
 background:rgba(201,162,74,.12);
 border:1px solid rgba(201,162,74,.3);
 color:var(--accent);
 font-weight:1000;
 font-size:14px;
 margin-bottom:20px;
 }
 h1{
 margin:0 0 20px;
 font-size:48px;
 line-height:1.1;
 letter-spacing:-0.02em;
 }
 .byline{
 color:var(--muted);
 font-size:16px;
 }

 .content{
 font-size:18px;
 line-height:1.8;
 color:var(--muted);
 }
 .content h2{
 color:var(--text);
 font-size:32px;
 margin:60px 0 20px;
 letter-spacing:-0.01em;
 }
 .content h3{
 color:var(--text);
 font-size:24px;
 margin:40px 0 16px;
 }
 .content p{
 margin:0 0 24px;
 }
 .content strong{
 color:var(--text);
 font-weight:1000;
 }
 .content ul, .content ol{
 margin:0 0 24px;
 padding-left:28px;
 }
 .content li{
 margin:12px 0;
 }

 .callout{
 background:rgba(201,162,74,.08);
 border-left:4px solid var(--accent);
 border-radius:12px;
 padding:24px 28px;
 margin:32px 0;
 }
 .callout strong{
 display:block;
 font-size:20px;
 margin-bottom:12px;
 color:var(--accent);
 }

 .priceTable{
 width:100%;
 border-collapse:collapse;
 margin:32px 0;
 background:#ffffff;
 border-radius:16px;
 overflow:hidden;
 border:1px solid var(--border);
 }
 .priceTable th{
 background:rgba(201,162,74,.12);
 color:var(--text);
 padding:16px;
 text-align:left;
 font-weight:1000;
 border-bottom:1px solid var(--border);
 }
 .priceTable td{
 padding:16px;
 border-bottom:1px solid var(--border);
 }
 .priceTable tr:last-child td{
 border-bottom:none;
 }
 .priceTable td:last-child{
 font-weight:1000;
 color:var(--accent);
 }

 .ctaBanner{
 background:linear-gradient(135deg, rgba(201,162,74,.16), rgba(255,122,0,.12));
 border:2px solid rgba(201,162,74,.35);
 border-radius:20px;
 padding:40px 32px;
 text-align:center;
 margin:60px 0;
 }
 .ctaBanner h2{
 margin:0 0 12px;
 font-size:28px;
 color:var(--text);
 }
 .ctaBanner p{
 margin:0 0 24px;
 color:var(--muted);
 font-size:17px;
 }
 .btn{
 display:inline-block;
 padding:16px 32px;
 border-radius:12px;
 background:linear-gradient(135deg,var(--accent),var(--accent2));
 color:#fff;
 font-weight:1000;
 font-size:18px;
 }
 .btn:hover{
 transform:translateY(-2px);
 box-shadow:0 8px 24px rgba(201,162,74,.4);
 }

 footer{
 text-align:center;
 color:var(--muted);
 font-size:14px;
 padding:40px 0 20px;
 border-top:1px solid var(--border);
 margin-top:80px;
 }
 footer p{margin:8px 0}

 @media (max-width: 768px){
 .wrap{padding:24px 16px}
 h1{font-size:36px}
 .content h2{font-size:28px}
 .content{font-size:17px}
 .priceTable{font-size:14px}
 .priceTable th, .priceTable td{padding:12px}
 }
 /* ========== QUOTE POPUP ========== */
 .quotePopup {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.85);
 z-index: 10000;
 display: none;
 align-items: center;
 justify-content: center;
 padding: 20px;
 backdrop-filter: blur(8px);
 }
 .quotePopup.show {
 display: flex;
 animation: fadeIn 0.3s ease;
 }
 @keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
 }
 .quotePopupInner {
 background: var(--bg);
 border-radius: var(--radius);
 padding: 40px;
 max-width: 520px;
 width: 100%;
 position: relative;
 box-shadow: var(--shadow);
 border: 1px solid var(--border);
 animation: slideUp 0.4s ease;
 }
 @keyframes slideUp {
 from { transform: translateY(30px); opacity: 0; }
 to { transform: translateY(0); opacity: 1; }
 }
 .quotePopupClose {
 position: absolute;
 top: 16px;
 right: 16px;
 background: rgba(201,162,74,0.1);
 border: 1px solid var(--border);
 color: var(--text);
 width: 36px;
 height: 36px;
 border-radius: 50%;
 font-size: 20px;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.2s;
 }
 .quotePopupClose:hover {
 background: var(--accent);
 color: #000;
 transform: rotate(90deg);
 }
 .quotePopupInner h3 {
 font-size: 28px;
 margin-bottom: 12px;
 color: var(--accent);
 font-weight: 800;
 }
 .quotePopupInner p {
 color: var(--muted);
 margin-bottom: 24px;
 font-size: 15px;
 }
 .quoteForm {
 display: flex;
 flex-direction: column;
 gap: 16px;
 }
 .quoteForm input,
 .quoteForm textarea,
 .quoteForm select {
 padding: 14px 18px;
 background: rgba(201,162,74,0.05);
 border: 1px solid var(--border);
 border-radius: 12px;
 color: var(--text);
 font-size: 15px;
 font-family: inherit;
 transition: all 0.2s;
 }
 .quoteForm input:focus,
 .quoteForm textarea:focus,
 .quoteForm select:focus {
 outline: none;
 border-color: var(--accent);
 background: rgba(201,162,74,0.08);
 }
 .quoteForm textarea {
 min-height: 100px;
 resize: vertical;
 }
 .quoteForm button {
 padding: 16px 32px;
 background: linear-gradient(135deg, var(--accent2), var(--accent));
 color:#fff;
 border: none;
 border-radius: 12px;
 font-size: 16px;
 font-weight: 700;
 cursor: pointer;
 transition: all 0.2s;
 margin-top: 8px;
 }
 .quoteForm button:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 25px rgba(201,162,74,0.4);
 }
 .quoteSuccessMessage {
 display: none;
 text-align: center;
 padding: 20px;
 }
 .quoteSuccessMessage.show {
 display: block;
 }
 .quoteSuccessMessage h4 {
 color: #00cc70;
 font-size: 24px;
 margin-bottom: 12px;
 }
 .quoteSuccessMessage p {
 color: var(--muted);
 font-size: 16px;
 }