/* VC4 blue version: the S2C Platform hero (blue/service2create.html), ported from the reference site (Dave's platform.html).
   The 3D scene (blue/hero-platform.js) sits on the right of the hero beside the copy. The scene box and its labels use the
   shared .b-scene styles in blue/blue.css (the reference's site.css scene3d and tags); this file adds what the reference
   page adds in its own <style>: the scene position, the southbound label hanging below its point, and the two protocol
   chips. The reference's colour tokens are written out; Lato stands in for its mono and display fonts, as on Technical.
   Everything is scoped to .b-plat-hero so nothing else on the site changes. */

/* ---------- Hero on the calm background: copy on the left, dark navy text, buttons keep their colours ---------- */
html[data-blue] .b-plat-hero .b-scene-copy { max-width: 560px; position: relative; z-index: 2; }
html[data-blue] .b-plat-hero .hero-bottom { grid-template-columns: minmax(0, 1fr); }
html[data-blue] .b-plat-hero .hero-eyebrow { color: #138E96; }
html[data-blue] .b-plat-hero .hero-sub { color: rgba(2, 38, 63, .8); text-shadow: none; }
html[data-blue] .b-plat-hero .hero-sub strong { color: #02263F; }
/* the Explore button keeps the teal-to-blue gradient it had on this hero */
html[data-blue] .b-plat-hero .hero-cta-ghost { color: #fff; border: 0;
    background: linear-gradient(100deg, #138E96 0%, #1F86A6 45%, #2F5F9E 100%); background-size: 140% 100%; background-position: 0 50%;
    box-shadow: 0 12px 28px -12px rgba(31, 134, 166, .6); transition: background-position .5s ease, transform .3s ease; }
html[data-blue] .b-plat-hero .hero-cta-ghost:hover { color: #fff; background-position: 100% 50%; }
html[data-blue] .b-plat-hero .hero-cta-ghost .ti { color: #fff; }
html[data-blue] body:has(.b-plat-hero) .hero-breadcrumb, html[data-blue] body:has(.b-plat-hero) .hero-breadcrumb * { color: rgba(2, 38, 63, .7) !important; }

/* ---------- Scene position (reference: .hero-a .scene3d, with its top less the 80px header the blue hero sits under) ---------- */
@media (min-width: 901px) { .b-plat-hero .b-plat-scene { top: clamp(44px, calc(17vh - 80px), 70px); } }
@media (min-width: 901px) and (max-width: 1100px) { .b-plat-hero .b-plat-scene { right: -3%; } }
@media (max-width: 900px) {
    .b-plat-hero { flex-direction: column; align-items: stretch; }
    .b-plat-hero .b-plat-scene { margin-top: 20px; }
}
@media (max-width: 560px) { .b-plat-hero .b-plat-scene { margin-top: -6px; } }

/* this page's own stylesheet has a small orange .tag pill; the scene labels share the class name, so its pill is cleared here */
.b-plat-hero .b-scene .tag { display: block; background: none; padding: 0; margin: 0; border-radius: 0; font-size: 16px; font-weight: 400; letter-spacing: normal; color: #02263F; }
/* ---------- The southbound label hangs below its point (reference: .tag.below) ---------- */
.b-plat-hero .b-scene .tag.below .in { bottom: auto; top: 0; flex-direction: column-reverse; transform: translateX(-28%); }
.b-plat-hero .b-scene .tag.below .pin::after { margin: -4px 0 0 -3.75px; }
.b-plat-hero .b-scene .tag.warn.below .pin { background: linear-gradient(rgba(235, 85, 44, .2), #EB552C); }
.b-plat-hero .b-scene .tag.below:not(.on) .card { transform: translateY(-10px) scale(.9); }
@media (max-width: 900px) { .b-plat-hero .b-scene .tag.below .in { transform: translateX(-28%) scale(.78); transform-origin: 28% 0; } }

/* ---------- Protocol chips: discovery going up, activation coming down, each flipping through its protocols (reference: .proto) ---------- */
.b-plat-hero .proto { position: absolute; left: 0; top: 0; will-change: transform; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.b-plat-hero .ready .proto { opacity: 1; }
.b-plat-hero .proto span { position: absolute; left: 14px; top: -12px; display: flex; align-items: center; gap: 7px; white-space: nowrap;
    font: 900 10.5px/1 'Lato', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #02263F;
    background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(19, 142, 150, .3);
    border-radius: 999px; padding: 7px 10px 7px 8px; box-shadow: 0 12px 28px -14px rgba(2, 38, 63, .4); }
.b-plat-hero .proto span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3FC1C9; box-shadow: 0 0 0 3px rgba(63, 193, 201, .2); }
.b-plat-hero .proto.dn span::before { background: #EB552C; box-shadow: 0 0 0 3px rgba(235, 85, 44, .18); }
.b-plat-hero .proto b { font-weight: 900; color: #138E96; }
.b-plat-hero .proto.dn b { color: #EB552C; }
.b-plat-hero .proto .tx { display: inline-block; min-width: 7ch; }
.b-plat-hero .proto.flip .tx { animation: bPlatRollIn .5s cubic-bezier(.16, 1, .3, 1); }
.b-plat-hero .b-scene.no3d .proto { display: none; }
@media (max-width: 560px) { .b-plat-hero .proto span { font-size: 9.5px; left: 10px; } }
@keyframes bPlatRollIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- The data-core scene (blue/hero-stack.js, from the reference modules page): the label on the module that just
   docked, and the "Your stack · 1 data core" card with its ten dots ---------- */
.b-plat-hero .b-stack-scene .tag.mod-t .card { min-width: 178px; }
.b-plat-hero .b-stack-scene .tag.mod-t.pop .card { animation: bTagPop .7s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes bTagPop { from { transform: translateY(10px) scale(.86); } to { transform: none; } }
.b-plat-hero .b-stack-scene .tag { display: block; background: none; padding: 0; margin: 0; border-radius: 0; font-size: 16px; font-weight: 400; letter-spacing: normal; color: #02263F; transition: opacity .4s ease; }
.b-stack-scene .mhud { position: absolute; right: 9%; bottom: 12%; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .6s ease .8s;
    display: flex; align-items: center; gap: 14px; padding: 14px 20px 14px 14px; border-radius: 20px; background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); box-shadow: 0 24px 48px -20px rgba(2, 38, 63, .35); }
.b-stack-scene.ready .mhud, .b-stack-scene.nogl .mhud { opacity: 1; }
.b-stack-scene .mhud .ok { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #E3F1F2; color: #138E96; flex: none; }
.b-stack-scene .mhud small { display: block; font: 900 10px/1 'Lato', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #138E96; }
.b-stack-scene .mhud b { display: block; font: 800 17px/1.2 'Lato', sans-serif; color: #02263F; margin-top: 6px; letter-spacing: -.01em; }
.b-stack-scene .mhud .n { font-variant-numeric: tabular-nums; }
.b-stack-scene .mhud .dots { display: flex; gap: 4px; margin-top: 8px; }
.b-stack-scene .mhud .dots i { width: 14px; height: 5px; border-radius: 3px; background: #E3E7EE; transition: background .35s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.b-stack-scene .mhud .dots i.on { background: #138E96; }
.b-stack-scene .mhud .dots i.new { background: #3FC1C9; transform: scaleY(1.6); }
@media (max-width: 1100px) { .b-stack-scene .mhud { right: 6%; } }
@media (max-width: 900px) { .b-stack-scene .mhud { right: auto; left: 50%; bottom: 4%; translate: -50% 0; } }
@media (max-width: 560px) { .b-stack-scene .mhud { bottom: 2%; scale: .9; } }

/* ---------- Service2Create page refinements ---------- */
/* hero: sized to its content, the eyebrow close under the breadcrumb, room left for the module stack */
html[data-blue] .s2c-hero.b-plat-hero { min-height: 0 !important; justify-content: flex-start !important; padding-top: 0 !important; padding-bottom: 0 !important; }
html[data-blue] .s2c-hero.b-plat-hero .hero-inner { padding-top: 60px !important; padding-bottom: 56px !important; min-height: 0 !important; }
@media (max-width: 900px) { html[data-blue] .s2c-hero.b-plat-hero { min-height: 0 !important; padding-top: 40px !important; } }
/* S2C AI Assistant: the chat demo face on, solid white */
html[data-blue] body:has(.b-plat-hero) .ai-zone .ai-chat { transform: none !important; animation: none !important; background: #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    box-shadow: 0 30px 60px -30px rgba(1, 14, 26, .6) !important; max-width: 520px; margin: 0 auto; }
html[data-blue] body:has(.b-plat-hero) .ai-zone .ai-right { perspective: none !important; display: flex; justify-content: center; }
/* S2C Designer meets GIS: image 86 under a navy wash; both buttons in the blue gradient */
html[data-blue] .gis-zone { background: linear-gradient(100deg, rgba(1, 22, 40, .93) 0%, rgba(2, 38, 63, .86) 50%, rgba(2, 38, 63, .7) 100%), url('images/86.jpg') center / cover no-repeat !important; }
html[data-blue] .gis-zone .showcase-intro { color: rgba(220, 236, 246, .9) !important; }
html[data-blue] .gis-zone .s2c-btn-row :is(.btn-demo, .btn-ghost-teal) { background: linear-gradient(100deg, #138E96 10%, #02263F 95%) !important; background-size: 140% 100% !important; background-position: 0 50%;
    color: #fff !important; border: 1px solid rgba(173, 221, 246, .35) !important; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .5) !important; transition: background-position .4s ease, transform .25s ease; }
html[data-blue] .gis-zone .s2c-btn-row :is(.btn-demo, .btn-ghost-teal):hover { background-position: 100% 50% !important; transform: translateY(-2px); }
/* Why Service2Create: the blue gradient band instead of the flipped hero artwork */
html[data-blue] .benefits-zone { background: radial-gradient(1100px 620px at 88% 6%, rgba(19, 142, 150, .34), transparent 60%), radial-gradient(900px 600px at 4% 96%, rgba(63, 193, 201, .16), transparent 62%),
    linear-gradient(165deg, #011628 0%, #02263F 40%, #0B3D5C 78%, #0B5258 100%) !important; }
html[data-blue] .benefits-zone::before, html[data-blue] .benefits-zone::after { display: none !important; }
/* the app tiles: a graphic in the image band instead of a photo, the round icon kept on top */
html[data-blue] .tile-shot.b-tile-graphic { background: none !important; position: relative; overflow: hidden; }
html[data-blue] .tile-shot.b-tile-graphic .tile-ico { z-index: 2; }
html[data-blue] body:has(.b-plat-hero) .benefit-num { font-family: 'Lato', sans-serif !important; font-weight: 300 !important; }
/* Ericsson section as on Home: copy left, the migration console right; the proof points as a bulleted list */
html[data-blue] body:has(.b-plat-hero) .ene-zone .ene-grid { display: grid !important; grid-template-columns: 1.1fr .9fr !important; gap: 40px !important; align-items: center !important; position: relative; z-index: 1; }
html[data-blue] body:has(.b-plat-hero) .ene-zone .ene-inner { max-width: 660px !important; }
html[data-blue] body:has(.b-plat-hero) .ene-proof { list-style: none; display: flex !important; flex-direction: column !important; gap: 10px !important; margin: 0 0 30px; padding: 0; }
html[data-blue] body:has(.b-plat-hero) .ene-proof li { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 600; color: #fff; }
html[data-blue] body:has(.b-plat-hero) .ene-proof li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #EB552C; flex-shrink: 0; }
html[data-blue] body:has(.b-plat-hero) .ene-zone .b-mig-stage { zoom: .8; max-width: 640px !important; justify-self: start !important; align-self: center !important; }
html[data-blue] body:has(.b-plat-hero) .ene-zone .b-mig-stage .b-mig { transform: none !important; animation: none !important; }
@media (max-width: 900px) { html[data-blue] body:has(.b-plat-hero) .ene-zone .ene-grid { grid-template-columns: 1fr !important; } }
/* Why Service2Create: the two buttons below the heading (the old three-line heading had room for a pulled-up row) */
html[data-blue] body:has(.b-plat-hero) .benefits-cta { margin: 20px 0 56px !important; }
/* S2C Designer meets GIS: the old artwork and its wash sat over image 86, so they are switched off */
html[data-blue] .gis-zone::before, html[data-blue] .gis-zone::after { display: none !important; }
/* Why Service2Create: the 01 to 06 numbers in orange so they read on the navy band */
html[data-blue] body:has(.b-plat-hero) .benefit-num { color: #EB552C !important; -webkit-text-stroke: 0 !important; opacity: 1 !important; }