:root{
  --bg-main:#F8FAFC;
  --bg-card:#FFFFFF;
  --bg-card-alt:#F1F5F9;
  --border-card:#E2E8F0;
  --text-main:#0F172A;
  --text-muted:#475569;
  --text-light:#64748B;
  --navy-corp:#0F2942;
  --navy-dark:#0A1B2C;
  --emerald:#059669;
  --emerald-hover:#047857;
  --emerald-light:#ECFDF5;
  --sky:#0284C7;
  --sky-light:#E0F2FE;
  --amber:#D97706;
  --amber-light:#FEF3C7;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.05);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,0.05),0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,0.08),0 4px 6px -4px rgba(0,0,0,0.04);
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --container-max:1200px;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-full:9999px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{background-color:var(--bg-main);color:var(--text-main);font-family:var(--font-sans);line-height:1.65;font-weight:400;overflow-x:hidden}
a{color:var(--emerald);text-decoration:none;transition:color .2s ease,border-color .2s ease}
a:hover{color:var(--emerald-hover)}
img,svg{max-width:100%;height:auto;display:block}
.container{width:100%;max-width:var(--container-max);margin-left:auto;margin-right:auto;padding-left:1.25rem;padding-right:1.25rem}

/* Typography */
h1,h2,h3,h4,h5,h6{color:var(--navy-corp);font-weight:700;line-height:1.25;letter-spacing:-0.02em}
h1{font-size:clamp(1.85rem,4vw,2.75rem);margin-bottom:1.25rem}
h2{font-size:clamp(1.45rem,3vw,2rem);margin-top:2.5rem;margin-bottom:1rem}
h3{font-size:clamp(1.2rem,2.2vw,1.5rem);margin-top:1.75rem;margin-bottom:.75rem}
h4{font-size:1.15rem;margin-top:1.25rem;margin-bottom:.5rem}
p{color:var(--text-muted);font-size:1.05rem;line-height:1.75;margin-bottom:1.25rem}
strong{color:var(--navy-corp);font-weight:600}
ul,ol{margin-bottom:1.25rem;padding-left:1.5rem;color:var(--text-muted)}
li{margin-bottom:.5rem;font-size:1.02rem;line-height:1.65}

/* Header */
.site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,0.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--border-card);box-shadow:var(--shadow-sm)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.site-logo{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.site-logo img,.site-logo svg{height:40px;width:auto}
.site-nav{display:flex;align-items:center;gap:1.25rem}
.site-nav a{color:var(--navy-corp);font-weight:500;font-size:.92rem;padding:.4rem .6rem;border-radius:var(--radius-sm);transition:all .2s ease}
.site-nav a:hover{color:var(--emerald);background:var(--emerald-light)}
.site-nav a.active{color:var(--emerald);font-weight:700}
.header-actions{display:flex;align-items:center;gap:1rem}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:.5rem;color:var(--navy-corp)}

/* Buttons */
.btn-emerald{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background-color:var(--emerald);color:#FFFFFF!important;font-weight:600;font-size:.95rem;padding:.75rem 1.4rem;border-radius:var(--radius-md);box-shadow:0 2px 4px rgba(5,150,105,0.25);transition:all .2s ease;text-decoration:none;border:none;cursor:pointer}
.btn-emerald:hover{background-color:var(--emerald-hover);transform:translateY(-1px);box-shadow:0 4px 8px rgba(5,150,105,0.3)}
.btn-emerald-lg{font-size:1.1rem;padding:1rem 2rem;border-radius:var(--radius-md)}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:transparent;color:var(--navy-corp);border:1.5px solid var(--navy-corp);font-weight:600;font-size:.95rem;padding:.7rem 1.35rem;border-radius:var(--radius-md);transition:all .2s ease}
.btn-outline:hover{background:var(--navy-corp);color:#FFFFFF}
.btn-group{display:flex;flex-wrap:wrap;gap:1rem;margin:1.5rem 0}

/* Breadcrumb */
.breadcrumb-nav{padding:.85rem 0;background:#F1F5F9;border-bottom:1px solid var(--border-card);font-size:.875rem}
.breadcrumb-list{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;list-style:none;margin:0;padding:0}
.breadcrumb-list li{display:flex;align-items:center;gap:.5rem;margin:0;color:var(--text-light);font-size:.875rem}
.breadcrumb-list a{color:var(--text-muted);text-decoration:none}
.breadcrumb-list a:hover{color:var(--emerald)}
.breadcrumb-list li.current{color:var(--navy-corp);font-weight:600}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:600;padding:.25rem .65rem;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.5px}
.badge-emerald{background:var(--emerald-light);color:var(--emerald);border:1px solid rgba(5,150,105,0.2)}
.badge-sky{background:var(--sky-light);color:var(--sky);border:1px solid rgba(2,132,199,0.2)}
.badge-amber{background:var(--amber-light);color:var(--amber);border:1px solid rgba(217,119,6,0.2)}
.badge-navy{background:#E2E8F0;color:var(--navy-corp)}

/* Hero Section */
.hero-section{padding:3.5rem 0 2.5rem;background:linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%);border-bottom:1px solid var(--border-card)}
.hero-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:2.5rem;align-items:center}
.hero-content{max-width:680px}
.hero-kicker{margin-bottom:.75rem}
.hero-subtitle{font-size:1.15rem;color:var(--text-muted);margin-bottom:1.5rem;line-height:1.7}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border-card)}
.stat-box{text-align:left}
.stat-num{font-size:1.75rem;font-weight:800;color:var(--navy-corp);display:block}
.stat-label{font-size:.825rem;color:var(--text-light);font-weight:500}

/* Cards & Grid */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin:2rem 0}
.cards-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin:2rem 0}
.cards-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin:2rem 0}
.card{background:var(--bg-card);border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm);transition:all .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#CBD5E1}
.card-title{font-size:1.25rem;color:var(--navy-corp);margin-bottom:.75rem}
.card-icon{width:48px;height:48px;border-radius:var(--radius-md);background:var(--emerald-light);color:var(--emerald);display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;font-size:1.5rem}

/* Content Sections */
.section-pad{padding:3.5rem 0}
.section-header{text-align:center;max-width:760px;margin:0 auto 2.5rem}
.section-header h2{margin-top:0}
.content-box{background:var(--bg-card);border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow-sm);margin:2rem 0}

/* Technical Tables */
.table-responsive{width:100%;overflow-x:auto;margin:1.75rem 0;border-radius:var(--radius-md);border:1px solid var(--border-card);box-shadow:var(--shadow-sm)}
.tech-table{width:100%;border-collapse:collapse;background:#FFFFFF;font-size:.95rem;text-align:left}
.tech-table th{background:var(--navy-corp);color:#FFFFFF;padding:1rem 1.15rem;font-weight:600;font-size:.9rem;letter-spacing:.3px}
.tech-table td{padding:.95rem 1.15rem;border-bottom:1px solid var(--border-card);color:var(--text-muted)}
.tech-table tr:last-child td{border-bottom:none}
.tech-table tr:nth-child(even){background:#F8FAFC}
.tech-table .highlight-col{background:rgba(5,150,105,0.04);font-weight:600;color:var(--navy-corp)}
.tech-table th.highlight-header{background:var(--emerald)}
.check-icon{color:var(--emerald);font-weight:bold;margin-right:.25rem}
.cross-icon{color:#EF4444;font-weight:bold;margin-right:.25rem}

/* Interactive Tools UI */
.tool-container{background:#FFFFFF;border:2px solid #E2E8F0;border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow-md);margin:2.5rem 0}
.tool-header{border-bottom:1px solid var(--border-card);padding-bottom:1.25rem;margin-bottom:1.5rem}
.tool-title{font-size:1.45rem;color:var(--navy-corp);display:flex;align-items:center;gap:.65rem}
.tool-desc{color:var(--text-muted);font-size:.98rem;margin:0}
.tool-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;margin-bottom:1.5rem}
.form-group{display:flex;flex-direction:column;gap:.5rem}
.form-group label{font-size:.9rem;font-weight:600;color:var(--navy-corp)}
.form-control{padding:.75rem 1rem;border:1.5px solid var(--border-card);border-radius:var(--radius-md);font-family:inherit;font-size:.98rem;background:#FFFFFF;color:var(--text-main);outline:none;transition:border-color .2s}
.form-control:focus{border-color:var(--emerald)}
.tool-result{background:var(--bg-card-alt);border:1px solid #CBD5E1;border-radius:var(--radius-md);padding:1.5rem;margin-top:1.5rem}

/* Speedometer UI */
.speed-gauge-wrap{display:flex;flex-direction:column;align-items:center;padding:1.5rem 0}
.gauge-dial{position:relative;width:240px;height:120px;overflow:hidden;border-top-left-radius:240px;border-top-right-radius:240px;background:#E2E8F0;margin-bottom:1rem}
.gauge-fill{position:absolute;bottom:0;left:0;width:100%;height:100%;background:conic-gradient(from 180deg at 50% 100%,#059669 0deg,#0284C7 90deg,#0F2942 180deg);transform-origin:center bottom;transform:rotate(0deg);transition:transform 1s ease-out}
.gauge-inner{position:absolute;bottom:0;left:20px;width:200px;height:100px;background:#FFFFFF;border-top-left-radius:200px;border-top-right-radius:200px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:10px}
.gauge-val{font-size:2rem;font-weight:800;color:var(--navy-corp);line-height:1}
.gauge-unit{font-size:.85rem;color:var(--text-light);font-weight:600}
.speed-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;width:100%;margin-top:1.5rem}
.metric-card{background:#FFFFFF;border:1px solid var(--border-card);border-radius:var(--radius-md);padding:1rem;text-align:center}
.metric-num{font-size:1.35rem;font-weight:700;color:var(--navy-corp)}
.metric-lbl{font-size:.8rem;color:var(--text-light);text-transform:uppercase}

/* Pricing Cards */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;margin:2rem 0}
.pricing-card{background:#FFFFFF;border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow-sm);position:relative;display:flex;flex-direction:column;justify-content:space-between}
.pricing-card.featured{border:2px solid var(--emerald);box-shadow:var(--shadow-lg);transform:scale(1.02)}
.pricing-badge{position:absolute;top:-12px;right:20px;background:var(--emerald);color:#FFFFFF;font-size:.75rem;font-weight:700;padding:.3rem .8rem;border-radius:var(--radius-full);text-transform:uppercase}
.pricing-title{font-size:1.35rem;color:var(--navy-corp);margin-bottom:.5rem}
.pricing-price{font-size:2.5rem;font-weight:800;color:var(--navy-corp);line-height:1.1;margin:1rem 0 .5rem}
.pricing-price span{font-size:1rem;font-weight:500;color:var(--text-light)}
.pricing-sub{font-size:.875rem;color:var(--emerald);font-weight:600;margin-bottom:1.5rem}
.pricing-features{list-style:none;padding:0;margin:0 0 2rem}
.pricing-features li{display:flex;align-items:center;gap:.6rem;font-size:.925rem;margin-bottom:.65rem;color:var(--text-muted)}

/* FAQ Accordion */
.faq-wrap{margin:2rem 0}
.faq-item{background:#FFFFFF;border:1px solid var(--border-card);border-radius:var(--radius-md);margin-bottom:1rem;overflow:hidden;box-shadow:var(--shadow-sm)}
.faq-question{width:100%;padding:1.25rem 1.5rem;text-align:left;background:none;border:none;font-size:1.1rem;font-weight:600;color:var(--navy-corp);display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-family:inherit}
.faq-question:hover{color:var(--emerald)}
.faq-icon{transition:transform .2s ease;font-size:1.25rem;font-weight:300}
.faq-answer{padding:0 1.5rem 1.25rem;color:var(--text-muted);font-size:1rem;line-height:1.7}
.faq-item details summary{list-style:none;cursor:pointer;padding:1.25rem 1.5rem;font-size:1.1rem;font-weight:600;color:var(--navy-corp);display:flex;justify-content:space-between;align-items:center}
.faq-item details summary::-webkit-details-marker{display:none}
.faq-item details summary:hover{color:var(--emerald)}
.faq-item details[open] summary{border-bottom:1px solid var(--border-card);margin-bottom:1rem;color:var(--emerald)}
.faq-item details .faq-content{padding:0 1.5rem 1.25rem;color:var(--text-muted)}

/* Footer */
.site-footer{background:var(--navy-corp);color:#E2E8F0;padding:4rem 0 2rem;margin-top:4rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:2.5rem;margin-bottom:3rem}
.footer-brand p{color:#94A3B8;font-size:.95rem;margin-top:1rem;line-height:1.6}
.footer-title{color:#FFFFFF;font-size:1.05rem;font-weight:700;margin-bottom:1.25rem}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links li{margin-bottom:.65rem}
.footer-links a{color:#94A3B8;font-size:.92rem;transition:color .2s}
.footer-links a:hover{color:var(--emerald);text-decoration:none}
.footer-bottom{border-top:1px solid #1E3A5F;padding-top:2rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;font-size:.85rem;color:#94A3B8}

/* Responsive */
@media (max-width:992px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero-content{max-width:100%;margin:0 auto}
  .btn-group{justify-content:center}
  .hero-stats{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
}
@media (max-width:768px){
  .site-nav{display:none;position:absolute;top:72px;left:0;right:0;background:#FFFFFF;border-bottom:1px solid var(--border-card);flex-direction:column;padding:1.5rem;gap:.75rem;box-shadow:var(--shadow-lg)}
  .site-nav.open{display:flex}
  .nav-toggle{display:block}
  .cards-grid-3,.cards-grid-4{grid-template-columns:1fr}
  .speed-metrics{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}

/* Contextual Links in Main Paragraphs */
main p a{font-weight:700;color:var(--emerald);text-decoration:underline;text-underline-offset:3px}
main p a:hover{color:var(--emerald-hover)}

/* Guarantees Bar */
.guarantees-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1.5rem 0 2.5rem;background:#FFFFFF;border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:1.25rem 1.5rem;box-shadow:var(--shadow-sm)}
.guarantee-item{display:flex;align-items:center;gap:.6rem;font-weight:600;color:var(--navy-corp);font-size:.92rem}
@media(max-width:860px){.guarantees-bar{grid-template-columns:1fr 1fr;gap:.75rem}}
@media(max-width:500px){.guarantees-bar{grid-template-columns:1fr}}

/* Bento Grid */
.bento-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem;margin:2rem 0}
.bento-card{background:#FFFFFF;border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.bento-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.bento-span-8{grid-column:span 8}
.bento-span-4{grid-column:span 4}
.bento-span-6{grid-column:span 6}
.bento-span-12{grid-column:span 12}
@media(max-width:860px){.bento-span-8,.bento-span-4,.bento-span-6{grid-column:span 12}}

/* Callouts & Steps */
.callout-box{background:var(--emerald-light);border-left:4px solid var(--emerald);padding:1.25rem 1.5rem;border-radius:0 var(--radius-md) var(--radius-md) 0;margin:1.5rem 0}
.callout-box p{margin-bottom:0;color:var(--navy-corp)}
.callout-box-sky{background:var(--sky-light);border-left-color:var(--sky)}
.callout-box-amber{background:var(--amber-light);border-left-color:var(--amber)}
.step-badge{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--emerald);color:#FFFFFF;font-weight:700;font-size:.95rem;margin-right:.5rem}

/* Calculator 2.0 */
.calc-grid-2col{display:grid;grid-template-columns:1.15fr 0.85fr;gap:2rem;align-items:stretch;margin:1.5rem 0}
@media(max-width:860px){.calc-grid-2col{grid-template-columns:1fr}}
.calc-slider{-webkit-appearance:none;width:100%;height:10px;border-radius:5px;background:#E2E8F0;outline:none;margin:1rem 0}
.calc-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:var(--emerald);cursor:pointer;border:3px solid #FFFFFF;box-shadow:0 2px 5px rgba(0,0,0,0.2)}
.calc-slider::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--emerald);cursor:pointer;border:3px solid #FFFFFF;box-shadow:0 2px 5px rgba(0,0,0,0.2)}
.stream-toggle-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin:1rem 0}
@media(max-width:520px){.stream-toggle-grid{grid-template-columns:1fr}}
.stream-toggle-card{display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;border:1.5px solid var(--border-card);border-radius:var(--radius-md);background:#FFFFFF;cursor:pointer;font-size:.9rem;font-weight:600;color:var(--navy-corp);transition:all .2s;user-select:none}
.stream-toggle-card input[type="checkbox"]{width:18px;height:18px;accent-color:var(--emerald);cursor:pointer}
.stream-toggle-card.active,.stream-toggle-card:has(input:checked){border-color:var(--emerald);background:#ECFDF5;color:#065F46}
.plan-pills-selector{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin:1rem 0}
.plan-pill-btn{padding:.75rem;border:1.5px solid var(--border-card);background:#FFFFFF;border-radius:var(--radius-md);font-weight:600;font-size:.85rem;color:var(--navy-corp);cursor:pointer;text-align:center;transition:all .2s}
.plan-pill-btn:hover{border-color:var(--emerald)}
.plan-pill-btn.active{border-color:var(--emerald);background:var(--emerald);color:#FFFFFF}
.calc-result-panel{background:linear-gradient(135deg,#0F2942 0%,#064E3B 100%);color:#FFFFFF;border-radius:var(--radius-lg);padding:2rem;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow-lg)}
.calc-bar-wrap{background:rgba(255,255,255,0.15);height:10px;border-radius:5px;overflow:hidden;margin:.4rem 0 1rem}
.calc-bar-red{background:#EF4444;height:100%;width:100%;border-radius:5px}
.calc-bar-green{background:#34D399;height:100%;width:6%;border-radius:5px;transition:width .3s}

/* Speedtest 2.0 */
.speed-progress-wrap{width:100%;height:8px;background:#E2E8F0;border-radius:4px;overflow:hidden;margin:1rem 0}
.speed-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#059669,#34D399);transition:width .3s ease}
.speed-metrics-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;width:100%;margin-top:1.5rem}
@media(max-width:768px){.speed-metrics-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.speed-metrics-4{grid-template-columns:1fr}}