.casco-page .casco-hero {
  --hero-ink: var(--site-on-dark, hsl(var(--site-palette-hue, 80) 30% 96.078431%));
  --hero-muted: var(--site-dark-muted, hsl(var(--site-palette-hue, 104.210526) 14.96063% 75.098039%));
  --light-x: 74%;
  --light-y: 42%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr);
  gap: 28px;
  padding: 40px;
  border:1px solid color-mix(in srgb, var(--hero-ink) 16%, transparent);
  border-radius: 32px;
  box-shadow: 0 28px 64px -48px hsl(var(--site-palette-hue, 135) 33.333333% 9.411765% / 0.701961), inset 0 1px 0 #ffffff0d;
}
.casco-hero-atmosphere { position: absolute; z-index: -1; inset: 0; pointer-events: none; background:radial-gradient(ellipse at var(--light-x) var(--light-y), color-mix(in srgb, var(--accent) 10%, transparent), transparent 61%); }
.casco-hero-atmosphere::before { content: ""; position: absolute; inset: 0; background-image:linear-gradient(#ffffff04 1px, transparent 1px), linear-gradient(90deg, #ffffff04 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(90deg, transparent 30%, #000); }
.casco-hero-atmosphere::after { content: ""; position: absolute; top: 0; right: 9%; width: 42%; height: 1px; background:linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .6; }
.casco-hero .casco-hero-copy { position: relative; z-index: 2; padding: 12px 0 18px; min-width: 0; }
.casco-page .casco-hero .casco-hero-label { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 28px; padding: 8px 12px; border:1px solid color-mix(in srgb, var(--hero-ink) 17%, transparent); border-radius: 10px; color:var(--hero-muted); font-size: 11px; line-height: 1.5; background:#ffffff04; }
.casco-hero-label > svg { color:var(--accent); }
.casco-page .casco-hero h1 { max-width: none; margin: 0 0 24px; font-size: clamp(56px, 6.5vw, 82px); line-height: .98; letter-spacing: -.065em; }
.casco-title-subline { display: block; margin-top: 14px; font-size: .48em; font-weight: 650; line-height: 1.2; letter-spacing: -.035em; }
.casco-page .casco-hero .casco-hero-lead { max-width: 43ch; margin: 0; color:var(--hero-muted); font-size: 14px; line-height: 1.85; }
.casco-hero .casco-hero-actions { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.casco-hero .casco-hero-actions .btn { min-height: 50px; padding-inline: 18px; font-size: 12px; }
.casco-hero .casco-hero-facts { display: grid; gap: 10px; margin-top: 28px; padding-top: 22px; border-top:1px solid color-mix(in srgb, var(--hero-ink) 13%, transparent); color:var(--hero-muted); font-size: 11px; }
.casco-hero-facts > span + span::before { content: ""; width: 18px; height: 18px; background:currentColor; opacity: .75; -webkit-mask: url('/assets/icons/casco.svg') center / contain no-repeat; mask: url('/assets/icons/casco.svg') center / contain no-repeat; }
.casco-studio { position: relative; align-self: stretch; min-width: 0; padding: 18px 0 0; }
.casco-studio-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 12px; color:var(--hero-muted); font-size: 10px; line-height: 1.5; }
.casco-studio-heading > span { display: inline-flex; align-items: center; gap: 9px; }
.casco-studio-heading i { display: block; flex: 0 0 7px; width: 7px; height: 7px; border:1px solid var(--accent); border-radius: 2px; transform: rotate(45deg); }
.casco-studio-heading > svg { opacity: .6; }
.casco-stage { position: relative; height: 340px; margin: 6px -12px 0; }
.casco-stage::before { content: ""; position: absolute; inset: 4% 10% 10%; border-radius: 50%; background:radial-gradient(ellipse, color-mix(in srgb, var(--accent) 14%, transparent), transparent 68%); filter: blur(22px); }
.casco-stage-grid { position: absolute; left: -8%; right: -8%; bottom: 0; height: 70%; background-image:linear-gradient(color-mix(in srgb, var(--accent) 17%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 17%, transparent) 1px, transparent 1px); background-size: 38px 38px; transform: perspective(480px) rotateX(64deg); transform-origin: 50% 90%; mask-image: radial-gradient(ellipse at 50% 74%, #000 5%, transparent 68%); opacity: .7; }
.casco-stage-lines { position: absolute; inset: 0; width: 100%; height: 100%; stroke:var(--accent); stroke-width: 1; opacity: .24; pointer-events: none; }
.casco-trace { stroke-dasharray: 3 4; opacity: .2; transition: opacity .25s; }
[data-casco-focus="risks"] .casco-trace-risks, [data-casco-focus="repair"] .casco-trace-repair, [data-casco-focus="payment"] .casco-trace-payment { opacity: 1; stroke-width: 1.5; }
.casco-car-layer { position: absolute; inset: 0; pointer-events: none; }
.casco-car-layer > img { position: absolute; left: 50%; top: 46%; display: block; width: 105%; max-width: none; height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 18px 22px #0005); }
.casco-scene-pin { position: absolute; z-index: 1; width: 12px; height: 12px; border:1px solid #ffffff90; border-radius: 50%; background:var(--dark); opacity: .7; box-shadow: 0 0 0 5px #ffffff09; transition: box-shadow .25s, background-color .25s, border-color .25s; pointer-events: none; }
.casco-scene-pin::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background:#ffffffa6; }
.casco-pin-risks { left: 26%; top: 57%; }
.casco-pin-repair { left: 59%; top: 78%; }
.casco-pin-payment { left: 85%; top: 25%; }
[data-casco-focus="risks"] .casco-pin-risks, [data-casco-focus="repair"] .casco-pin-repair, [data-casco-focus="payment"] .casco-pin-payment { opacity: 1; border-color:var(--accent); background:var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent), 0 0 0 12px color-mix(in srgb, var(--accent) 4%, transparent); }
[data-casco-focus="risks"] .casco-pin-risks::after, [data-casco-focus="repair"] .casco-pin-repair::after, [data-casco-focus="payment"] .casco-pin-payment::after { background:var(--dark); }
.casco-detail-panel { position: relative; z-index: 2; margin: -6px 8px 0; padding: 15px 18px 18px; border:1px solid color-mix(in srgb, var(--hero-ink) 16%, transparent); border-radius: 19px; background:color-mix(in srgb, var(--dark) 88%, transparent); box-shadow: inset 0 1px 0 #ffffff08, 0 14px 36px -22px #0008; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.casco-focus-options { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.casco-focus-options[hidden], .casco-insight[hidden] { display: none; }
.casco-focus-options .casco-focus-option, .casco-focus-options .casco-focus-option.ui-button[data-ui-kind] { --ui-fill: transparent; --ui-hover: #ffffff0c; --ui-ink: var(--hero-muted); --ui-stroke: transparent; --ui-depth: none; display: inline-flex; align-items: center; justify-content: center; flex: 1; gap: 7px; min-height: 36px; padding: 8px 10px; border:1px solid transparent; border-radius: 10px; background:transparent; color:var(--hero-muted); font-family: inherit; font-size: 11px; font-weight: 650; line-height: 1.4; cursor: pointer; box-shadow: none; }
.casco-focus-options .casco-focus-option[aria-pressed="true"], .casco-focus-options .casco-focus-option.ui-button[aria-pressed="true"] { --ui-fill: var(--accent); --ui-hover: var(--site-accent-hover, hsl(var(--site-palette-hue, 80.38835) 100% 79.803922%)); --ui-ink: var(--site-on-accent, hsl(var(--site-palette-hue, 133.333333) 16.363636% 10.784314%)); background:var(--accent); color:var(--site-on-accent, var(--site-custom-ink,hsl(var(--site-palette-hue, 133.333333) 16.363636% 10.784314%))); }
.casco-focus-option:focus-visible { outline:2px solid var(--accent); outline-offset: 4px; }
.casco-focus-option svg { flex: 0 0 16px; }
.casco-insights { min-height: 66px; padding-top: 2px; }
.casco-insight > strong { display: block; margin-bottom: 6px; color:var(--hero-ink); font-size: 13px; font-weight: 750; line-height: 1.4; }
.casco-page .casco-hero .casco-insight > p { max-width: 57ch; margin: 0; color:var(--hero-muted); font-size: 11px; line-height: 1.7; }
@media (max-width: 1100px) {
  .casco-page .casco-hero { padding: 30px; gap: 20px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .casco-page .casco-hero h1 { font-size: 66px; }
  .casco-title-subline { font-size: .46em; }
  .casco-page .casco-hero .casco-hero-lead { font-size: 13px; }
  .casco-hero .casco-hero-actions { flex-direction: column; align-items: stretch; }
  .casco-stage { height: 300px; }
  .casco-detail-panel { margin-inline: 0; padding: 12px 12px 16px; }
}
@media (max-width: 760px) {
  .casco-page .casco-hero { grid-template-columns: 1fr; padding: 32px; gap: 20px; }
  .casco-hero .casco-hero-copy { padding: 0; }
  .casco-page .casco-hero h1 { font-size: clamp(60px, 11vw, 78px); }
  .casco-title-subline { font-size: .49em; }
  .casco-page .casco-hero .casco-hero-lead { max-width: 60ch; }
  .casco-hero .casco-hero-actions { flex-direction: row; align-items: center; }
  .casco-hero .casco-hero-facts { display: flex; gap: 12px 22px; margin-top: 22px; padding-top: 18px; }
  .casco-studio { max-width: 540px; width: 100%; justify-self: center; padding-top: 8px; }
  .casco-stage { height: 330px; }
}
@media (max-width: 480px) {
  .casco-page .casco-hero { padding: 26px 20px 20px; gap: 22px; border-radius: 26px; }
  .casco-page .casco-hero .casco-hero-label { margin-bottom: 22px; font-size: 10px; }
  .casco-page .casco-hero h1 { font-size: 62px; margin-bottom: 20px; }
  .casco-title-subline { font-size: .43em; }
  .casco-page .casco-hero .casco-hero-lead { font-size: 12px; }
  .casco-hero .casco-hero-actions { display: grid; grid-template-columns: 1fr; margin-top: 22px; }
  .casco-hero .casco-hero-actions .btn { width: 100%; }
  .casco-hero .casco-hero-facts { display: grid; gap: 8px; font-size: 10px; }
  .casco-studio-heading { padding-inline: 0; font-size: 9px; }
  .casco-stage { height: 250px; margin-inline: -14px; }
  .casco-detail-panel { padding: 10px 10px 14px; border-radius: 16px; }
  .casco-focus-options { gap: 3px; margin-bottom: 13px; }
  .casco-focus-options .casco-focus-option, .casco-focus-options .casco-focus-option.ui-button[data-ui-kind] { gap: 5px; padding: 8px 6px; font-size: 10px; }
  .casco-insights { min-height: 80px; }
  .casco-insight > strong { font-size: 12px; }
  .casco-page .casco-hero .casco-insight > p { font-size: 10px; }
  .casco-scene-pin { width: 10px; height: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .casco-trace, .casco-scene-pin { transition: none; }
}