@font-face {
    font-family: "Barlow Condensed";
    src: url("../fonts/BarlowCondensed-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
:root {
    --accent: #ffb21a;
    --accent-hover: #ffc149;
    --accent-soft: #2e2510;
    --page: #0e1013;
    --surface: #15181d;
    --sunken: #1e2228;
    --paper: #f2f3f5;
    --text: #f2f3f5;
    --secondary: #c9cdd3;
    --muted: #8c929b;
    --dark-muted: #636973;
    --border: #353b44;
    --border-subtle: #252a31;
    --error: #ff5a4f;
    --success-soft: #11281b;
    --heading-font: "Barlow Condensed", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--page); color: var(--text); font-family: "Inter", sans-serif; font-size: 15px; line-height: 24px; letter-spacing: -0.09px; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol, ul, dl, dd, figure, fieldset { margin: 0; }
h1, h2, h3 { font-family: var(--heading-font); font-weight: 600; }
h1 { font-size: 54px; line-height: 54px; text-transform: uppercase; letter-spacing: 0; }
h2 { font-size: 42px; line-height: 42px; text-transform: uppercase; letter-spacing: 0.21px; }
h3 { font-size: 27px; line-height: 30px; letter-spacing: 0.135px; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a, input, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button, fieldset { border: 0; padding: 0; }
img { display: block; }
button, a, input, summary { outline-offset: 5px; }
:focus-visible { outline: 2px solid var(--accent); }
[hidden] { display: none !important; }
hr { border: 0; width: 100%; height: 1px; margin: 0; background: var(--border-subtle); }
.container { width: calc(100% - 80px); max-width: 1200px; margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 10; top: 12px; left: 12px; padding: 12px 20px; background: var(--accent); color: var(--page); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 56px; padding: 18px 32px; border-radius: 3px; font-family: var(--heading-font); font-size: 18px; font-weight: 600; line-height: 20px; letter-spacing: 0.72px; text-align: center; text-transform: uppercase; transition: background-color 160ms, color 160ms, box-shadow 160ms; }
.button--primary { color: var(--page); background: var(--accent); }
.button--primary:hover { background: var(--accent-hover); }
.button--secondary { color: var(--text); background: var(--page); box-shadow: inset 0 0 0 1px var(--border); }
.button--secondary:hover { background: var(--sunken); box-shadow: inset 0 0 0 1px var(--muted); }
.button--text { min-height: 42px; padding: 12px 22px; color: var(--accent); background: transparent; font-size: 16px; line-height: 18px; letter-spacing: 0.64px; }
.button--text:hover { background: var(--accent-soft); }
.brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand__emblem { display: flex; align-items: flex-end; justify-content: space-between; width: 30px; height: 30px; }
.brand__emblem span { width: 8px; background: var(--accent); }
.brand__emblem span:nth-child(1) { height: 16px; }
.brand__emblem span:nth-child(2) { height: 23px; }
.brand__emblem span:nth-child(3) { height: 30px; }
.brand__text { display: flex; flex-direction: column; gap: 3px; white-space: nowrap; }
.brand__text strong { font-family: var(--heading-font); font-size: 24px; font-weight: 600; line-height: 24px; letter-spacing: 1.2px; }
.brand__text > span { font-size: 9.5px; font-weight: 600; line-height: 16px; letter-spacing: 2.66px; color: var(--muted); }
.header { border-bottom: 1px solid var(--border-subtle); }
.header__inner { display: flex; align-items: center; justify-content: space-between; padding-block: 22px; }
.header__actions { display: flex; align-items: center; gap: 40px; }
.header nav { display: flex; align-items: center; gap: 36px; color: var(--secondary); }
.header nav a:hover { color: var(--accent); }
.header .button { min-height: 42px; padding: 12px 22px; font-size: 16px; line-height: 18px; letter-spacing: 0.64px; }
.hero { position: relative; overflow: hidden; height: 720px; }
.hero__background { position: absolute; top: 0; bottom: 0; left: calc(50% - 280px); width: 1500px; }
.hero__background img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, #0e1013 0%, #0e1013 34%, rgb(14 16 19 / 70%) 50%, rgb(14 16 19 / 15%) 68%, rgb(14 16 19 / 0%) 100%); }
.hero__inner { height: 100%; display: flex; align-items: flex-end; padding-bottom: 88px; position: relative; }
.hero__text { display: flex; flex-direction: column; gap: 20px; width: 640px; max-width: 100%; }
.hero__text > p { max-width: 560px; font-size: 20px; font-weight: 300; line-height: 30px; letter-spacing: -0.3px; color: var(--secondary); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.stats { background: var(--surface); }
.stats__inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1264px; width: calc(100% - 112px); margin-inline: auto; padding-block: 40px; }
.stat { display: flex; flex-direction: column; gap: 6px; padding: 4px 32px; }
.stat + .stat { border-left: 1px solid var(--border); }
.stat strong { font-family: var(--heading-font); font-size: 54px; font-weight: 600; line-height: 54px; text-transform: uppercase; color: var(--accent); }
.stat span { font-size: 13.5px; line-height: 20px; letter-spacing: -0.0405px; color: var(--muted); }
.section-heading { display: flex; flex-direction: column; gap: 18px; }
.section-heading > p { font-size: 20px; font-weight: 300; line-height: 30px; letter-spacing: -0.3px; color: var(--muted); }
.process-section { background: var(--surface); padding-block: 104px; }
.process-layout { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 80px; }
.process-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; list-style: none; padding: 0; }
.process-steps li { display: flex; flex-direction: column; gap: 28px; min-height: 183px; border: 1px solid var(--border); padding: 31px 31px 35px; }
.process-step__line { height: 3px; width: 40px; background: var(--accent); }
.process-steps li > div { display: flex; flex-direction: column; gap: 12px; }
.process-steps h3 { color: var(--accent); font-size: 21px; line-height: 24px; letter-spacing: 0.105px; }
.process-steps p { color: var(--muted); }
.order-section { padding-block: 104px; background: var(--paper); color: var(--page); }
.order-layout { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 460px); justify-content: space-between; align-items: start; gap: 60px; }
.order-intro { display: flex; flex-direction: column; gap: 36px; }
.order-intro .section-heading > p { color: var(--dark-muted); }
.facts { display: flex; flex-direction: column; gap: 18px; list-style: none; padding: 0; color: var(--dark-muted); }
.facts li { display: flex; align-items: flex-start; gap: 14px; }
.facts img { flex-shrink: 0; }
.order-card { min-width: 0; background: var(--page); color: var(--text); padding: 44px 20px 20px; display: flex; flex-direction: column; gap: 32px; }
.stepper { display: flex; flex-direction: column; gap: 12px; }
.stepper__header { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0; color: var(--muted); }
.stepper__header > span:first-child { color: var(--accent); }
.stepper__bars { display: flex; gap: 6px; padding: 0; list-style: none; }
.stepper__bars li { position: relative; height: 3px; flex: 1; background: var(--border); }
.stepper__bars .is-complete { background: var(--text); }
.stepper__bars .is-current::before { content: ""; display: block; height: 100%; width: min(72px, 100%); background: var(--accent); }
.card-content { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.card-content > .button, .card-actions > .button { width: 100%; }
.card-heading { display: flex; flex-direction: column; gap: 10px; }
.card-heading p { color: var(--muted); }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field > span:first-child { color: var(--muted); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0; }
.field input { width: 100%; height: 56px; min-width: 0; border: 0; border-bottom: 2px solid var(--border); border-radius: 0; padding: 12px 16px 10px; color: var(--text); background: var(--sunken); font-size: 20px; font-weight: 300; line-height: 30px; letter-spacing: -0.3px; }
.field input::placeholder { opacity: 1; color: var(--muted); }
.field input:focus { border-bottom-color: var(--accent); outline: 0; box-shadow: inset 0 0 0 1px var(--accent); }
.field--error input { border-bottom-color: var(--error); }
.field__hint { font-size: 12.5px; line-height: 18px; letter-spacing: 0; color: var(--error); }
.footnote { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 18px; letter-spacing: 0; color: var(--muted); }
.footnote img { flex-shrink: 0; }
.waiting { padding-block: 8px; }
.waiting__row { display: flex; align-items: center; gap: 20px; }
.indicator { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 3px; flex-shrink: 0; }
.indicator--pending { background: var(--accent-soft); }
.indicator--success { background: var(--success-soft); }
.waiting__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.waiting__text > p { color: var(--muted); }
.loader { animation: spin 1.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.status { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0; color: var(--secondary); }
.summary-data { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; min-width: 0; }
.summary-data > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.summary-data dt, .summary-amounts dt { color: var(--muted); }
.summary-data dd { font-weight: 500; letter-spacing: -0.12px; overflow-wrap: anywhere; }
.summary-amounts { display: flex; flex-direction: column; gap: 10px; }
.summary-amounts > div { display: flex; justify-content: space-between; gap: 24px; }
.summary-amounts dd { font-weight: 500; letter-spacing: -0.12px; text-align: right; flex-shrink: 0; }
.order-summary { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.card-actions { display: flex; flex-direction: column; gap: 12px; }
.option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.option--wide { grid-column: 1 / -1; }
.option { position: relative; display: flex; align-items: center; gap: 16px; min-width: 0; min-height: 52px; padding: 14px 12px 14px 16px; cursor: pointer; box-shadow: inset 0 -1px var(--border-subtle); }
.option > input, .payment-method > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.option__name { flex: 1; min-width: 0; font-weight: 500; letter-spacing: -0.12px; }
.option__price { font-size: 13.5px; font-weight: 500; line-height: 20px; letter-spacing: -0.0405px; color: var(--muted); white-space: nowrap; }
.checkbox { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1.5px solid var(--dark-muted); border-radius: 2px; flex-shrink: 0; }
.checkbox img { visibility: hidden; }
.option:has(input:checked), .payment-method:has(input:checked) { background: var(--accent-soft); box-shadow: none; }
.option input:checked ~ .option__price { color: var(--accent); }
.option input:checked ~ .checkbox { background: var(--accent); border-color: var(--accent); }
.option input:checked ~ .checkbox img { visibility: visible; }
.option:has(input:focus-visible), .payment-method:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.option:hover, .payment-method:hover { background-color: var(--sunken); }
.total { display: flex; align-items: center; justify-content: space-between; gap: 24px; font-family: var(--heading-font); font-weight: 600; }
.total strong { font-size: 21px; line-height: 24px; font-weight: 600; letter-spacing: 0.105px; }
.total > span { font-size: 42px; line-height: 44px; letter-spacing: 0; }
.payment-methods { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.payment-methods legend { padding: 0; margin-bottom: 12px; font-weight: 500; letter-spacing: -0.12px; }
.payment-method { display: flex; align-items: center; gap: 14px; position: relative; min-height: 60px; padding: 18px 16px; cursor: pointer; box-shadow: inset 0 -1px var(--border-subtle); }
.payment-method > span:nth-last-child(2) { flex: 1; font-weight: 500; }
.radio { width: 22px; height: 22px; border: 1.5px solid var(--dark-muted); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.payment-method input:checked + .radio { border-color: var(--accent); }
.payment-method input:checked + .radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.payment-feedback { padding: 14px 16px; border: 1px solid var(--border); color: var(--secondary); }
.done-panel { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-block: 8px; text-align: center; }
.done-panel > p:not(.status) { color: var(--muted); }
.faq-section { padding-block: 104px 120px; }
.faq-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 80px; align-items: start; }
.faq-item { border-bottom: 1px solid var(--border); padding-block: 27.5px; }
.faq-item summary { display: flex; align-items: center; gap: 24px; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { flex: 1; min-width: 0; }
.faq-icon { flex-shrink: 0; }
.faq-icon__minus, .faq-item[open] .faq-icon__plus { display: none; }
.faq-item[open] .faq-icon__minus { display: block; }
.faq-item > p { margin-top: 12px; padding-right: 64px; color: var(--muted); }
.footer { background: var(--paper); color: var(--page); padding-block: 72px 40px; }
.footer__inner { display: flex; flex-direction: column; gap: 40px; }
.footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.footer__brand { display: flex; flex-direction: column; gap: 20px; width: 360px; }
.footer__brand > p { color: var(--dark-muted); font-size: 13.5px; line-height: 20px; letter-spacing: -0.0405px; }
.footer .brand__text > span { color: var(--dark-muted); }
.footer__column { display: flex; flex-direction: column; gap: 14px; font-size: 13.5px; line-height: 20px; letter-spacing: -0.0405px; }
.footer__column > h2 { font-family: "Inter", sans-serif; font-size: 12px; line-height: 16px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); }
.footer__column a:hover { text-decoration: underline; }
.footer hr { background: #d8dbe0; }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 12.5px; line-height: 18px; letter-spacing: 0; color: var(--muted); }
.footer__bottom button { color: var(--dark-muted); background: transparent; font-size: inherit; line-height: inherit; }
.privacy-dialog { width: min(520px, calc(100% - 40px)); padding: 32px; border: 1px solid var(--border); background: var(--page); color: var(--text); }
.privacy-dialog::backdrop { background: rgb(0 0 0 / 70%); }
.privacy-dialog__heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 24px; }
.privacy-dialog__heading h2 { font-size: 32px; line-height: 36px; }
.privacy-dialog__heading button { min-width: 36px; height: 36px; font-size: 28px; color: var(--text); background: var(--sunken); }
.privacy-dialog > p { color: var(--secondary); }
.privacy-dialog a { color: var(--accent); }
.order-page { background: var(--paper); }
.order-page .order-section { min-height: 100vh; }
.directory { padding-block: 72px; }
.directory__heading { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 48px; }
.directory__heading > p:last-child { color: var(--muted); }
.eyebrow { color: var(--accent); font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; }
.page-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.page-link { display: flex; flex-direction: column; gap: 16px; padding: 28px; border: 1px solid var(--border); }
.page-link:hover { background: var(--surface); border-color: var(--accent); }
.page-link__number { color: var(--accent); font-family: var(--heading-font); font-size: 21px; }
.page-link h2 { font-size: 27px; line-height: 30px; text-transform: none; }
.page-link p { color: var(--muted); }
.page-link__action { margin-top: auto; color: var(--accent); font-size: 13px; }
@media (min-width: 1600px) {
    .hero__background { left: calc(50% - 280px); width: calc(50% + 780px); }
}
@media (max-width: 1199px) {
    .process-layout { grid-template-columns: 30% minmax(0, 1fr); gap: 48px; }
    .order-layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; }
    .faq-layout { grid-template-columns: 30% minmax(0, 1fr); gap: 48px; }
    .summary-data { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero__text { width: 640px; }
    .stats__inner { width: calc(100% - 16px); }
    .stat { padding-inline: 32px; }
    .option-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .container { width: calc(100% - 48px); }
    .header__actions { gap: 28px; }
    .header nav { gap: 24px; }
    .hero { height: 620px; }
    .hero__background { left: 15%; width: 1300px; }
    .hero__overlay { background: linear-gradient(90deg, #0e1013 0%, rgb(14 16 19 / 85%) 36%, rgb(14 16 19 / 15%) 100%); }
    .hero__inner { padding-bottom: 64px; }
    .process-section, .order-section, .faq-section { padding-block: 72px; }
    .process-layout, .faq-layout { grid-template-columns: 1fr; gap: 40px; }
    .order-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 640px; }
    .order-intro { grid-row: 1; }
    .summary-data { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat { padding-inline: 20px; }
    .stats__inner { width: calc(100% - 8px); }
    .stat strong { font-size: 46px; line-height: 50px; }
    .footer__brand { width: 240px; }
    .footer__top { flex-wrap: wrap; gap: 40px 32px; }
    .footer__column:last-child { margin-left: auto; }
    .page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    h1 { font-size: 38px; line-height: 40px; }
    h2 { font-size: 36px; line-height: 38px; }
    .header__inner { padding-block: 18px; }
    .header nav { display: none; }
    .header .button { padding-inline: 18px; }
    .brand { gap: 10px; }
    .brand__text strong { font-size: 22px; }
    .brand__text > span { font-size: 8px; letter-spacing: 2.3px; }
    .hero { height: 610px; }
    .hero__background { top: 0; bottom: auto; left: calc(50% - 315px); width: 750px; height: 360px; }
    .hero__overlay { background: linear-gradient(180deg, rgb(14 16 19 / 10%) 0%, rgb(14 16 19 / 10%) 28%, rgb(14 16 19 / 50%) 50%, #0e1013 70%); }
    .hero__inner { padding-bottom: 48px; }
    .hero__text { gap: 18px; }
    .hero__text > p { font-size: 18px; line-height: 28px; max-width: 340px; }
    .hero__actions { margin-top: 10px; gap: 12px; }
    .hero__actions .button { padding-inline: 24px; }
    .stats__inner { width: calc(100% - 48px); padding-block: 28px; gap: 20px; grid-template-columns: 1fr; }
    .stat { padding: 0; }
    .stat + .stat { border-left: 0; border-top: 1px solid var(--border); padding-top: 20px; }
    .stat strong { font-size: 42px; line-height: 44px; }
    .process-section, .order-section, .faq-section { padding-block: 56px; }
    .process-steps { grid-template-columns: 1fr; gap: 16px; }
    .process-steps li { min-height: 0; padding: 27px; gap: 22px; }
    .order-intro { gap: 28px; }
    .order-card { padding: 28px 20px 20px; gap: 28px; }
    .summary-data { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
    .summary-data dd { font-size: 14px; }
    .option-grid { grid-template-columns: 1fr; }
    .option { padding-inline: 12px; gap: 12px; }
    .waiting__row { align-items: flex-start; gap: 16px; }
    .waiting__text h3 { font-size: 25px; line-height: 28px; }
    .waiting__text > p { font-size: 14px; line-height: 22px; }
    .indicator { width: 60px; height: 60px; }
    .faq-item { padding-block: 24px; }
    .faq-item summary { gap: 18px; }
    .faq-item summary h3 { font-size: 25px; line-height: 28px; }
    .faq-item > p { padding-right: 0; }
    .footer { padding-block: 48px 32px; }
    .footer__top { display: grid; grid-template-columns: 1fr; gap: 32px; }
    .footer__brand { width: auto; }
    .footer__column:last-child { margin: 0; }
    .footer__bottom { flex-direction: column; align-items: flex-start; gap: 20px; }
    .page-grid { grid-template-columns: 1fr; }
    .directory { padding-block: 48px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .loader { animation: none; }
    .button { transition: none; }
}
