*,::after,::before{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-void);color:var(--text-primary);font-family:var(--font-body);overflow-x:hidden;min-height:100vh}.page-container{position:relative;z-index:10;max-width:var(--container-width);margin:0 auto;padding:0 var(--space-md,1rem)}.navbar{position:fixed;top:20px;left:50%;transform:translateX(-50%);width:auto;max-width:90%;z-index:1000;border-radius:var(--radius-pill);transition:transform .4s var(--ease-smooth),border-radius .4s var(--ease-smooth),top .4s var(--ease-smooth),max-width .4s var(--ease-smooth)}.nav-container{display:flex;align-items:center;justify-content:space-between;padding:12px 32px;gap:40px;background:rgba(10,10,20,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:var(--glass-border);border-radius:var(--radius-pill);box-shadow:0 10px 40px rgba(0,0,0,.4)}.nav-links{display:flex;gap:32px}.nav-link{color:var(--text-secondary);text-decoration:none;font-weight:500;font-size:var(--text-sm);transition:color .3s ease;position:relative;white-space:nowrap}.nav-link.active,.nav-link:hover{color:var(--text-primary)}.nav-link::after{content:'';position:absolute;bottom:-4px;left:50%;transform:translateX(-50%) scaleX(0);width:20px;height:2px;background:var(--accent-primary);transition:transform .3s ease}.nav-link:hover::after{transform:translateX(-50%) scaleX(1)}.nav-logo{font-family:var(--font-display);font-weight:800;font-size:var(--text-xl);text-decoration:none;color:#fff;letter-spacing:-.02em}.nav-toggle,.theme-toggle{background:0 0;border:none;color:var(--text-secondary);cursor:pointer;font-size:1.2rem;transition:color .3s}.theme-toggle:hover{color:var(--text-primary)}.nav-toggle{display:none}.hero,.hero-section{position:relative;padding:160px 0 80px;text-align:center;overflow:hidden}.hero-content{position:relative;z-index:20;max-width:800px;margin:0 auto}.hero-title{font-family:var(--font-display);font-size:clamp(3rem, 5vw, 5rem);font-weight:800;line-height:1.1;margin-bottom:24px;letter-spacing:-.03em;color:var(--text-primary)}.hero-subtitle{font-size:var(--text-lg);color:var(--text-secondary);max-width:600px;margin:0 auto 40px;line-height:1.6}.calc-card,.glass-panel{background:rgba(22,37,68,.6);border:1px solid rgba(245,158,11,.15);border-radius:20px;padding:2.5rem;backdrop-filter:blur(20px);box-shadow:0 4px 24px rgba(0,0,0,.2);transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease;height:100%}.calc-card:hover,.glass-panel:hover{border-color:rgba(245,158,11,.3);box-shadow:0 8px 32px rgba(0,0,0,.3);transform:translateY(-2px)}.calc-card h3,.glass-panel h3{font-family:var(--font-display);font-size:1.25rem;font-weight:600;color:#f8fafc;margin-bottom:1.5rem;display:flex;align-items:center;gap:.75rem}.amount-input,.year-select,input[type=email],input[type=number],input[type=text],select{width:100%;padding:.875rem 1rem;background:rgba(15,23,42,.6);border:1px solid rgba(255,255,255,.1);border-radius:10px;color:#f8fafc;font-family:var(--font-primary);font-size:1rem;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}input:focus,select:focus{outline:0;border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(245,158,11,.15);background:rgba(15,23,42,.9)}label{display:block;font-size:.875rem;font-weight:500;color:var(--text-secondary);margin-bottom:.5rem}.input-group{margin-bottom:1.5rem}.btn-primary,.calculate-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:1rem 1.5rem;background-color:var(--accent-primary);border:none;border-radius:10px;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease;box-shadow:0 4px 12px rgba(245,158,11,.3)}.btn-primary:hover,.calculate-btn:hover{background-color:#2563eb;transform:translateY(-1px);box-shadow:0 6px 16px rgba(245,158,11,.4)}.btn-secondary{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);color:var(--text-secondary);padding:.75rem 1.25rem;border-radius:10px;cursor:pointer;transition:background .2s ease,color .2s ease}.btn-secondary:hover{background:rgba(255,255,255,.1);color:#fff}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-top:2rem}.feature-card{background:rgba(22,37,68,.7);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:2rem;transition:border-color .3s ease,transform .3s ease}.feature-card:hover{border-color:rgba(245,158,11,.3);transform:translateY(-4px)}@media (max-width:768px){.navbar{top:0;left:0;width:100%;max-width:100%;border-radius:0;transform:none;border-top:none;border-left:none;border-right:none}.nav-container{border-radius:0;padding:1rem}.nav-links{display:none;position:absolute;top:100%;left:0;width:100%;background:var(--bg-void);flex-direction:column;padding:2rem;border-bottom:1px solid rgba(255,255,255,.1)}.nav-links.active{display:flex}.nav-toggle{display:block}.hero-title{font-size:2.5rem}.hero-section{padding-top:120px}}.hero{margin-top:100px;padding-top:4rem}.hero-section{padding-top:140px}.price-breakdown-section{animation:fadeInUp .5s ease-out}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.price-breakdown-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.price-card{background:rgba(15,23,42,.7);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:1.25rem;transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease;position:relative;overflow:hidden}.price-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary,#10b981));opacity:0;transition:opacity .3s}.price-card:hover{border-color:rgba(245,158,11,.3);transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.3)}.price-card:hover::before{opacity:1}.price-card-icon{font-size:1.75rem;margin-bottom:.5rem}.price-card-name{font-size:.9rem;font-weight:600;color:var(--text-primary,#f8fafc);margin-bottom:.75rem}.price-comparison{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.price-then{font-size:.85rem;color:#fbbf24;font-weight:500}.price-arrow{color:rgba(255,255,255,.3);font-size:.8rem}.price-now{font-size:1rem;font-weight:700;color:#f8fafc}.price-change-badge{display:inline-block;padding:.25rem .5rem;border-radius:6px;font-size:.75rem;font-weight:600}.price-change-badge.up{background:rgba(239,68,68,.2);color:#ef4444}.price-change-badge.down{background:rgba(34,197,94,.2);color:#22c55e}@media (max-width:900px){.price-breakdown-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:500px){.price-breakdown-grid{grid-template-columns:1fr}.price-card{padding:1rem}}

/*
 * WCAG 2.2 Focus Indicator Note:
 * The minified rules above set outline:0 on input:focus and select:focus, but ALSO provide
 * equivalent visual focus indicators via border-color:var(--accent-primary) and
 * box-shadow:0 0 0 3px rgba(245,158,11,.15). This satisfies WCAG 2.4.7 (Focus Visible).
 * Additionally, the *:focus-visible rule below provides a universal fallback outline.
 */

/* Focus-visible styles for keyboard navigation */
*:focus-visible {
    outline: 2px solid #f59e0b;
    outline-offset: 2px;
    border-radius: 4px;
}

a:focus-visible {
    outline-color: #06b6d4;
}

button:focus-visible,
[role="button"]:focus-visible {
    outline-color: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.3);
}

/* Skip to content link */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 10000;
    padding: 1rem 2rem;
    background: #f59e0b;
    color: #0f172a;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 8px 0;
}

.skip-to-content:focus {
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    overflow: visible;
}

/* Safe area insets for notch devices */
body {
    line-height: 1.5;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.navbar {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
}

/* Windows High Contrast Mode support */
@media (forced-colors: active) {
    .btn-primary, .calculate-btn {
        border: 2px solid ButtonText;
    }
    .nav-link::after {
        background: LinkText;
    }
    .glass-panel, .calc-card, .feature-card, .price-card {
        border: 1px solid CanvasText;
    }
    *:focus-visible {
        outline: 2px solid Highlight;
    }
}
