/* =========================================================================
   SECTION: OUR SOLUTIONS / DATA CENTER  (.sec-solutions)
   Source: Figma fileKey lweOnfp23FBRWjuK2mQ7cw, node 1:309 ("our solutions")
   Frame: 1:300 ("   landing page"), 1280px content column.
   Canvas: 1280 x 931 (section yTop=2611, yBottom=3542 in frame-absolute y).
   All child "top" values below = (frame-absolute-y - 2611).
   ========================================================================= */

.sec-solutions {
  position: relative;
  width: 1280px;
  height: 931px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
}

/* -------------------------------------------------------------------------
   Dark navy diagonal-gradient card that houses tabs / heading / copy / CTA /
   render. Node I1:309;190:28 — bottom:55.75px h:724px left:0 w:1284px
   (relative to the 1704-wide instance, but effectively column-width).
   ------------------------------------------------------------------------- */
.sol-card {
  position: absolute;
  left: 0;
  top: 151px;
  width: 1284px;
  height: 724px;
  background: linear-gradient(239.47deg,
    rgb(26, 43, 66) 8.71%,
    rgb(200, 209, 217) 47.6%,
    rgb(22, 39, 62) 91.25%);
}

/* "OUR / SOLUTIONS" heading — node I1:309;190:36 */
.sol-heading {
  position: absolute;
  left: 63px;
  top: 353px;
  width: 514px;
  margin: 0;
  color: #fff;
  text-transform: uppercase;
}
.sol-heading-sm {
  display: block;
  font-size: 48px;
  font-weight: 500;
  line-height: 0.982;
}
.sol-heading-lg {
  display: block;
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  margin-top: 4px;
}

/* Tabs — DATA CENTERS (active) / OIL & GAS AND UTILITIES (inactive) */
.sol-tab {
  position: absolute;
  left: 65px;
  width: 287px;
  height: 55px;
  border: none;
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding: 0 0 0 16px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  box-sizing: border-box;
}
/* Position belongs to the tab's IDENTITY, never to its state — the state
   classes are swapped on click, and baking `top` into them made the two
   tabs trade places. */
.sol-tab--dc { top: 503px; }
.sol-tab--og { top: 571px; }

.sol-tab--active {
  background: rgba(255, 255, 255, 0.9);
  color: #80121d;
}
/* Variant2 paints its active tab at fill opacity 1.0, not 0.9 (decoded
   node 1715 = #FFFFFF vs node 259 = #FFFFFF@0.90). */
.sol-tab--og.sol-tab--active { background: #fff; }

.sol-tab--inactive {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

/* Floating cloud + platform render (top crop) — node I1:309;254:1087,
   cropped from solutions-datacenter-render.png (1024x1536 source),
   scaled to 482px width -> 723px tall, window shows top 232px. */
.sol-render-top {
  position: absolute;
  left: 395px;
  top: 151px;
  width: 482px;
  height: 232px;
  background-image: url("../assets/solutions/solutions-datacenter-render.png");
  background-repeat: no-repeat;
  background-size: 482px 723px;
  background-position: 0 0;
}

/* Server-rack render (bottom crop) — node I1:309;254:1088, same source
   image scaled to 543px width -> 814px tall, window offset -389px to
   reveal the rack portion. */
.sol-render-bottom {
  position: absolute;
  left: 365px;
  top: 424px;
  width: 543px;
  height: 364px;
  background-image: url("../assets/solutions/solutions-datacenter-render.png");
  background-repeat: no-repeat;
  background-size: 543px 814px;
  background-position: 0 -389px;
}

/* Right column — DATA CENTER heading + paragraph + SEE MORE CTA
   node I1:309;190:32 / 190:37 / 190:65-69 */
.sol-content {
  position: absolute;
  left: 908px;
  top: 424px;
  width: 307px;
}
.sol-content-title {
  margin: 0 0 12px;
  color: #fff;
  text-transform: uppercase;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 0.822;
}
.sol-content-copy {
  margin: 0 0 22px;
  width: 284px;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.105;
}
.sol-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 174px;
  height: 46px;
  background: #80121d;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'Ailerons', 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 400;
  padding: 0 0 0 16px;
  box-sizing: border-box;
  cursor: pointer;
  border: none;
}
.sol-cta-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 31px;
  margin-right: 6px;
  background: #fff;
  color: #80121d;
}
.sol-cta-arrow {
  display: block;
}

/* -------------------------------------------------------------------------
   Bottom marquee strip — node I1:309;190:56/57 ("Logos" — actually a
   rasterized scrolling text strip in source; rebuilt here as real,
   animated text per contract preference for real text over raster).
   Declared FULLBLEED (see partial's HTML comment) so its dark background
   spans the full viewport edge-to-edge; this element positions the text
   row itself inside the 1280 column, per contract point 5.
   ------------------------------------------------------------------------- */
.sol-marquee {
  position: absolute;
  left: 0;
  top: 757px;
  width: 1280px;
  height: 130px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: transparent; /* sits over the metallic card gradient, per design */
}
.sol-marquee-track {
  display: flex;
  align-items: center;
  gap: 28px;
  white-space: nowrap;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  animation: sol-marquee-scroll 26s linear infinite;
  will-change: transform;
}
.sol-marquee-track .sol-dot {
  color: #80121d;
}

@keyframes sol-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* integrator fix: this section's children are section-local (rebased -2611); anchor at true frame y */
#stage > .sec-solutions{ top:2611px; }

/* =========================================================================
   SOLUTIONS — VARIANT SWAP  (Data Center  <->  Oil & Gas and Utilities)

   Sourced from the component set "Group 65" (Figma COMPONENT_SET 1:2):
     Property 1=Default   -> decoded node 294   (Data Center)
     Property 1=Variant2  -> decoded node 1701  (Oil & Gas)  = Figma 1:35
   Both read out of the published el-swedy2.site document, whose Default
   panel matches this build's coordinates exactly with a uniform +60px
   offset (the instance sits at frame y2671, the section at y2611), and
   whose Variant2 child count (9) matches the live design file's node 1:35.

   Every value below is panel-local + 60. Nothing here is estimated.
   ========================================================================= */

.sol-panel { position: absolute; left: 0; top: 0; width: 1280px; height: 931px; display: none; }
.sol-panel.is-on { display: block; }

/* --- Server rack — Figma node 1:58 (VECTOR, 354x631) at panel-local
   (465,112.7).  Its `fills` are figma.mixed: a 15-region vector network,
   every region an axis-aligned rectangle (4 vertices, 0 curves):

     region 0      SOLID #121a24            (115,70.5)-(259,558.5)
                   the dark interior panel
     regions 1-13  IMAGE b080baaa… CROP     equipment slats, x100-268
                   (region 3 also carries a second 3d505d32 FILL paint)
     region 14     IMAGE 3d505d32… CROP     the rack itself, full 354x631
                   imageTransform m00 .47326 m02 .28209 / m11 .7686 m12 .13275

   A single node-level image fill (which is all the .site export exposed)
   renders the interior TRANSPARENT and is wrong. The 15 regions are
   flattened offline into one PNG at exactly 354x631, so this is now a
   straight 1:1 placement with no crop maths.                              */
.sol-rack {
  position: absolute;
  left: 465px;
  top: 172.7px;
  width: 354px;
  height: 631px;
  background-image: url("../assets/solutions/solutions-rack.png");
  background-repeat: no-repeat;
  background-size: 354px 631px;
  background-position: 0 0;
}
/* Dark plate on the rack — decoded node 1790, rack-local (118,97.5) */
.sol-rack-plate {
  position: absolute;
  left: 118px;
  top: 97.5px;
  width: 118px;
  height: 31px;
  background: #121a24;
  display: block;
}

/* --- Right column — decoded nodes 1788 / 1707 / 1717 --------------------- */
.sol-og-title {
  position: absolute;
  left: 905px;
  top: 372.2px;
  width: 317px;
  margin: 0;
  color: #fff;
  text-transform: uppercase;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 0.82205;
}
.sol-og-copy {
  position: absolute;
  left: 908px;
  top: 529.2px;
  width: 283px;
  margin: 0;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.105;
}
.sol-cta--og { position: absolute; left: 909px; top: 624.2px; }

/* --- Card gradient differs per variant ----------------------------------
   Default  stops 0.0000/0.4712/1.0 -> #1A2B42 / #C8D1D9 / #16273E
   Variant2 stops 0.0914/0.4844/1.0 -> #1A2B42 / #91A2B4 / #16273E
   Same gradient transform, so the same 239.47deg axis and the same stop
   mapping (css% = 8.71 + t * 82.54) that the Default card already uses.  */
.sec-solutions.is-og .sol-card {
  background: linear-gradient(239.47deg,
    rgb(26, 43, 66) 16.25%,
    rgb(145, 162, 180) 48.69%,
    rgb(22, 39, 62) 91.25%);
}