.hp-hero[data-astro-cid-eowwwd66]{text-align:center;padding:3rem 1rem 2rem;max-width:860px;margin:0 auto}.hp-hero__badge[data-astro-cid-eowwwd66]{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:700;color:#00d2ff;background:#00d2ff1a;border:1px solid rgba(0,210,255,.25);border-radius:999px;padding:.35rem 1rem;margin-bottom:1.25rem;text-transform:uppercase;letter-spacing:.05em}.hp-badge-dot[data-astro-cid-eowwwd66]{width:8px;height:8px;background:#00d2ff;border-radius:50%;display:inline-block;box-shadow:0 0 8px #00d2ff}.hp-hero__title[data-astro-cid-eowwwd66]{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:900;color:#fff;letter-spacing:-.03em;line-height:1.15;margin-bottom:.5rem}.hp-hero__sub[data-astro-cid-eowwwd66]{font-size:1.15rem;font-weight:600;color:#6c63ff;margin-bottom:1rem}.hp-hero__desc[data-astro-cid-eowwwd66]{font-size:1.05rem;color:#f0f0f8bf;line-height:1.7;max-width:740px;margin:0 auto 2rem}.hp-stats[data-astro-cid-eowwwd66]{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem 1.5rem;margin-bottom:2.5rem}.hp-stat[data-astro-cid-eowwwd66]{text-align:center}.hp-stat__val[data-astro-cid-eowwwd66]{font-size:1.6rem;font-weight:800;display:block}.hp-stat__lbl[data-astro-cid-eowwwd66]{font-size:.75rem;text-transform:uppercase;color:rgba(240,240,248,.5 .hp-custom-calc {background: rgba(18,18,40,.85); border: 1px solid rgba(108,99,255,.35); border-radius: 24px; padding: 2rem; max-width: 760px; margin: 0 auto 2.5rem; backdrop-filter: blur(24px); box-shadow: 0 12px 40px rgba(0,0,0,.4); text-align: left;} .hp-calc-header {text-align: center; margin-bottom: 1.5rem;} .hp-calc-badge {display: inline-block; font-size: .75rem; font-weight: 800; text-transform: uppercase; color: #00D2FF; background: rgba(0,210,255,.1); border: 1px solid rgba(0,210,255,.25); border-radius: 999px; padding: .25rem .85rem; margin-bottom: .5rem;} .hp-calc-title {font-size: 1.6rem; font-weight: 800; color: #fff; margin-bottom: .3rem;} .hp-calc-sub {font-size: .85rem; color: rgba(240,240,248,.7);} .hp-calc-modes {display: flex; gap: .5rem; justify-content: center; margin-bottom: 1.25rem;} .hp-calc-mode-btn {background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: rgba(240,240,248,.7); padding: .45rem 1rem; border-radius: 999px; font-size: .8rem; font-weight: 700; cursor: pointer; transition: all .2s;} .hp-calc-mode-btn:hover {background: rgba(108,99,255,.15); color: #fff;} .hp-calc-mode-btn--active {background: rgba(108,99,255,.25); border-color: #6C63FF; color: #00D2FF; box-shadow: 0 0 12px rgba(108,99,255,.3);} .hp-calc-main-row {display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem;} @media (max-width: 640px) {.hp-calc-main-row {flex-direction: column;}} .hp-calc-field {flex: 1; width: 100%;} .hp-calc-label {display: block; font-size: .75rem; font-weight: 700; color: rgba(240,240,248,.7); margin-bottom: .4rem; text-transform: uppercase; letter-spacing: .05em;} .hp-input-with-tag {position: relative; display: flex; align-items: center;} .hp-calc-input {width: 100%; padding: .85rem 3rem .85rem 1rem; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); color: #fff; font-size: 1.25rem; font-weight: 800; outline: none; transition: border-color .2s;} .hp-calc-input:focus {border-color: #00D2FF;} .hp-input-tag {position: absolute; right: 1rem; font-size: .85rem; font-weight: 700; color: rgba(240,240,248,.5); pointer-events: none;} .hp-calc-swap-btn {background: rgba(108,99,255,.2); border: 1px solid rgba(108,99,255,.4); color: #00D2FF; border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .25s; flex-shrink: 0;} .hp-calc-swap-btn:hover {background: rgba(108,99,255,.4); transform: rotate(180deg);} .hp-calc-result-box {padding: .85rem 1rem; border-radius: 14px; background: rgba(0,210,255,.08); border: 1px solid rgba(0,210,255,.25); color: #00D2FF; font-size: 1.25rem; font-weight: 900; text-align: center; font-family: monospace;} .hp-calc-presets {display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(255,255,255,.08);} .hp-presets-label {font-size: .75rem; font-weight: 700; color: rgba(240,240,248,.5); margin-right: .3rem;} .hp-calc-preset-btn {background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: rgba(240,240,248,.7); font-size: .75rem; font-weight: 600; padding: .25rem .65rem; border-radius: 8px; cursor: pointer; transition: all .2s;} .hp-calc-preset-btn:hover {background: rgba(108,99,255,.2); border-color: rgba(108,99,255,.4); color: #fff;} .hp-calc-breakdown {background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.25rem; font-size: .85rem;} .hp-breakdown-step {display: flex; align-items: center; gap: .4rem; color: rgba(240,240,248,.7);} .hp-breakdown-step--final {color: #fff;} .hp-bd-num {width: 20px; height: 20px; border-radius: 50%; background: rgba(108,99,255,.2); border: 1px solid rgba(108,99,255,.4); color: #00D2FF; font-size: .7rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;} .hp-breakdown-arrow {color: rgba(255,255,255,.3); font-weight: 700;} .hp-calc-action-row {display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;} .hp-calc-formula-tag {font-family: monospace; font-size: .85rem; color: rgba(240,240,248,.6);} .hp-calc-copy-btn {display: inline-flex; align-items: center; gap: .4rem; background: rgba(108,99,255,.15); border: 1px solid rgba(108,99,255,.35); color: #00D2FF; padding: .45rem .9rem; border-radius: 8px; font-size: .8rem; font-weight: 700; cursor: pointer; transition: all .2s;} .hp-calc-copy-btn:hover {background: rgba(108,99,255,.3); color: #fff;} .hp-jumplinks {display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 2rem;} .hp-jumplink {font-size: .8rem; font-weight: 600; color: rgba(240,240,248,.7); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); padding: .35rem .85rem; border-radius: 999px; text-decoration: none; transition: all .2s;} .hp-jumplink:hover {color: #00D2FF; border-color: rgba(0,210,255,.4); background: rgba(0,210,255,.08);} .hp-sections {display: flex; flex-direction: column; gap: 2.5rem; max-width: 1080px; margin: 0 auto; padding: 0 1rem 5rem;} .hp-card {background: rgba(18,18,40,.7); border: 1px solid rgba(108,99,255,.18); border-radius: 24px; padding: 2.5rem; backdrop-filter: blur(28px); box-shadow: 0 8px 40px rgba(0,0,0,.35);} .hp-card__label {font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6C63FF; margin-bottom: .5rem;} .hp-card__title {font-size: clamp(1.4rem,3vw,2rem); font-weight: 800; color: #ffffff; margin-bottom: .85rem;} .hp-card__subtitle {font-size: .95rem; color: rgba(240,240,248,.7); line-height: 1.6; margin-bottom: 1.5rem;} .hp-two-col {display: grid; grid-template-columns: 1fr; gap: 2rem;} @media (min-width: 768px) {.hp-two-col {grid-template-columns: 1fr 1fr;}} .hp-prose p {font-size: .95rem; color: rgba(240,240,248,.8); line-height: 1.75; margin-bottom: 1rem;} .hp-prose strong {color: #ffffff;} .hp-diagram {background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem;} .hp-diagram__title {font-size: .8rem; font-weight: 700; text-transform: uppercase; color: rgba(240,240,248,.7);} .hp-bars {display: flex; flex-direction: column; gap: .85rem;} .hp-bar-row {display: grid; grid-template-columns: 130px 1fr 80px; align-items: center; gap: .75rem;} .hp-bar-label {font-size: .8rem; font-weight: 600; color: rgba(240,240,248,.7); white-space: nowrap;} .hp-bar-track {height: 18px; background: rgba(255,255,255,.05); border-radius: 9px; overflow: hidden;} .hp-bar-fill {height: 100%; border-radius: 9px;} .hp-bar-val {font-size: .8rem; font-weight: 700; text-align: right;} .hp-diff-pill {font-size: .8rem; font-weight: 600; color: #00D2FF; background: rgba(0,210,255,.08); border: 1px solid rgba(0,210,255,.25); border-radius: 999px; padding: .35rem .85rem; display: inline-flex; align-self: flex-start;} .hp-formula-card {background: rgba(108,99,255,.1); border: 1px solid rgba(108,99,255,.3); border-radius: 16px; padding: 1.5rem; text-align: center;} .hp-formula-line {font-size: clamp(1rem,2.5vw,1.4rem); font-weight: 800; color: #ffffff; font-family: monospace; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;} .hp-formula-var {color: #00D2FF;} .hp-formula-num {color: #10B981;} .hp-formula-op {color: rgba(255,255,255,.6);} .hp-formula-grid {display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1rem;} .hp-step-card {background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 1.25rem;} .hp-step-num {font-size: .75rem; font-weight: 800; color: #6C63FF; text-transform: uppercase; margin-bottom: .4rem;} .hp-step-card h3 {font-size: .95rem; font-weight: 700; color: #fff; margin-bottom: .35rem;} .hp-step-card p {font-size: .85rem; color: rgba(240,240,248,.7); line-height: 1.5;} .hp-examples-grid {display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 1rem;} .hp-example-card {background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 1.35rem;} .hp-example-header {display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem;} .hp-example-tag {font-size: .7rem; font-weight: 800; color: #00D2FF; background: rgba(0,210,255,.1); padding: .2rem .5rem; border-radius: 6px;} .hp-example-card h4 {font-size: .95rem; font-weight: 700; color: #fff;} .hp-example-calc {font-size: .95rem; color: #00D2FF; margin-bottom: .4rem;} .hp-example-note {font-size: .8rem; color: rgba(240,240,248,.6);} .hp-table-controls {margin-bottom: 1rem;} .hp-search-input {width: 100%; max-width: 320px; padding: .65rem 1rem; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #fff; font-size: .9rem; outline: none;} .hp-table-wrap {overflow-x: auto; border-radius: 14px; border: 1px solid rgba(255,255,255,.08);} .hp-table {width: 100%; border-collapse: collapse; text-align: left; font-size: .9rem;} .hp-table th {background: rgba(255,255,255,.04); color: rgba(240,240,248,.8); font-weight: 700; padding: .85rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08);} .hp-table td {padding: .75rem 1rem; border-bottom: 1px solid rgba(255,255,255,.04); color: rgba(240,240,248,.75);} .hp-td-bold {color: #fff;} .hp-td-accent {color: #00D2FF; font-weight: 700;} .hp-th-copy,.hp-td-copy {width: 50px; text-align: center;} .hp-copy-btn {background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: rgba(240,240,248,.7); border-radius: 6px; padding: .35rem .5rem; cursor: pointer; transition: all .2s;} .hp-copy-btn:hover {background: #6C63FF; color: #fff;} .hp-copy-toast {display: none; position: fixed; bottom: 2rem; right: 2rem; background: #10B981; color: #fff; font-weight: 700; font-size: .85rem; padding: .75rem 1.25rem; border-radius: 10px; z-index: 100; box-shadow: 0 4px 15px rgba(0,0,0,.3);} .hp-frac-grid {display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: .75rem;} .hp-frac-card {background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: .85rem; text-align: center;} .hp-frac-name {display: block; font-weight: 800; color: #fff; font-size: .95rem;} .hp-frac-eq {font-size: .75rem; color: rgba(255,255,255,.4); margin: .2rem 0; display: block;} .hp-frac-val {display: block; font-weight: 800; color: #00D2FF; font-size: .95rem;} .hp-frac-sub {display: block; font-size: .75rem; color: rgba(240,240,248,.5); margin-top: .2rem;} .hp-benchmarks-grid {display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 1rem;} .hp-benchmark-card {background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 1.25rem; display: flex; align-items: center; gap: 1rem;} .hp-bench-icon {font-size: 1.8rem;} .hp-bench-info {flex: 1;} .hp-bench-info h4 {font-size: .95rem; font-weight: 700; color: #fff; margin-bottom: .25rem;} .hp-bench-info p {font-size: .8rem; color: rgba(240,240,248,.6); line-height: 1.4;} .hp-bench-stat {text-align: right;} .hp-bench-yd {display: block; font-size: .75rem; color: rgba(240,240,248,.5); font-weight: 600;} .hp-bench-km {display: block; font-size: .95rem; font-weight: 800; color: #00D2FF;} .hp-app-grid {display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 1.25rem;} .hp-app-card {background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 1.5rem; display: flex; flex-direction: column;} .hp-app-card__icon {font-size: 1.8rem; margin-bottom: .75rem;} .hp-app-card__title {font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: .5rem;} .hp-app-card__desc {font-size: .85rem; color: rgba(240,240,248,.7); line-height: 1.6; flex: 1; margin-bottom: 1rem;} .hp-app-card__stat {font-size: .75rem; font-weight: 700; color: #6C63FF; background: rgba(108,99,255,.1); border: 1px solid rgba(108,99,255,.25); border-radius: 6px; padding: .3rem .6rem; align-self: flex-start;} .hp-related-grid {display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: .85rem;} .hp-related-card {background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 1rem; text-decoration: none; display: flex; align-items: center; gap: .75rem; transition: all .2s;} .hp-related-card:hover {background: rgba(108,99,255,.1); border-color: rgba(108,99,255,.3); transform: translateY(-2px);} .hp-related-card__icon {font-size: 1.3rem;} .hp-related-card__label {font-size: .85rem; font-weight: 700; color: #fff; flex: 1;} .hp-related-card__val {font-size: .75rem; color: #00D2FF; font-family: monospace; display: none;} @media (min-width: 480px) {.hp-related-card__val {display: inline;}} .hp-related-card__arrow {color: rgba(255,255,255,.4); font-weight: 700;})}