/* Premium presentation layer. Existing component and backend contracts remain intact. */
:root { --maxw:1200px; --radius:14px; --radius-lg:24px; --accent:#075cdd; --accent-bright:#004dbb; --brand:#2788ff; --paper:#fff; --surface-2:#f3f6fb; --line:#dce4ef; }
body { font-size:16px; }
.wrap { width:min(calc(100% - 40px),var(--maxw)); padding-inline:0; }
h1,h2,h3 { letter-spacing:-.045em; }
h2 { font-size:clamp(30px,4vw,48px); line-height:1.12; max-width:20ch; }
h3 { letter-spacing:-.025em; }
.section { padding-block:86px; }
.section-head { margin-bottom:36px; }
.section-head .lede { max-width:65ch; font-size:17px; }
.eyebrow { font-size:11px; letter-spacing:.17em; font-weight:750; }
.btn { min-height:48px; border-radius:9px; padding:12px 21px; font-size:14px; font-weight:650; transition:background .18s,box-shadow .18s; }
.btn-primary { box-shadow:0 5px 15px #075cdd18; }
.btn-lg { padding:16px 24px; }
.site-header { background:#071426; border-color:#22334b; color:#fff; }
.site-header .wrap { min-height:82px; gap:24px; }
.site-header .logo { color:#fff; font-size:19px; letter-spacing:-.035em; }
.site-header .nav a { color:#cbd8eb; font-size:13px; }
.site-header .nav a:hover { color:#fff; }
.site-header .theme-toggle { color:#d9e7fb; border-color:#34435a; background:transparent; min-width:44px; min-height:44px; }
.site-header .header-cta { background:#1671ee; color:white; border-color:#1671ee; font-size:12px; }
.menu-toggle { display:none; }
.hero { background:#071426; color:#fff; padding:62px 0 70px; overflow:hidden; }
.hero::before,.hero::after { display:none; }
.hero-grid { grid-template-columns:1fr 1.05fr; gap:20px; align-items:center; }
.hero h1 { font-size:clamp(54px,6.5vw,86px); line-height:1.01; max-width:10ch; font-weight:720; margin:20px 0 26px; }
.hero-accent { color:#65abff; }
.hero .eyebrow { color:#a7c9f9; }
.hero .lede { color:#c4d1e4; font-size:16px; line-height:1.75; max-width:44ch; }
.hero .btn-primary { background:#1671ee; color:#fff; border-color:#1671ee; }
.hero .btn-secondary { color:#e5edfa; background:transparent; border-color:#40506a; }
.hero .trust-strip { display:grid; gap:10px; margin-top:30px; color:#bdcee5; font-size:12px; border:0; padding:0; }
.hero .trust-strip svg { color:#78b7ff; width:16px; height:16px; }
.hero .trust-strip li { color:#bdcee5; font-size:12px; }
.hero-visual { margin:0; position:relative; min-width:0; }
.hero-visual img { width:100%; border-radius:28px; aspect-ratio:3/2; object-fit:cover; }
.hero-visual figcaption { color:#b1c0d6; font-size:11px; padding:14px 12px; display:flex; gap:12px; justify-content:space-between; }
.hero-visual figcaption span { opacity:.85; }
.hero-seal { position:absolute; bottom:72px; left:12px; border:1px solid #4c668b; border-radius:40px; padding:12px 18px; background:#0b1c32e8; font-size:12px; color:#e5eeff; }
.seal-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#6aafff; margin-right:8px; }
.legacy-device { position:absolute!important; width:0!important; height:0!important; overflow:hidden; }
#pricing { background:var(--surface-2); }
.configurator { display:grid; grid-template-columns:1.1fr .9fr; border:1px solid var(--line); border-radius:22px; overflow:hidden; background:var(--surface); box-shadow:0 20px 50px #0a244a08; }
.config-controls { padding:34px; min-width:0; }
.config-controls .field { max-width:none!important; margin-top:22px; }
.config-controls .selector { display:flex; flex-wrap:wrap; gap:8px; }
.chip { min-height:44px; border-radius:8px; font-size:13px; padding:9px 15px; }
.chip[aria-pressed="true"] { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.config-summary { background:#0c1e36; color:#fff; padding:34px; display:flex; flex-direction:column; justify-content:center; min-height:360px; }
.config-summary h3 { color:#fff; font-size:26px; margin:8px 0; }
.config-summary .eyebrow,.config-summary .dim { color:#bfcee3; }
.config-total { font-size:68px; line-height:1.1; letter-spacing:-.06em; font-weight:650; margin:18px 0 24px; }
.config-payments { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0 0 24px; }
.config-payments div { padding-top:16px; border-top:1px solid #3c4d66; }
.config-payments dt { font-size:12px; color:#bfcee3; }
.config-payments dd { margin:3px 0 0; font-size:24px; font-weight:650; }
.config-summary .btn { background:#1671ee; color:white; border-color:#1671ee; text-align:center; margin-top:12px; }
.config-summary .small { font-size:12px; line-height:1.65; }
.all-prices { margin-top:22px; border-bottom:1px solid var(--line); }
.all-prices summary { padding:16px 0; cursor:pointer; font-weight:650; min-height:48px; }
.price-table { font-size:14px; }
.price-table .part-thumb { width:38px; height:38px; }
#price-on-request h3 { font-size:18px; }
#how .journey { border-radius:20px; overflow:hidden; }
.step,.claim,.repair-card { border-radius:18px; }
.claim { padding:28px; background:var(--surface-2); border:1px solid var(--line); }
.claim-n { color:var(--accent); }
.pack-steps { gap:16px; }
.pack-steps li { border:1px solid var(--line); background:var(--surface); border-radius:16px; padding:24px; }
#contact { background:#0b1d35; color:#fff; }
#contact h2 { margin-inline:auto; }
#contact .lede,#contact .dim { color:#c2d1e6; }
#contact .eyebrow { color:#86baff; }
#contact .btn-secondary { color:#fff; border-color:#5a6f8d; background:transparent; }
.site-footer { background:#071426; color:#c2d1e6; padding-top:50px; }
.site-footer .logo,.site-footer h3 { color:#fff; }
.site-footer a,.site-footer .muted,.site-footer .dim { color:#c2d1e6; }
.site-footer a { display:inline-flex; min-height:32px; align-items:center; }
.site-footer .footer-bottom { border-color:#2e4059; }
.booking-wrap { max-width:860px; }
.page-quote { background:var(--surface-2); }
.booking-intro { text-align:center; margin:0 auto 32px; }
.booking-intro h1 { font-size:clamp(28px,4vw,44px); line-height:1.15; }
.booking-intro .eyebrow { color:var(--accent); }
.booking-intro>p:last-child { color:var(--ink-2); margin-top:12px; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:32px; box-shadow:0 10px 40px #14243c05; }
.panel h2 { font-size:30px; }
.panel .lede { font-size:16px; }
.panel .btn-row { margin-top:28px; justify-content:space-between; }
.stepper { margin-bottom:28px; }
.stepper li { font-size:12px; }
.field input,.field select,.field textarea { min-height:50px; border-radius:9px; font-size:16px; }
.field>span { font-size:11px; letter-spacing:.09em; }
.repair-option { border-radius:12px; padding:18px; }
.repair-option:has(input:checked),.check-item:has(input:checked) { border-color:var(--accent); background:var(--accent-wash); }
.check-item { padding:16px; border:1px solid var(--line); border-radius:10px; }
.booking-summary { position:sticky; top:82px; z-index:8; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 20px; margin-bottom:22px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; box-shadow:var(--shadow-sm); font-size:13px; }
.booking-summary strong { color:var(--accent); }
.page-status main,.page-success main,.page-policies main { min-height:65vh; }
:root[data-theme="dark"] { --accent:#74b4ff; --accent-bright:#a3ceff; --accent-ink:#071426; --paper:#091426; --surface:#102039; --surface-2:#0b192c; --ink:#f0f5ff; --ink-2:#b9c8dd; --ink-3:#a5b7d0; --line:#30415b; }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) { --accent:#74b4ff; --accent-bright:#a3ceff; --accent-ink:#071426; --paper:#091426; --surface:#102039; --surface-2:#0b192c; --ink:#f0f5ff; --ink-2:#b9c8dd; --ink-3:#a5b7d0; --line:#30415b; } }
@media(max-width:1000px) {
 .site-header .wrap { gap:12px; flex-wrap:wrap; min-height:72px; }
 .site-header .logo { margin-right:auto; }
 .site-header .header-cta { display:none; }
 .menu-toggle { display:flex; align-items:center; gap:8px; min-height:44px; border:1px solid #425674; border-radius:8px; color:white; background:transparent; padding:8px 12px; font:inherit; font-size:13px; }
 .site-header .nav { display:none; width:100%; order:5; padding:8px 0 18px; flex-wrap:wrap; gap:8px 22px; }
 .site-header .nav.is-open { display:flex; }
 .site-header .nav a { padding:12px 0; }
 .booking-summary { top:72px; }
}
@media(max-width:700px) {
 .wrap { width:calc(100% - 36px); }
 .section { padding-block:54px; }
 .hero { padding:36px 0 28px; }
 .hero-grid { grid-template-columns:1fr; gap:22px; }
 .hero h1 { font-size:clamp(43px,12vw,64px); max-width:none; }
 .hero .btn-row { gap:10px; }
 .hero .btn { font-size:12px; padding:14px 17px; }
 .hero .trust-strip { margin-top:22px; }
 .hero-visual { max-width:500px; margin-inline:auto; width:100%; }
 .hero-visual img { border-radius:16px; }
 .hero-visual figcaption { font-size:10px; padding-inline:0; }
 .hero-seal { bottom:56px; padding:8px 12px; font-size:11px; }
 .configurator { grid-template-columns:1fr; }
 .config-controls,.config-summary { padding:24px; }
 .config-total { font-size:58px; }
 .config-summary { min-height:320px; }
 .chip { padding:8px 11px; }
 .panel { padding:22px 18px; }
 .booking-intro { margin-bottom:24px; }
 .stepper { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
 .stepper li { white-space:normal; }
 .stepper li::after { display:none; }
 .repair-option { flex-wrap:wrap; padding:15px; }
 .repair-option .ro-price { margin-left:auto; }
 .booking-summary { padding:12px 14px; font-size:12px; }
 .claim { padding:22px; }
 .site-header .logo { font-size:16px; gap:7px; }
 .site-header .logo-mark { width:28px; height:28px; }
 .site-header .wrap { gap:8px; }
 .menu-toggle { padding:8px; }
 .page-index .site-header .theme-toggle { margin-left:0; }
 .page-index .site-header .logo { font-size:14px; }
 .page-index .site-header .wrap { gap:6px; }
 .page-quote .site-header .header-cta,.page-status .site-header .header-cta,.page-success .site-header .header-cta,.page-policies .site-header .header-cta { display:inline-flex; font-size:11px; padding:8px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
@media print { .menu-toggle,.booking-summary { display:none; } .hero,.site-header,.site-footer,#contact { background:white; color:black; } }

/* Detailed, responsive repair journey */
#how.process-section{background:#0b1729;color:#edf5ff;padding-block:clamp(56px,8vw,104px)}
.process-heading{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:end;margin-bottom:40px}.process-heading h2{font-size:clamp(32px,4vw,52px);line-height:1.12;letter-spacing:-.04em;margin:12px 0 0}.process-heading h2 span{color:#8dbdff}.process-heading .lede{color:#b5c5d9;font-size:16px;max-width:420px;margin:0}.process-section .eyebrow{color:#69b4ff}
.process-cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.process-card{border:1px solid #2a3b52;border-radius:22px;overflow:hidden;background:linear-gradient(145deg,#14253c,#101d30);min-width:0}.process-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:20px 22px 0;color:#aac0d9;font-size:11px;letter-spacing:.04em}.process-number{display:grid;place-items:center;border:1px solid #365471;border-radius:50%;width:30px;height:30px;color:#80bfff;font-family:var(--mono)}.process-scene{aspect-ratio:360/280;overflow:hidden}.process-art{display:block;width:100%;height:100%}.process-copy{padding:0 25px 27px}.process-copy h3{font-size:24px;letter-spacing:-.03em;margin:0 0 10px}.process-copy p{color:#b6c6d9;font-size:14px;line-height:1.75;min-height:98px;margin:0 0 20px}.process-badge{display:inline-flex;gap:8px;align-items:center;border-top:1px solid #2a3b52;padding-top:16px;width:100%;color:#b5d3f3;font-size:12px}.process-badge>span{color:#74dfbd}
.process-bottom{margin-top:32px;display:flex;gap:24px;align-items:center;justify-content:space-between;border:1px solid #2a3b52;border-radius:18px;padding:25px;background:#0e1d32}.process-bottom .eyebrow{font-size:10px;margin:0 0 15px}.process-timeline{display:flex;flex-wrap:wrap;gap:12px 23px;padding:0;list-style:none;counter-reset:repair;margin:0}.process-timeline li{counter-increment:repair;color:#c2d0e1;font-size:12px}.process-timeline li::before{content:counter(repair,decimal-leading-zero);color:#5faaff;margin-right:7px;font-family:var(--mono)}.process-bottom .btn{flex-shrink:0}.process-note{font-size:11px;color:#95abc5;margin:18px 0 0;line-height:1.6}
.process-pack-phone{animation:process-pack 7s ease-in-out infinite}.process-panel{animation:process-panel 7s ease-in-out infinite}.process-scan{animation:process-scan 7s ease-in-out infinite}.process-return-phone{animation:process-float 7s ease-in-out infinite}.process-check{stroke-dasharray:36;animation:process-check 7s ease-in-out infinite}.process-spark{animation:process-spark 7s ease-in-out infinite}
@keyframes process-pack{0%,100%{transform:translateY(-13px)}45%,65%{transform:translateY(35px)}}
@keyframes process-panel{0%,100%{transform:translate(29px,-25px);opacity:.75}42%,72%{transform:translate(0,0);opacity:1}}
@keyframes process-scan{0%,35%,85%,100%{opacity:0;transform:translateY(0)}45%{opacity:.85;transform:translateY(0)}75%{opacity:.85;transform:translateY(85px)}}
@keyframes process-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes process-check{0%,15%,100%{stroke-dashoffset:36;opacity:0}35%,85%{stroke-dashoffset:0;opacity:1}}
@keyframes process-spark{0%,100%{opacity:.3}50%{opacity:1}}
@media(max-width:1000px){.process-bottom{align-items:flex-start;flex-direction:column}.process-card-top{padding:16px 14px 0;font-size:10px}.process-copy{padding:0 18px 22px}.process-copy p{min-height:125px}}
@media(max-width:759px){.process-heading{grid-template-columns:1fr;gap:20px;margin-bottom:28px}.process-cards{grid-template-columns:1fr;gap:18px}.process-card-top{padding:20px 22px 0;font-size:12px}.process-scene{max-width:400px;margin:auto;width:100%}.process-copy{padding:0 25px 25px}.process-copy p{min-height:0}.process-timeline{display:grid;gap:12px}.process-bottom{padding:23px}.process-bottom .btn{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.process-art *{animation:none!important}.process-check{stroke-dashoffset:0;opacity:1}.process-scan{display:none}}
