/* ==========================================================================
   KOBIL — Secure Messenger & Documents — Section: Built for Developers
   Figma: desktop 6015:101708 (1360x526 — py 80 px 40, copy 705 wide, stage
   559x366 at x=761) · mobile 6150:71170 (369x545 — copy 337, stage 337 wide).

   The stage keeps Figma's 559:366 aspect at every breakpoint, so both the
   card and the bloom can be positioned in percentages of it and simply
   scale down on the phone frame.
   ========================================================================== */

.sec-smd-dev {
  display: flex;
  align-items: center;
  gap: var(--w16);
  width: 100%;
  padding: var(--w80) var(--w40);
}

.smd-dev__copy {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--w40);
  width: var(--w705);
}

.smd-dev__title {
  font-family: var(--font-serif);
  font-size: var(--w56);
  font-weight: 400;
  line-height: 1.3;
  color: var(--navy);
}

.smd-dev__lead {
  width: var(--w448);
  max-width: 100%;
  font-family: var(--font-sans);
  font-size: var(--w18);
  font-weight: 400;
  line-height: var(--w26);
  color: var(--navy-70);
}

.smd-dev__stage {
  position: relative;
  flex: none;
  width: var(--w559);
  aspect-ratio: 559 / 366;
}

/* Figma centres the bloom on the stage, 30.65px below its middle, then
   rotates it -44.66°. The exported SVG already carries the blur bleed
   (861.5x799.5 around a 617.5x555.5 shape), hence the >100% box. */
.smd-dev__glow {
  position: absolute;
  top: 58.37%;
  left: 50%;
  width: 154.11%;
  height: 218.44%;
  max-width: none;
  transform: translate(-50%, -50%) rotate(-44.66deg);
  pointer-events: none;
}

.smd-dev__card {
  position: absolute;
  top: 24.2%;
  left: 16.3%;
  width: 65.09%;
  height: 58.79%;
  max-width: none;
  object-fit: contain;
}

@media (max-width: 768px) {
  .sec-smd-dev {
    flex-direction: column;
    align-items: stretch;
    gap: var(--m12);
    /* The stage keeps the desktop aspect (337 wide → 220.7 tall) where Figma
       reserves 262.4; the difference is empty bloom, so it is given back as
       bottom padding to keep the section's rhythm. */
    padding: var(--m40) var(--m16) var(--m82);
  }

  .smd-dev__copy { width: 100%; gap: var(--m8); }
  .smd-dev__title { font-size: var(--m34); line-height: 1.2; }
  .smd-dev__lead { width: 100%; font-size: var(--m14); line-height: var(--m20); }

  .smd-dev__stage { width: 100%; }
}