/* ============================================================
       FMC SKELETON — layout only. Swap content, images and colors.
       1. Brand colors: edit the tokens below.
       2. Images: replace each .ph placeholder (or set the
          --img-statement URL below; the hero uses an animated mesh).
       3. Text: every [BRACKETED] string is a placeholder.
       ============================================================ */
    :root {
      --ink: #111112;          /* primary dark (text, dark sections) */
      --ink-deep: #0a0a0b;     /* hero / deepest background */
      --accent: #BF4A1D;       /* FMC Orange (CTAs and accents only; max 3 per section) */
      --accent-bright: #d9612f;/* FMC Orange hover */
      --accent-light: #A4A4A8; /* FMC Grey: kicker text on dark backgrounds */
      --surface: #F0F0F0;      /* FMC Light Grey section background */
      --muted: #5f5f64;        /* body copy on light backgrounds */
      --line: rgba(0, 0, 0, .12);
      --font: "Manrope", Arial, sans-serif;            /* brand text font */
      --mono: "JetBrains Mono", ui-monospace, monospace; /* brand labels, buttons, numbers */
      --wrap: min(73.75rem, 100vw - 3rem);
      /* Background images — set to url('...') when ready */
      --img-hero: none;
      --img-statement: none;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; font-family: var(--font); color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
    a { color: inherit; }
    img { display: block; max-width: 100%; height: auto; }
    .wrap { width: var(--wrap); margin-left: auto; margin-right: auto; }
    .pad { padding: 120px 0; }
    .shell { overflow: hidden; }
    .skip { position: fixed; top: 12px; left: 12px; z-index: 1000; padding: 12px 18px; background: #fff; color: var(--ink); transform: translateY(-200%); }
    .skip:focus { transform: none; }
    a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 5px; }

    /* ---------- Placeholder blocks (delete when real assets go in) ---------- */
    .ph { display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px;
          background: repeating-linear-gradient(45deg, rgba(127,127,127,.14) 0 10px, rgba(127,127,127,.06) 10px 20px);
          border: 1px dashed rgba(127,127,127,.55); color: rgba(127,127,127,.95);
          font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
    .ph-bg { position: absolute; inset: 0; border: 0; align-items: flex-end; justify-content: flex-end; padding: 0 24px 24px 0; color: rgba(255,255,255,.35); }

    /* ---------- 1. Header / nav ---------- */
    .header { position: relative; z-index: 20; background: #fff; border-bottom: 1px solid var(--line); }
    .bar { height: 6.25rem; display: flex; align-items: center; justify-content: space-between; }
    .logo img { height: 58px; width: auto; }
    .nav { display: flex; align-items: center; gap: 2.125rem; }
    .nav a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; transition: .25s ease; }
    .nav a:hover { color: var(--ink); }
    .nav-btn { display: none; font: inherit; border: 0; background: transparent; padding: 10px; cursor: pointer; }
    .nav-btn span { display: block; width: 26px; height: 2px; background: var(--ink); margin: 6px; }

    /* ---------- 2. Hero (parallax) ---------- */
    .launch { min-height: 860px; position: relative; display: grid; align-items: center; color: #fff; background: var(--ink-deep); }
    .launch-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
    /* Hero texture: perforated panel (like a rack face) under the dark fade, film grain and a corner flare on top */
    .launch-perf { position: absolute; inset: 0; opacity: .2; pointer-events: none; background-image: radial-gradient(circle, rgba(255,255,255,.5) .75px, transparent 1.35px); background-size: 7px 7px; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 55%); mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 55%); }
    .launch-flare { position: absolute; z-index: 2; right: -16%; bottom: -34%; width: 70%; aspect-ratio: 1.25; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(191,74,29,.5), rgba(191,74,29,.16) 48%, rgba(191,74,29,0) 100%); opacity: .7; filter: blur(12px); animation: flare-breathe 10s ease-in-out infinite; }
    .launch-grain { position: absolute; z-index: 2; inset: -40px; opacity: .4; pointer-events: none; animation: grain .9s steps(5) infinite; }
    @keyframes flare-breathe { 50% { transform: scale(1.07) translate(-1%, -1%); opacity: .55; } }
    @keyframes grain { 20% { transform: translate(-12px, 8px); } 40% { transform: translate(10px, -14px); } 60% { transform: translate(-6px, -10px); } 80% { transform: translate(14px, 12px); } }
    /* Darkens the text side over the mesh. Setting --img-hero puts a photo on top of the mesh. */
    .launch-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,6,7,.9) 0%, rgba(6,6,7,.68) 40%, rgba(6,6,7,.12) 75%, rgba(6,6,7,.22) 100%), var(--img-hero) center/cover; }
    .launch-grid { position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 70px 70px; -webkit-mask-image: linear-gradient(to right, #000, transparent 78%); mask-image: linear-gradient(to right, #000, transparent 78%); }
    .launch::after { content: ""; position: absolute; inset: auto 0 0; height: 180px; background: linear-gradient(to bottom, transparent, rgba(8,8,9,.45)); z-index: 1; pointer-events: none; }
    .launch-body { position: relative; z-index: 3; max-width: none; padding: 70px 0 70px; }
    .kicker { color: var(--accent); font-family: var(--mono); text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 700; }
    .kicker.on-dark { color: var(--accent-light); }
    /* Status chips: three small panel-style labels, each with a softly pulsing orange dot */
    .chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; padding: 0; list-style: none; }
    .chips li { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.03); color: #A4A4A8; font: 700 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
    .chips li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(191,74,29,.18); animation: chip-pulse 2.4s ease-in-out infinite; }
    .chips li:nth-child(2)::before { animation-delay: .8s; }
    .chips li:nth-child(3)::before { animation-delay: 1.6s; }
    @keyframes chip-pulse { 50% { box-shadow: 0 0 0 6px rgba(191,74,29,0); } }
    /* Four set lines; size follows the room left of the orange hub so each line holds on desktop */
    .launch h1 { max-width: none; margin: 0; white-space: nowrap; font-size: clamp(44px, calc(3.58vw + 36px), 106px); line-height: .95; letter-spacing: -.04em; font-weight: 800; }
    .launch h1 span { display: inline-block; color: #7E7E83; } /* second half in a darker FMC Grey, solid */
    .launch-lede { max-width: 680px; margin: 28px 0 0; color: rgba(255,255,255,.72); font-size: 19px; line-height: 1.65; }
    .launch-ctas { display: flex; align-items: center; gap: 30px; margin-top: 30px; }
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 54px; padding: 0 24px; border-radius: 4px; border: 1px solid transparent; text-decoration: none; font: 700 13px/1 var(--mono); letter-spacing: .02em; cursor: pointer; transition: .25s ease; }
    .btn-primary { background: var(--accent); color: #fff; }
    .btn-primary:hover { background: var(--accent-bright); transform: translateY(-2px); }
    .link-arrow { display: inline-flex; align-items: center; gap: 12px; padding: 6px 0; color: #fff; text-decoration: none; font: 700 13px/1 var(--mono); letter-spacing: .02em; border-bottom: 1px solid rgba(255,255,255,.3); transition: border-color .25s ease; }
    .link-arrow span { transition: transform .25s ease; }
    .link-arrow:hover { border-bottom-color: #fff; }
    .link-arrow:hover span { transform: translateX(5px); }

    /* ---------- 3. Intro split ---------- */
    h2 { margin: 1rem 0 0; font-size: clamp(2.625rem, 5vw, 4.375rem); line-height: 1.04; letter-spacing: -.045em; }
    .bridge { display: grid; grid-template-columns: 11fr 9fr; gap: 7.5rem; align-items: start; }
    .bridge-copy { padding-top: 44px; border-top: 1px solid var(--line); }
    .bridge-copy p { margin: 0 0 22px; font-size: 18px; line-height: 1.75; color: var(--muted); }

    /* ---------- 4. Products / services grid (5 cards) ---------- */
    .services { background: var(--surface); }
    .sec-head { display: grid; grid-template-columns: 7fr 3fr; gap: 5rem; align-items: end; margin-bottom: 3.75rem; }
    .sec-head p { margin: 0 0 5px; color: var(--muted); line-height: 1.7; }
    .card-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); }
    .card { position: relative; min-height: 340px; padding: 28px 22px 62px; background: #fff; border-right: 1px solid var(--line); overflow: hidden; transition: .35s ease; }
    .card:last-child { border-right: 0; }
    /* Product icons: dark app tile, white-to-grey line, one orange dot. Drawings are the #icon-* symbols in the page. */
    .card-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 26%; background: linear-gradient(160deg, #26262a 0%, #111113 60%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.18); transition: box-shadow .35s ease, transform .35s cubic-bezier(.2,.9,.3,1.25); }
    .card-icon svg { width: 58%; height: 58%; overflow: visible; }
    .ic-ln { fill: none; stroke: url(#ic-line); stroke-width: 4.6; stroke-linecap: round; stroke-linejoin: round; }
    .ic-ln.ic-tooth { stroke-linecap: butt; stroke-width: 5.2; }
    .ic-ln.ic-pin { stroke-width: 3.6; }
    .ic-dot { fill: url(#ic-dot); }
    .card h3 { margin: 20px 0 13px; font-size: 20px; }
    .mi-dot { color: var(--accent); } /* Mi. product family (Mechanical Intelligence): the period is always FMC orange */
    .tm { margin-left: .06em; color: #8a8a8f; font-size: .5em; font-weight: 600; line-height: 0; vertical-align: .9em; } /* small grey trademark mark, so the orange period stays the one accent */
    /* Status readout ("power on"): grey STANDBY at rest; on hover the dot lights orange and pulses, ONLINE, icon glows */
    .card-status { position: absolute; left: 22px; bottom: 26px; display: flex; align-items: center; gap: 9px; color: #8a8a8f; font: 700 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
    .card-status i { width: 7px; height: 7px; border-radius: 50%; background: #c4c4c8; transition: background .3s ease, box-shadow .3s ease; }
    .card-status .s-on { display: none; color: var(--accent); }
    .card:hover .card-status .s-off { display: none; }
    .card:hover .card-status .s-on { display: inline; }
    .card:hover .card-status i { background: var(--accent); box-shadow: 0 0 0 3px rgba(191,74,29,.18); animation: chip-pulse 1.6s ease-in-out infinite; }
    .card:hover .card-icon { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.18), 0 0 0 5px rgba(191,74,29,.2), 0 0 26px 4px rgba(191,74,29,.55), 0 0 60px 10px rgba(191,74,29,.28); transform: scale(1.14); } /* comes toward you */
    /* Touch screens can't hover: show the products online */
    @media (hover: none) {
      .card-status .s-off { display: none; }
      .card-status .s-on { display: inline; }
      .card-status i { background: var(--accent); }
    }
    @media (prefers-reduced-motion: reduce) { .card:hover .card-status i { animation: none; } }
    .card p { color: var(--muted); line-height: 1.65; font-size: 14px; }

    /* ---------- 5. Statement band (parallax image + quote) ---------- */
    .contrast { position: relative; min-height: 640px; display: grid; align-items: center; color: #fff; background: var(--ink-deep); overflow: hidden; }
    .contrast-image { position: absolute; inset: 0; background: var(--img-statement) center/cover; }
    .contrast-shade { position: absolute; inset: 0; background: radial-gradient(140% 110% at 45% 50%, transparent 55%, rgba(0,0,0,.35) 100%); }

    /* ---------- Anchor background (dark sections): perforated dot panel + grain ----------
       The hero's dot texture, strongest on the right and fading to the left.
       Add .anchor-bg--left to make it strongest on the left instead. */
    .anchor-bg { position: absolute; inset: 0; pointer-events: none; }
    .anchor-dots { position: absolute; inset: 0; opacity: .34; background-image: radial-gradient(circle, rgba(255,255,255,.55) .8px, transparent 1.4px); background-size: 9px 9px;
                   -webkit-mask-image: radial-gradient(85% 120% at 100% 50%, #000 0%, rgba(0,0,0,.4) 45%, transparent 75%); mask-image: radial-gradient(85% 120% at 100% 50%, #000 0%, rgba(0,0,0,.4) 45%, transparent 75%); }
    .anchor-grain { position: absolute; inset: 0; opacity: .35; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
    .anchor-bg--left .anchor-dots { transform: scaleX(-1); }
    .contrast-body { position: relative; z-index: 2; }
    .contrast p { max-width: 41.25rem; color: rgb(255 255 255 / 66%); line-height: 1.75; }
    /* Before and after: what operators live with today vs. what FMC gives them. The arrow is the band's one orange touch. */
    .diff { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(24px, 4vw, 60px); align-items: start; margin: 30px 0 40px; }
    .diff h2 { margin: 0 0 24px; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -.04em; }
    .diff-before h2 { color: rgba(255,255,255,.36); }
    .diff ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.12); }
    .diff li { display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 17px; line-height: 1.5; }
    .diff li::before { content: ""; flex: none; }
    .diff-before li { color: rgba(255,255,255,.45); }
    .diff-before li::before { width: 12px; height: 2px; background: rgba(255,255,255,.3); }
    .diff-after li { color: #fff; font-weight: 600; }
    .diff-after li::before { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
    .diff-arrow { width: clamp(40px, 4vw, 60px); height: auto; margin-top: clamp(4px, 1vw, 10px); color: var(--accent); }
    @media (max-width: 980px) {
      .diff { grid-template-columns: 1fr; gap: 26px; }
      .diff li { min-height: 0; }
      .diff-arrow { transform: rotate(90deg); margin: 0; }
    }

    /* ---------- 6. Approach: sticky left + 4 steps on a circuit trace ---------- */
    .fmec-layout { display: grid; grid-template-columns: 17fr 23fr; gap: 7.5rem; }
    .fmec-intro { align-self: start; position: sticky; top: 3.125rem; }
    .fmec-intro p { max-width: 420px; color: var(--muted); line-height: 1.7; margin-top: 26px; }
    .fmec-intro h2 { font-size: clamp(40px, 3.7vw, 54px); } /* keeps "Enterprise Cloud" on one line beside the steps */
    /* FMEC dashboard screenshot (section 6) */
    .fmec-shot { margin: 38px 0 0; max-width: 560px; }
    .fmec-shot img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 24px 50px rgba(0,0,0,.14); }
    @media (min-width: 981px) { .fmec-shot { width: 118%; max-width: none; } } /* 18% wider than the column, reaching into the gap beside the steps */
    .fmec-intro .fmec-shot figcaption { margin: 12px 0 0 4px; font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-light); }
    /* Short laptop screens: the column is too tall to stay pinned, so let it scroll normally */
    @media (max-height: 820px) { .fmec-intro { position: static; } }
    .stages { position: relative; border-top: 1px solid var(--line); }
    /* Circuit trace: one line through every pad (placed by script), filling orange as the section scrolls past */
    .trace { position: absolute; z-index: 1; left: 37px; width: 2px; background: #dcdcde; pointer-events: none; }
    .trace-fill { position: absolute; inset: 0 0 auto; height: 0; background: var(--accent); }
    .stage { position: relative; display: grid; grid-template-columns: 90px 1fr; gap: 30px; padding: 38px 54px 38px 18px; border-bottom: 1px solid var(--line); }
    /* Square pad, like a solder pad on a board, with a short stub of trace toward the text */
    .stage > span { position: relative; z-index: 2; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: #8a8a8f; border: 1.5px solid #cfcfd2; border-radius: 6px; font: 700 11px/1 var(--mono); letter-spacing: .04em; transition: color .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease; }
    .stage > span::after { content: ""; position: absolute; left: 100%; top: 50%; width: 18px; height: 2px; margin-left: 1.5px; background: #dcdcde; transition: background .3s ease; }
    .stage.is-live > span { color: var(--accent); border-color: var(--accent); }
    .stage.is-live > span::after { background: var(--accent); }
    .stage:hover > span { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px rgba(191,74,29,.12); }
    .stage h3 { margin: 0 0 11px; font-size: 24px; }
    .stage p { margin: 0; color: var(--muted); line-height: 1.7; }

    /* ---------- 7. Partner / logo strip (dark) ---------- */
    .ticker-band { position: relative; overflow: hidden; background: var(--ink-deep); color: #fff; padding: 64px 0; }
    .ticker { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
    .ticker + .ticker { margin-top: 12px; }
    .ticker-track { display: flex; width: max-content; animation: ticker-slide 60s linear infinite; }
    .ticker--reverse .ticker-track { animation-duration: 45s; animation-direction: reverse; }
    .ticker:hover .ticker-track { animation-play-state: paused; }
    .ticker-track span { white-space: nowrap; font-size: clamp(30px, 4vw, 56px); font-weight: 800; line-height: 1.15; letter-spacing: -.04em; }
    .ticker-track span::after { content: "/"; margin: 0 .55em; font-weight: 400; color: rgba(255,255,255,.2); }
    .ticker--outline .ticker-track span { opacity: .8; filter: url(#clean-outline); } /* hollow outline (filter #clean-outline) */
    .ticker:not(.ticker--outline) .ticker-track span::after { color: var(--accent); } /* orange slashes on the top row */
    .ticker-label { position: relative; margin-bottom: 18px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-light); }
    @keyframes ticker-slide { to { transform: translateX(-50%); } }

    /* ---------- 8. About: visual left + copy right ---------- */
    .story { display: grid; grid-template-columns: 19fr 21fr; gap: clamp(4.375rem, 8vw, 6.875rem); align-items: center; }
    .story .ph { aspect-ratio: 16 / 9; width: 100%; }
    .story-visual { position: relative; overflow: hidden; display: grid; place-items: center; aspect-ratio: 4 / 3; width: 100%; background: var(--ink-deep); }
    .story-visual img { position: relative; width: 48%; height: auto; }
    .story-visual--photo { margin: 0; }
    .story-visual--photo img { width: 100%; height: 100%; object-fit: cover; }
    .story-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 56px clamp(18px, 2.4vw, 28px) clamp(16px, 2vw, 24px); color: #fff; background: linear-gradient(to top, rgba(10,10,11,.92) 0%, rgba(10,10,11,.65) 55%, rgba(10,10,11,0) 100%); }
    .story-caption small { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-light); }
    .story-caption span { display: block; max-width: 34ch; font-size: clamp(15px, 1.35vw, 20px); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
    .story-copy { max-width: 610px; }
    .story-copy h2 { font-size: clamp(2.5rem, 4.1vw, 3.375rem); line-height: 1.06; }
    .story-copy p { color: var(--muted); font-size: 17px; line-height: 1.78; }
    .story-copy .about-tagline { color: var(--ink); font-weight: 700; }
    .link-plain { display: inline-flex; gap: 15px; margin-top: 18px; font-weight: 800; text-decoration: none; color: var(--accent); }

    /* ---------- 9. Contact: copy left + form right ---------- */
    .reach { position: relative; overflow: hidden; padding: 120px 0; color: #fff; background: var(--ink-deep); }
    .reach-grid { position: relative; }
    .reach-grid { display: grid; grid-template-columns: 9fr 11fr; gap: 6.25rem; }
    .reach-copy h2 { max-width: 600px; }
    .reach-copy p { color: rgb(255 255 255 / 60%); max-width: 35rem; line-height: 1.75; }
    .direct { display: grid; gap: .5rem; margin-top: 2.8125rem; }
    .direct a { color: #fff; text-decoration: none; font-size: 27px; font-weight: 700; overflow-wrap: anywhere; }
    .direct span { color: rgba(255,255,255,.46); }
    .direct span a { font-size: inherit; font-weight: 600; color: rgba(255,255,255,.75); }
    .direct span a:hover { color: #fff; }
    .form { align-self: start; padding: 38px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.11); }
    .pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    .form label { display: grid; gap: .5625rem; margin-bottom: 1.375rem; }
    .form label span { color: rgb(255 255 255 / 60%); font-size: .6875rem; text-transform: uppercase; letter-spacing: .12em; }
    .form input, .form textarea { width: 100%; color: #fff; background: transparent; border: 0; border-bottom: 1px solid rgb(255 255 255 / 24%); border-radius: 0; padding: .75rem 0; outline: none; font: inherit; }
    .form textarea { resize: vertical; }
    .form input:focus, .form textarea:focus { border-color: var(--accent-bright); }

    /* ---------- 10. Footer ---------- */
    .foot { color: #fff; background: #08090a; }
    .foot-main { min-height: 150px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid rgba(255,255,255,.09); }
    .foot-logo img { height: 48px; width: auto; }
    .foot-nav { display: flex; flex-wrap: wrap; gap: 10px 30px; }
    .foot-main a:hover { color: #fff; }
    .foot-main a { color: rgb(255 255 255 / 60%); font-size: .75rem; text-decoration: none; text-transform: uppercase; letter-spacing: .12em; }
    .foot-base { min-height: 76px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; color: rgba(255,255,255,.37); font-size: 12px; }
    .social { display: flex; gap: 8px; }
    .social a { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #fff; text-decoration: none; font-size: 10px; font-weight: 700; }
    .social a:hover { background: var(--accent); border-color: var(--accent); }

    /* ---------- Motion ---------- */
    .rise { opacity: 0; transform: translate3d(0, 1.5rem, 0); transition: opacity 750ms ease, transform 750ms ease; }
    .rise.is-in { opacity: 1; transform: none; }
    .depth { position: relative; overflow: clip; }
    .layer { will-change: transform; transform: translate3d(0, var(--drift, 0px), 0); }
    .launch-shade { transform: translate3d(0, var(--drift, 0px), 0) scale(1.08); }
    .contrast-image { transform: translate3d(0, var(--drift, 0px), 0) scale(1.12); }
    @media (prefers-reduced-motion: reduce) {
      .ticker-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; padding: 0 16px; }
      .ticker-track [aria-hidden="true"] { display: none; }
      html { scroll-behavior: auto; }
      .layer, .launch-shade, .contrast-image { transform: none !important; }
      .launch-flare, .launch-grain, .chips li::before { animation: none; }
      .rise { opacity: 1; transform: none; transition: none; }
    }

    /* ---------- Tablet ---------- */
    @media (max-width: 1100px) and (min-width: 621px) {
      .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .card { border-bottom: 1px solid var(--line); }
      .card:nth-child(even) { border-right: 0; }
      .card:last-child { grid-column: 1 / -1; border-bottom: 0; }
    }
    @media (max-width: 980px) {
      :root { --wrap: min(100% - 2.25rem, 47.5rem); }
      .pad { padding: 90px 0; }
      .nav-btn { display: inline-block; z-index: 2; }
      .nav { position: fixed; top: 0; right: 0; width: min(340px, 90vw); height: 100vh; padding: 120px 38px; background: #fff; box-shadow: -20px 0 40px rgba(0,0,0,.12); flex-direction: column; align-items: flex-start; opacity: 0; visibility: hidden; pointer-events: none; transition: .3s ease; }
      .nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
      .launch { min-height: 800px; }
      .launch h1 { white-space: normal; }
      .bridge, .sec-head, .fmec-layout, .story, .reach-grid { grid-template-columns: 100%; gap: 3.4375rem; }
      .fmec-intro { position: static; }
    }
    /* ---------- Phone ---------- */
    @media (max-width: 620px) {
      :root { --wrap: calc(100% - 32px); }
      .bar { height: 84px; }
      .logo img { height: 46px; }
      .launch { min-height: 760px; }
      .launch-body { padding: 70px 0 65px; }
      .launch h1 { font-size: 46px; } /* keeps "Hardware Logic" on one line */
      .launch-lede { font-size: 16px; }
      .launch-ctas { flex-direction: column; align-items: stretch; gap: 18px; }
      .link-arrow { align-self: flex-start; }
      .chips li { font-size: 10px; padding: 7px 11px 7px 10px; }
      .launch-flare { width: 150%; right: -55%; bottom: -22%; }
      h2 { font-size: 42px; }
      .card-grid { grid-template-columns: minmax(0, 1fr); }
      .card { border-right: 0; border-bottom: 1px solid var(--line); min-height: 300px; }
      .card:last-child { border-bottom: 0; }
      .stage { grid-template-columns: 52px 1fr; gap: 16px; padding-right: 40px; }
      .ticker-band { padding: 48px 0; }
      .story { gap: 42px; }
      .story-copy h2 { font-size: 38px; }
      .pair { grid-template-columns: 100%; gap: 0; }
      .form { padding: 25px; }
      .direct a { font-size: 22px; }
      .foot-main { flex-wrap: wrap; align-items: flex-start; padding: 36px 0; row-gap: 26px; }
      .foot-nav { order: 3; width: 100%; gap: 14px 24px; }
      .foot-base { flex-direction: column; align-items: flex-start; justify-content: center; padding: 20px 0; }
    }

    /* ---------- 6b. Live dashboard: each step plays its own layer over the FMEC screenshot ---------- */
    .dash { position: relative; container-type: inline-size; }
    .dash img { display: block; }
    .dash-live { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
    .dash-dim { opacity: 0; transition: opacity .45s ease; }
    .dash:not([data-step=""]) .dash-dim { opacity: .55; }
    .dash[data-step="integrate"] .dash-dim { opacity: .8; }
    .dash .layer { display: none; }
    .dash[data-step="connect"] .layer-connect, .dash[data-step="track"] .layer-track, .dash[data-step="integrate"] .layer-integrate { display: inline; }
    /* Track: new devices pop onto the map and ping */
    .dot { transform-box: fill-box; transform-origin: center; animation: dot-pop .5s cubic-bezier(.2,1.6,.4,1) both; animation-delay: calc(var(--i) * .2s); }
    .ping { fill: none; stroke: #22a55b; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ping 1.8s ease-out infinite; animation-delay: calc(var(--i) * .2s + .3s); }
    @keyframes dot-pop { from { transform: scale(0); } }
    @keyframes ping { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(3.4); opacity: 0; } }
    .chip-label { font: 700 17px var(--mono); letter-spacing: .12em; fill: #5f5f64; }
    .chip-count { font: 800 21px var(--font); fill: #111; }
    /* Connect: white covers slide away so the bars grow and the fuel line draws; the total counts up */
    .cover { fill: #fff; transform-box: fill-box; }
    .cover-bars { transform-origin: top; animation: uncover-up 1.3s cubic-bezier(.3,.7,.2,1) .15s both; }
    .cover-line { transform-origin: right; animation: uncover-right 1.5s ease-in-out .35s both; }
    @keyframes uncover-up { to { transform: scaleY(0); } }
    @keyframes uncover-right { to { transform: scaleX(0); } }
    .fuel-count { font: 800 25px var(--font); fill: #111; }
    .strip-title { font: 700 20px var(--font); fill: #14181f; letter-spacing: -.01em; }
    .strip-text { font: 400 16.5px var(--font); fill: #6b6f76; }
    /* Experience: the FMC mobile app slides up beside the dashboard */
    .dash-phone { display: none; position: absolute; z-index: 3; right: 3%; bottom: -11%; width: 23%; aspect-ratio: 9 / 18.5; padding: 1.1cqw; border-radius: 4.2cqw; background: #111113; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
    .dash[data-step="experience"] .dash-phone { display: block; animation: phone-up .7s cubic-bezier(.2,.9,.3,1) both; }
    @keyframes phone-up { from { opacity: 0; transform: translateY(14%); } }
    .dash-phone .screen { height: 100%; display: flex; flex-direction: column; gap: 1cqw; padding: 1.6cqw; border-radius: 3.2cqw; background: #f6f7f9; overflow: hidden; color: #111; font: 500 1.35cqw/1.3 var(--font); }
    .ph-bar { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.1cqw; }
    .ph-title { font-weight: 800; font-size: 2cqw; }
    .ph-search { padding: .8cqw 1cqw; border-radius: 1cqw; background: #e9ebef; color: #8a8a8f; }
    .ph-item { display: grid; grid-template-columns: 2.6cqw 1fr auto; gap: .9cqw; align-items: center; padding: 1cqw; border-radius: 1.1cqw; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); animation: ph-in .45s ease both; animation-delay: calc(.35s + var(--i) * .12s); }
    .ph-item i { width: 2.6cqw; aspect-ratio: 1; border-radius: .8cqw; background: #e3f5ea; }
    .ph-item i.warn { background: #fdebe3; }
    .ph-item b { display: block; font-weight: 800; }
    .ph-item small { color: #8a8a8f; font-size: 1.1cqw; }
    .ph-item em { font-style: normal; font-weight: 700; font-size: 1.05cqw; color: #1f9d55; }
    .ph-item em.warn { color: var(--accent); }
    .ph-scan { margin-top: auto; padding: 1.1cqw; border-radius: 1.1cqw; background: #111113; color: #fff; text-align: center; font-weight: 700; }
    @keyframes ph-in { from { opacity: 0; transform: translateY(6px); } }
    /* Integrate: records leave FMEC through the API and flow into the customer's own systems */
    .api-node { fill: #111113; stroke: var(--accent); stroke-width: 2; }
    .api-head { font: 500 19px var(--mono); letter-spacing: .14em; fill: #A4A4A8; }
    .api-code { font: 500 22px var(--mono); fill: #fff; }
    .api-code .k { fill: #A4A4A8; }
    .flow { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 10 12; animation: flow .9s linear infinite, fade-in .5s ease both; }
    .flow:nth-of-type(2) { animation-delay: 0s, .15s; }
    .flow:nth-of-type(3) { animation-delay: 0s, .3s; }
    @keyframes flow { to { stroke-dashoffset: -22; } }
    @keyframes fade-in { from { opacity: 0; } }
    .target { animation: fade-in .5s ease both; animation-delay: calc(.3s + var(--i) * .15s); }
    .target rect { fill: #fff; }
    .target text { font: 800 24px var(--mono); letter-spacing: .1em; fill: #111; }
    @media (prefers-reduced-motion: reduce) {
      .dot, .ping, .flow, .target, .ph-item, .dash[data-step="experience"] .dash-phone { animation: none; }
      .cover { display: none; }
    }