/* =========================================================
   TWEETLIX — SERVICE MODULE
   FILE: assets/css/services.css
   Namespace: .twl-svc*
   ========================================================= */


/* =========================================================
   ROOT / TOKENS
   ========================================================= */

.twl-svc {
  --twl-svc-bg:
    var(--bg-primary, #050711);

  --twl-svc-bg-deep:
    #02030a;

  --twl-svc-bg-soft:
    #080a18;

  --twl-svc-text:
    var(--text-primary, #f7f8ff);

  --twl-svc-secondary:
    #b7bdd3;

  --twl-svc-muted:
    #858dab;

  --twl-svc-blue:
    var(--accent-blue, #6473ff);

  --twl-svc-violet:
    var(--accent-violet, #7768ff);

  --twl-svc-lavender:
    var(--accent-lavender, #bbc2ff);

  --twl-svc-border:
    rgba(150, 160, 255, 0.15);

  --twl-svc-border-soft:
    rgba(150, 160, 255, 0.085);

  --twl-svc-border-strong:
    rgba(160, 170, 255, 0.28);

  --twl-svc-container:
    1400px;

  --twl-svc-readable:
    820px;

  --twl-svc-transition-fast:
    var(--transition-fast, 180ms ease);

  --twl-svc-transition-base:
    var(--transition-base, 280ms ease);

  position:
    relative;

  width:
    100%;

  overflow:
    clip;

  color:
    var(--twl-svc-text);

  background:
    var(--twl-svc-bg-deep);

  font-family:
    "Montserrat",
    Arial,
    sans-serif;
}


.twl-svc *,
.twl-svc *::before,
.twl-svc *::after {
  box-sizing:
    border-box;
}


/* =========================================================
   CONTAINER / RHYTHM
   ========================================================= */

.twl-svc__container {
  position:
    relative;

  width:
    min(
      calc(100% - 80px),
      var(--twl-svc-container)
    );

  margin-inline:
    auto;
}


.twl-svc__section {
  position:
    relative;

  padding:
    clamp(106px, 8vw, 124px)
    0;
}


.twl-svc__section--compact {
  padding:
    clamp(82px, 6vw, 96px)
    0;
}


.twl-svc__section--chapter {
  padding:
    clamp(148px, 10vw, 166px)
    0;
}


.twl-svc__section-head {
  max-width:
    960px;

  margin-bottom:
    clamp(42px, 4vw, 56px);
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.twl-svc__eyebrow {
  margin:
    0
    0
    20px;

  color:
    rgba(199, 205, 255, 0.76);

  letter-spacing:
    0.11em;
}


.twl-svc__title {
  margin:
    0;

  color:
    var(--twl-svc-text);

  font-size:
    clamp(34px, 4vw, 60px);

  font-weight:
    600;

  line-height:
    1.06;

  letter-spacing:
    -0.045em;

  text-wrap:
    balance;
}


.twl-svc__title--signature {
  max-width:
    1120px;

  font-size:
    clamp(38px, 4.65vw, 68px);
}


.twl-svc a:focus-visible,
.twl-svc button:focus-visible {
  outline:
    2px solid
    var(--twl-svc-lavender);

  outline-offset:
    4px;
}


/* =========================================================
   REVEAL
   ========================================================= */

.twl-svc-reveal {
  opacity:
    1;

  transform:
    none;
}


.twl-svc.twl-svc-motion-ready
.twl-svc-reveal {
  opacity:
    0;

  transform:
    translateY(18px)
    scale(0.995);

  transition:
    opacity 560ms ease,
    transform 560ms ease;
}


.twl-svc.twl-svc-motion-ready
.twl-svc-reveal.is-visible {
  opacity:
    1;

  transform:
    none;
}


/* =========================================================
   HERO
   ========================================================= */

.twl-svc-hero {
  position:
    relative;

  isolation:
    isolate;

  overflow:
    hidden;

  padding:
    clamp(84px, 7vw, 108px)
    0
    clamp(104px, 8vw, 126px);

  background:
    radial-gradient(
      circle at 86% 28%,
      rgba(100, 115, 255, 0.07),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #050711 0%,
      #070916 50%,
      #09091a 100%
    );
}


.twl-svc-hero__grid {
  position:
    absolute;

  inset:
    0;

  z-index:
    -3;

  opacity:
    0.21;

  background-image:
    linear-gradient(
      rgba(134, 144, 255, 0.04) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(134, 144, 255, 0.04) 1px,
      transparent 1px
    );

  background-size:
    72px
    72px;

  -webkit-mask-image:
    radial-gradient(
      circle at 74% 42%,
      #000,
      transparent 72%
    );

  mask-image:
    radial-gradient(
      circle at 74% 42%,
      #000,
      transparent 72%
    );
}


.twl-svc-hero__glow {
  position:
    absolute;

  z-index:
    -2;

  border-radius:
    50%;

  pointer-events:
    none;

  filter:
    blur(150px);
}


.twl-svc-hero__glow--one {
  width:
    650px;

  height:
    650px;

  right:
    -170px;

  top:
    -120px;

  background:
    rgba(100, 115, 255, 0.13);
}


.twl-svc-hero__glow--two {
  width:
    430px;

  height:
    430px;

  right:
    28%;

  bottom:
    -260px;

  background:
    rgba(119, 104, 255, 0.05);
}


.twl-svc-hero__layout {
  display:
    grid;

    grid-template-columns: minmax(0, 1.08fr) minmax(449px, 1.1fr);

  gap:
    clamp(48px, 5vw, 82px);

  align-items:
    center;
}


.twl-svc-hero__content {
  min-width:
    0;

  max-width:
    860px;
}


.twl-svc-hero__title {
  max-width:
    860px;

  margin:
    0;

  color:
    var(--twl-svc-text);

  font-size:
    clamp(46px, 4.65vw, 72px);

  font-weight:
    600;

  line-height:
    1.025;

  letter-spacing:
    -0.052em;

  text-wrap:
    balance;
}


.twl-svc-hero__title em {
  display:
    block;

  margin-top:
    7px;

  color:
    var(--twl-svc-lavender);

  font-style:
    normal;

  font-weight:
    500;
}


.twl-svc-hero__lead {
  max-width:
    790px;

  margin:
    28px
    0
    0;

  color:
    var(--twl-svc-secondary);

  font-size:
    clamp(17px, 1.3vw, 20px);

  line-height:
    1.72;
}


.twl-svc-hero__actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px;

  margin-top:
    34px;
}


.twl-svc-hero__cta {
  min-height:
    48px;

  padding-inline:
    23px;
}


.twl-svc-hero__microcopy {
  max-width:
    610px;

  margin:
    22px
    0
    0;

  color:
    #949cb8;

  font-size:
    13px;

  line-height:
    1.65;
}


/* =========================================================
   HERO INFOGRAPHIC
   ========================================================= */

.twl-svc-hero-map {
  position:
    relative;

  min-width:
    0;

  min-height:
    560px;

  width:
    108%;

  margin-left:
    -4%;
}


.twl-svc-hero-map__frame {
  position:
    absolute;

  inset:
    7% 4% 6%;

  overflow:
    hidden;

  border:
    1px solid
    rgba(151, 160, 255, 0.18);

  border-radius:
    26px;

  background:
    radial-gradient(
      circle at 56% 42%,
      rgba(119, 104, 255, 0.10),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      rgba(13, 16, 34, 0.94),
      rgba(7, 9, 21, 0.96)
    );
}


.twl-svc-hero-map__frame::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  opacity:
    0.28;

  background-image:
    linear-gradient(
      rgba(151, 160, 255, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(151, 160, 255, 0.05) 1px,
      transparent 1px
    );

  background-size:
    48px
    48px;

  -webkit-mask-image:
    radial-gradient(
      circle at 54% 48%,
      #000,
      transparent 76%
    );

  mask-image:
    radial-gradient(
      circle at 54% 48%,
      #000,
      transparent 76%
    );
}


.twl-svc-hero-map__links {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  overflow:
    visible;

  pointer-events:
    none;
}


.twl-svc-hero-map__link {
  fill:
    none;

  stroke:
    rgba(128, 139, 205, 0.42);

  stroke-width:
    1.4;

  vector-effect:
    non-scaling-stroke;
}


.twl-svc-hero-map__link--primary {
  stroke:
    rgba(164, 154, 255, 0.86);

  stroke-width:
    1.85;

  filter:
    drop-shadow(
      0
      0
      6px
      rgba(119, 104, 255, 0.18)
    );
}


.twl-svc-hero-node {
  position:
    absolute;

  width:
    150px;

  padding:
    15px
    16px;

  border:
    1px solid
    rgba(151, 160, 255, 0.16);

  border-radius:
    14px;

  background:
    rgba(9, 12, 27, 0.96);

  box-shadow:
    0 14px 34px
    rgba(0, 0, 0, 0.12);
}


.twl-svc-hero-node::after {
  content:
    "";

  position:
    absolute;

  width:
    5px;

  height:
    5px;

  right:
    12px;

  top:
    12px;

  border-radius:
    50%;

  background:
    var(--twl-svc-blue);

  box-shadow:
    0 0 10px
    rgba(100, 115, 255, 0.46);
}


.twl-svc-hero-node span,
.twl-svc-hero-node small {
  display:
    block;

  color:
    var(--twl-svc-muted);

  font:
    500
    9px/1.35
    "IBM Plex Mono",
    monospace;

  letter-spacing:
    0.075em;

  text-transform:
    uppercase;
}


.twl-svc-hero-node strong {
  display:
    block;

  margin:
    5px
    0
    3px;

  color:
    var(--twl-svc-text);

  font-size:
    15px;

  font-weight:
    600;

  line-height:
    1.2;
}


.twl-svc-hero-node--cms,
.twl-svc-hero-node--api,
.twl-svc-hero-node--analytics {
  border-color:
    rgba(151, 160, 255, 0.24);
}


.twl-svc-hero-node--cms {
  width:
    168px;

  border-color:
    rgba(141, 128, 255, 0.58);

  background:
    linear-gradient(
      145deg,
      rgba(25, 28, 57, 0.98),
      rgba(12, 15, 32, 0.98)
    );

  box-shadow:
    0 18px 46px
    rgba(81, 72, 184, 0.14);
}


.twl-svc-hero-node--cms::after {
  background:
    var(--twl-svc-lavender);

  box-shadow:
    0 0 14px
    rgba(187, 194, 255, 0.62);
}


.twl-svc-hero-node--interface {
  left:
    7%;

  top:
    21%;
}


.twl-svc-hero-node--cms {
  left:
    35%;

  top:
    35%;
}


.twl-svc-hero-node--api {
  right:
    8%;

  top:
    18%;
}


.twl-svc-hero-node--analytics {
  right:
    14%;

  bottom:
    22%;
}


.twl-svc-hero-node--growth {
  left:
    35%;

  bottom:
    9%;
}


.twl-svc-hero-map__status {
  position:
    absolute;

  left:
    7%;

  bottom:
    11%;

  padding:
    12px
    14px;

  border:
    1px solid
    rgba(151, 160, 255, 0.13);

  border-radius:
    10px;

  background:
    rgba(7, 9, 22, 0.96);
}


.twl-svc-hero-map__status span {
  display:
    block;

  color:
    var(--twl-svc-muted);

  font-size:
    8px;

  letter-spacing:
    0.07em;
}


.twl-svc-hero-map__status strong {
  color:
    var(--twl-svc-secondary);

  font-size:
    11px;

  font-weight:
    600;
}


.twl-svc-hero-map__status i {
  display:
    inline-block;

  width:
    5px;

  height:
    5px;

  margin-left:
    6px;

  border-radius:
    50%;

  background:
    var(--twl-svc-blue);

  box-shadow:
    0 0 10px
    var(--twl-svc-blue);
}


/* =========================================================
   SCENARIOS
   ========================================================= */

.twl-svc-scenarios {
  background:
    linear-gradient(
      180deg,
      #050711,
      #070916
    );
}


.twl-svc-scenarios__layout {
  display:
    grid;

  grid-template-columns:
    minmax(390px, 0.9fr)
    minmax(0, 1.1fr);

  gap:
    clamp(60px, 7vw, 112px);

  align-items:
    start;
}


.twl-svc-scenarios__heading {
  position:
    sticky;

  top:
    112px;

  max-width:
    520px;
}


.twl-svc-scenarios__heading
.twl-svc__title {
  font-size:
    clamp(32px, 3.35vw, 52px);

  line-height:
    1.05;
}


.twl-svc-scenarios__list {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  column-gap:
    clamp(30px, 4vw, 64px);

  border-top:
    1px solid
    var(--twl-svc-border);
}


.twl-svc-scenario {
  display:
    grid;

  grid-template-columns:
    34px
    minmax(0, 1fr);

  gap:
    15px;

  align-content:
    start;

  min-height:
    174px;

  padding:
    30px
    0;

  border-bottom:
    1px solid
    var(--twl-svc-border-soft);
}


.twl-svc-scenario__index {
  padding-top:
    4px;

  color:
    rgba(187, 194, 255, 0.56);

  font-size:
    9px;

  letter-spacing:
    0.08em;
}


.twl-svc-scenario h3 {
  margin:
    0;

  color:
    var(--twl-svc-text);

  font-size:
    clamp(19px, 1.6vw, 24px);

  font-weight:
    600;

  line-height:
    1.22;

  letter-spacing:
    -0.025em;
}


.twl-svc-scenario p {
  margin:
    13px
    0
    0;

  color:
    var(--twl-svc-secondary);

  font-size:
    14px;

  line-height:
    1.7;
}


/* =========================================================
   WHAT WE DO
   ========================================================= */

.twl-svc-work {
  background:
    linear-gradient(
      180deg,
      #070916,
      #080a18
    );
}


.twl-svc-work__grid {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    clamp(16px, 1.6vw, 22px);
}


.twl-svc-card {
  min-width:
    0;

  min-height:
    250px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    16px;

  padding:
    clamp(24px, 2vw, 28px);

  border:
    1px solid
    var(--twl-svc-border);

  border-radius:
    24px;

  background:
    linear-gradient(
      145deg,
      rgba(15, 19, 39, 0.9),
      rgba(8, 10, 22, 0.88)
    );

  transition:
    transform
      var(--twl-svc-transition-base),
    border-color
      var(--twl-svc-transition-base),
    box-shadow
      var(--twl-svc-transition-base),
    background
      var(--twl-svc-transition-base);
}


.twl-svc-card:hover {
  transform:
    translateY(-4px);

  border-color:
    rgba(166, 176, 255, 0.32);

  background:
    linear-gradient(
      145deg,
      rgba(17, 21, 43, 0.94),
      rgba(9, 11, 24, 0.92)
    );

  box-shadow:
    0 18px 50px
    rgba(0, 0, 0, 0.16);
}


.twl-svc-card__header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;
}


.twl-svc-card__index {
  color:
    rgba(187, 194, 255, 0.64);

  font-size:
    12px;

  line-height:
    1;

  letter-spacing:
    0.1em;

  transition:
    color
      var(--twl-svc-transition-fast);
}


.twl-svc-card__icon {
  flex:
    0
    0
    auto;

  color:
    var(--twl-svc-lavender);

  opacity:
    0.72;

  transition:
    color
      var(--twl-svc-transition-fast),
    opacity
      var(--twl-svc-transition-fast),
    transform
      var(--twl-svc-transition-fast);
}


.twl-svc-card__icon svg {
  display:
    block;

  width:
    28px;

  height:
    28px;
}


.twl-svc-card:hover
.twl-svc-card__icon {
  color:
    var(--twl-svc-blue);

  opacity:
    1;

  transform:
    translateY(-1px);
}


.twl-svc-card:hover
.twl-svc-card__index {
  color:
    var(--twl-svc-lavender);
}


.twl-svc-card__title {
  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(21px, 1.65vw, 27px);

  font-weight:
    600;

  line-height:
    1.18;

  letter-spacing:
    -0.03em;
}


.twl-svc-card__text {
  margin:
    0;

  color:
    var(--twl-svc-secondary);

  font-size:
    14px;

  line-height:
    1.68;
}


/* =========================================================
   INCLUDED
   ========================================================= */

.twl-svc-included {
  background:
    #080a18;
}


.twl-svc-checklist {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  column-gap:
    clamp(64px, 8vw, 140px);

  margin:
    0;

  padding:
    0;

  list-style:
    none;

  border-top:
    1px solid
    var(--twl-svc-border);
}


.twl-svc-checklist__item {
  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    38px
    minmax(0, 1fr);

  gap:
    16px;

  align-items:
    center;

  min-height:
    72px;

  padding:
    16px
    0;

  border-bottom:
    1px solid
    var(--twl-svc-border-soft);

  color:
    var(--twl-svc-secondary);

  font-size:
    clamp(15px, 1.15vw, 17px);

  line-height:
    1.5;
}


.twl-svc-checklist__index {
  color:
    rgba(187, 194, 255, 0.62);

  font-size:
    9px;

  letter-spacing:
    0.08em;
}


/* =========================================================
   PROCESS
   ========================================================= */

.twl-svc-process {
  overflow:
    hidden;

  background:
    linear-gradient(
      180deg,
      #080a18,
      #050711
    );
}


.twl-svc-process__list {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap:
    clamp(38px, 4.5vw, 72px);

  align-items:
    start;

  margin:
    0;

  padding:
    28px
    0
    70px;

  list-style:
    none;
}


.twl-svc-process__list::before {
  content:
    "";

  position:
    absolute;

  left:
    0;

  right:
    0;

  top:
    28px;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      rgba(119, 104, 255, 0.48),
      rgba(150, 160, 255, 0.10)
    );
}


.twl-svc-process__step {
  position:
    relative;

  min-height:
    178px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    26px;

  padding-top:
    24px;
}


.twl-svc-process__step::before {
  content:
    "";

  position:
    absolute;

  top:
    -3px;

  left:
    0;

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    var(--twl-svc-violet);

  box-shadow:
    0 0 12px
    rgba(119, 104, 255, 0.26);
}


.twl-svc-process__step:nth-child(2) {
  transform:
    translateY(10px);
}


.twl-svc-process__step:nth-child(3) {
  transform:
    translateY(22px);
}


.twl-svc-process__step:nth-child(4) {
  transform:
    translateY(34px);
}


.twl-svc-process__step:nth-child(5) {
  transform:
    translateY(46px);
}


.twl-svc-process__step span {
  color:
    rgba(199, 205, 255, 0.78);

  font-size:
    clamp(34px, 3.4vw, 50px);

  font-weight:
    500;

  line-height:
    1;
}


.twl-svc-process__step strong {
  max-width:
    200px;

  color:
    #ffffff;

  font-size:
    clamp(19px, 1.65vw, 25px);

  font-weight:
    600;

  line-height:
    1.24;

  letter-spacing:
    -0.03em;
}


/* =========================================================
   PROOF / BUSINESS RESULT
   ========================================================= */

.twl-svc-proof {
  position:
    relative;

  background:
    radial-gradient(
      ellipse 72% 74% at 80% 50%,
      rgba(100, 115, 255, 0.07),
      transparent 68%
    ),
    #050711;
}


.twl-svc-proof__layout {
  display:
    grid;

  grid-template-columns:
    minmax(0, 0.8fr)
    minmax(0, 1.2fr);

  gap:
    clamp(68px, 8vw, 128px);

  align-items:
    start;
}


.twl-svc-results__label {
  margin:
    0
    0
    24px;

  color:
    rgba(199, 205, 255, 0.70);

  font-size:
    9px;

  letter-spacing:
    0.11em;

  text-transform:
    uppercase;
}


.twl-svc-results__list {
  margin:
    0;

  padding:
    0;

  list-style:
    none;

  border-top:
    1px solid
    var(--twl-svc-border-soft);
}


.twl-svc-results__list li {
  position:
    relative;

  padding:
    28px
    0
    28px
    34px;

  border-bottom:
    1px solid
    rgba(150, 160, 255, 0.07);

  color:
    #c1c7da;

  font-size:
    clamp(16px, 1.28vw, 19px);

  line-height:
    1.64;
}


.twl-svc-results__list li::before {
  content:
    "";

  position:
    absolute;

  left:
    2px;

  top:
    36px;

  width:
    8px;

  height:
    8px;

  border:
    1px solid
    rgba(187, 194, 255, 0.58);

  border-radius:
    50%;

  background:
    rgba(100, 115, 255, 0.52);
}


.twl-svc-metrics {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  column-gap:
    clamp(42px, 5vw, 78px);

  row-gap:
    clamp(58px, 6vw, 88px);
}


.twl-svc-metric {
  min-width:
    0;
}


.twl-svc-metric__value-row {
  min-height:
    72px;

  display:
    flex;

  align-items:
    baseline;

  gap:
    10px;
}


.twl-svc-metric strong {
  color:
    var(--twl-svc-text);

  font-size:
    clamp(44px, 4.65vw, 68px);

  font-weight:
    600;

  line-height:
    0.96;

  letter-spacing:
    -0.055em;
}


.twl-svc-metric--featured strong {
  font-size:
    clamp(49px, 5.2vw, 76px);
}


.twl-svc-metric__unit {
  color:
    var(--twl-svc-lavender);

  font-size:
    clamp(13px, 1vw, 16px);

  font-weight:
    500;

  line-height:
    1.2;
}


.twl-svc-metric p {
  max-width:
    270px;

  margin:
    16px
    0
    0;

  color:
    #929bb8;

  font-size:
    13px;

  line-height:
    1.62;
}


/* =========================================================
   ARCHITECTURE INFOGRAPHIC
   ========================================================= */

.twl-svc-architecture {
  position:
    relative;

  overflow:
    hidden;

  padding-top:
    clamp(150px, 10vw, 166px);

  padding-bottom:
    clamp(96px, 7vw, 116px);

  background:
    radial-gradient(
      ellipse 60% 52% at 56% 62%,
      rgba(119, 104, 255, 0.05),
      transparent 72%
    ),
    linear-gradient(
      180deg,
      #050711,
      #070916
    );
}


.twl-svc-architecture__heading {
  max-width:
    1080px;

  margin-bottom:
    54px;
}


.twl-svc-architecture-map {
  position:
    relative;

  height:
    440px;

  min-height:
    440px;

  overflow:
    hidden;

  border:
    1px solid
    var(--twl-svc-border);

  border-radius:
    26px;

  background:
    radial-gradient(
      circle at 57% 49%,
      rgba(119, 104, 255, 0.10),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(12, 15, 32, 0.97),
      rgba(6, 8, 18, 0.98)
    );
}


.twl-svc-architecture-map__grid {
  position:
    absolute;

  inset:
    0;

  opacity:
    0.16;

  background-image:
    linear-gradient(
      rgba(134, 144, 255, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(134, 144, 255, 0.045) 1px,
      transparent 1px
    );

  background-size:
    56px
    56px;

  -webkit-mask-image:
    radial-gradient(
      circle at 56% 50%,
      #000,
      transparent 76%
    );

  mask-image:
    radial-gradient(
      circle at 56% 50%,
      #000,
      transparent 76%
    );
}


.twl-svc-architecture-map__glow {
  position:
    absolute;

  width:
    480px;

  height:
    260px;

  left:
    52%;

  top:
    50%;

  transform:
    translate(-50%, -50%);

  border-radius:
    50%;

  background:
    rgba(119, 104, 255, 0.055);

  filter:
    blur(100px);

  pointer-events:
    none;
}


.twl-svc-architecture-map__links {
  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  width:
    100%;

  height:
    100%;

  overflow:
    visible;

  opacity:
    0;

  pointer-events:
    none;

  transition:
    opacity 180ms ease;
}


.twl-svc-architecture-map.is-links-ready
.twl-svc-architecture-map__links {
  opacity:
    1;
}


.twl-svc-architecture-map__link {
  fill:
    none;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  vector-effect:
    non-scaling-stroke;
}


.twl-svc-architecture-map__link--primary {
  stroke:
    rgba(164, 154, 255, 0.82);

  stroke-width:
    1.55;

  filter:
    drop-shadow(
      0
      0
      5px
      rgba(119, 104, 255, 0.13)
    );
}


.twl-svc-architecture-map__link--secondary {
  stroke:
    rgba(105, 116, 165, 0.48);

  stroke-width:
    1.15;
}


.twl-svc-architecture-map__node {
  position:
    absolute;

  z-index:
    2;

  width:
    12.8333%;

  min-width:
    108px;

  min-height:
    78px;

  padding:
    13px
    15px;

  border:
    1px solid
    rgba(151, 160, 255, 0.20);

  border-radius:
    13px;

  background:
    rgba(9, 12, 27, 0.97);

  box-shadow:
    0
    12px
    30px
    rgba(0, 0, 0, 0.10);
}


.twl-svc-architecture-map__node::after {
  content:
    "";

  position:
    absolute;

  top:
    12px;

  right:
    12px;

  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

  background:
    rgba(100, 115, 255, 0.90);
}


.twl-svc-architecture-map__node span,
.twl-svc-architecture-map__node small {
  display:
    block;

  color:
    var(--twl-svc-muted);

  font:
    500
    8px/1.35
    "IBM Plex Mono",
    monospace;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.twl-svc-architecture-map__node strong {
  display:
    block;

  margin:
    5px
    0
    3px;

  color:
    var(--twl-svc-text);

  font-size:
    14px;

  font-weight:
    600;

  line-height:
    1.2;
}


.twl-svc-architecture-map__node.is-core {
  width:
    14%;

  min-width:
    118px;

  border-color:
    rgba(141, 128, 255, 0.62);

  background:
    linear-gradient(
      145deg,
      rgba(25, 28, 57, 0.98),
      rgba(12, 15, 32, 0.98)
    );

  box-shadow:
    0
    18px
    46px
    rgba(81, 72, 184, 0.12);
}


.twl-svc-architecture-map__node.is-core::after {
  background:
    var(--twl-svc-lavender);

  box-shadow:
    0
    0
    12px
    rgba(187, 194, 255, 0.50);
}


.twl-svc-architecture-map__node.is-secondary {
  border-color:
    rgba(105, 115, 160, 0.24);

  background:
    rgba(8, 11, 24, 0.95);
}


.twl-svc-architecture-map__node.is-secondary::after {
  background:
    rgba(117, 127, 171, 0.72);

  box-shadow:
    none;
}


/*
 * Node positions are expressed in the same proportional
 * coordinate system as the architecture SVG.
 *
 * Desktop flow:
 *
 * Business task → Structure → Interface → CMS
 *                                  ↙       ↘
 *                                CRM       API
 *                                  ↘       ↙
 *                                 Analytics
 *                                     ↓
 *                                   Growth
 */

.twl-svc-architecture-map__node--task {
  left:
    4%;

  top:
    37%;
}


.twl-svc-architecture-map__node--structure {
  left:
    22%;

  top:
    15%;
}


.twl-svc-architecture-map__node--interface {
  left:
    38%;

  top:
    37%;
}


.twl-svc-architecture-map__node--cms {
  left:
    54%;

  top:
    37%;
}


.twl-svc-architecture-map__node--crm {
  left:
    72%;

  top:
    15%;
}


.twl-svc-architecture-map__node--api {
  left:
    72%;

  top:
    65%;
}


.twl-svc-architecture-map__node--analytics {
  left:
    84.8333%;

  top:
    37%;
}


.twl-svc-architecture-map__node--growth {
  left:
    84.8333%;

  bottom:
    5%;
}


.twl-svc-architecture-map__status {
  position:
    absolute;

  left:
    3%;

  bottom:
    6%;

  z-index:
    2;

  padding:
    10px
    12px;

  border:
    1px solid
    rgba(151, 160, 255, 0.12);

  border-radius:
    9px;

  background:
    rgba(7, 9, 22, 0.92);
}


.twl-svc-architecture-map__status span {
  display:
    block;

  color:
    var(--twl-svc-muted);

  font-size:
    8px;

  letter-spacing:
    0.08em;
}


.twl-svc-architecture-map__status strong {
  color:
    var(--twl-svc-secondary);

  font-size:
    10px;

  font-weight:
    600;
}


.twl-svc-architecture-map__status i {
  display:
    inline-block;

  width:
    5px;

  height:
    5px;

  margin-left:
    5px;

  border-radius:
    50%;

  background:
    var(--twl-svc-blue);
}


/* =========================================================
   TECHNOLOGIES
   ========================================================= */

.twl-svc-tech {
  background:
    #070916;
}


.twl-svc-tech__heading {
  max-width:
    820px;

  margin-bottom:
    42px;
}


.twl-svc-tech__groups {
  display:
    grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    14px;
}


.twl-svc-tech__group {
  min-width:
    0;

  min-height:
    146px;

  padding:
    20px
    20px
    22px;

  border:
    1px solid
    rgba(150, 160, 255, 0.10);

  border-radius:
    16px;

  background:
    rgba(12, 15, 31, 0.50);
}


.twl-svc-tech__label {
  display:
    block;

  color:
    rgba(199, 205, 255, 0.66);

  font-size:
    9px;

  letter-spacing:
    0.10em;

  text-transform:
    uppercase;
}


.twl-svc-tech__chips {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-top:
    17px;
}


.twl-svc-tech__chips span {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    29px;

  padding:
    6px
    9px;

  border:
    1px solid
    rgba(150, 160, 255, 0.11);

  border-radius:
    8px;

  background:
    rgba(100, 115, 255, 0.025);

  color:
    var(--twl-svc-secondary);

  font-size:
    12px;

  line-height:
    1.35;
}


/* =========================================================
   RELATED SERVICES
   ========================================================= */

.twl-svc-related {
  background:
    linear-gradient(
      180deg,
      #070916,
      #050711
    );
}


.twl-svc-related__heading {
  max-width:
    800px;

  margin-bottom:
    34px;
}


.twl-svc-related__list {
  display:
    grid;

  border-top:
    1px solid
    var(--twl-svc-border);
}


.twl-svc-related__item {
  display:
    grid;

  grid-template-columns:
    58px
    minmax(0, 1fr)
    auto;

  gap:
    20px;

  align-items:
    center;

  min-height:
    62px;

  padding:
    0
    10px
    0
    6px;

  border-bottom:
    1px solid
    var(--twl-svc-border-soft);

  color:
    inherit;

  text-decoration:
    none;

  transition:
    padding
      var(--twl-svc-transition-fast),
    border-color
      var(--twl-svc-transition-fast),
    background
      var(--twl-svc-transition-fast);
}


.twl-svc-related__index {
  color:
    var(--twl-svc-muted);

  font-size:
    9px;

  letter-spacing:
    0.09em;
}


.twl-svc-related__item strong {
  color:
    var(--twl-svc-secondary);

  font-size:
    clamp(19px, 1.48vw, 23px);

  font-weight:
    600;

  line-height:
    1.3;

  transition:
    color
      var(--twl-svc-transition-fast);
}


.twl-svc-related__arrow {
  color:
    rgba(199, 205, 255, 0.78);

  font-size:
    19px;

  transform:
    translateX(0);

  transition:
    color
      var(--twl-svc-transition-fast),
    transform
      var(--twl-svc-transition-fast);
}


.twl-svc-related__item:hover,
.twl-svc-related__item:focus-visible {
  padding-left:
    16px;

  border-color:
    rgba(160, 170, 255, 0.20);

  background:
    rgba(100, 115, 255, 0.04);
}


.twl-svc-related__item:hover strong,
.twl-svc-related__item:focus-visible strong {
  color:
    var(--twl-svc-text);
}


.twl-svc-related__item:hover
.twl-svc-related__arrow,
.twl-svc-related__item:focus-visible
.twl-svc-related__arrow {
  color:
    var(--twl-svc-lavender);

  transform:
    translateX(4px);
}


/* =========================================================
   FAQ
   ========================================================= */

.twl-svc .twl-faq {
  position:
    relative;

  padding:
    146px
    0
    138px;

  background:
    radial-gradient(
      ellipse 52% 44% at 76% 44%,
      rgba(119, 104, 255, 0.035),
      transparent 72%
    ),
    #050711;
}


.twl-svc .twl-faq__inner {
  width:
    min(
      calc(100% - 80px),
      var(--twl-svc-container)
    );

  grid-template-columns:
    minmax(280px, 0.72fr)
    minmax(0, 1.28fr);

  gap:
    clamp(64px, 8vw, 126px);
}


.twl-svc .twl-faq__list {
  width:
    100%;
}


.twl-svc .twl-faq-item__trigger {
  min-height:
    56px;

  padding:
    16px
    22px;
}


.twl-svc .twl-faq-item__question {
  color:
    #c0c6d9;

  font-size:
    clamp(14px, 1.08vw, 16px);

  line-height:
    1.42;
}


.twl-svc .twl-faq-item__toggle {
  opacity:
    0.88;
}


.twl-svc .twl-faq-item__answer-inner {
  padding-inline:
    22px;

  padding-bottom:
    20px;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.twl-svc-cta {
  position:
    relative;

  background:
    #050711;
}


.twl-svc-cta::before {
  content:
    "";

  position:
    absolute;

  width:
    760px;

  height:
    460px;

  left:
    50%;

  top:
    -170px;

  transform:
    translateX(-50%);

  border-radius:
    50%;

  background:
    rgba(119, 104, 255, 0.035);

  filter:
    blur(150px);

  pointer-events:
    none;
}


.twl-svc-cta__box {
  position:
    relative;

  isolation:
    isolate;

  overflow:
    hidden;

  padding:
    clamp(64px, 6vw, 90px);

  border:
    1px solid
    rgba(160, 170, 255, 0.24);

  border-radius:
    28px;

  background:
    radial-gradient(
      circle at 79% 30%,
      rgba(100, 115, 255, 0.21),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(15, 19, 39, 0.97),
      rgba(7, 9, 22, 0.98)
    );
}


.twl-svc-cta__grid {
  position:
    absolute;

  inset:
    0;

  z-index:
    -1;

  opacity:
    0.22;

  background-image:
    linear-gradient(
      rgba(134, 144, 255, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(134, 144, 255, 0.05) 1px,
      transparent 1px
    );

  background-size:
    58px
    58px;

  -webkit-mask-image:
    radial-gradient(
      circle at 75% 45%,
      #000,
      transparent 70%
    );

  mask-image:
    radial-gradient(
      circle at 75% 45%,
      #000,
      transparent 70%
    );
}


.twl-svc-cta__content {
  max-width:
    860px;
}


.twl-svc-cta__title {
  max-width:
    850px;

  margin:
    0;

  color:
    var(--twl-svc-text);

  font-size:
    clamp(38px, 4.8vw, 68px);

  font-weight:
    600;

  line-height:
    1.04;

  letter-spacing:
    -0.05em;

  text-wrap:
    balance;
}


.twl-svc-cta__text {
  max-width:
    680px;

  margin:
    25px
    0
    40px;

  color:
    var(--twl-svc-secondary);

  font-size:
    clamp(16px, 1.3vw, 19px);

  line-height:
    1.7;
}


/* =========================================================
   RESPONSIVE — 1200
   ========================================================= */

@media (max-width: 1200px) {

  .twl-svc-hero__layout {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(390px, 0.88fr);

    gap:
      42px;
  }


  .twl-svc-hero-map {
    width:
      100%;

    margin-left:
      0;

    min-height:
      520px;
  }


  .twl-svc-process__list {
    gap:
      36px;
  }


}


/* =========================================================
   RESPONSIVE — 1024
   ========================================================= */

@media (max-width: 1024px) {

  .twl-svc__container {
    width:
      min(
        calc(100% - 48px),
        var(--twl-svc-container)
      );
  }


  .twl-svc__section {
    padding:
      104px
      0;
  }


  .twl-svc__section--compact {
    padding:
      82px
      0;
  }


  .twl-svc__section--chapter {
    padding:
      132px
      0;
  }


  .twl-svc-scenarios__layout,
  .twl-svc-proof__layout {
    gap:
      52px;
  }


  .twl-svc-work__grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .twl-svc-process__list {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );

    row-gap:
      52px;
  }


  .twl-svc-process__list::before {
    display:
      none;
  }


  .twl-svc-process__step:nth-child(n) {
    transform:
      none;
  }


  .twl-svc-process__step {
    min-height:
      150px;

    padding-top:
      18px;

    border-top:
      1px solid
      var(--twl-svc-border-soft);
  }


  .twl-svc-process__step::before {
    top:
      -4px;
  }


  .twl-svc-tech__groups {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .twl-svc-architecture {
    padding-top:
      132px;

    padding-bottom:
      92px;
  }


  .twl-svc-architecture-map__node {
    padding:
      11px
      12px;
  }


  .twl-svc-architecture-map__node strong {
    font-size:
      13px;
  }

}


/* =========================================================
   RESPONSIVE — 900
   ========================================================= */

@media (max-width: 900px) {

  .twl-svc-hero__layout,
  .twl-svc-scenarios__layout,
  .twl-svc-proof__layout {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .twl-svc-hero-map {
    max-width:
      680px;

    min-height:
      500px;

    margin:
      18px
      auto
      0;
  }


  .twl-svc-scenarios__heading {
    position:
      static;

    max-width:
      680px;
  }


  .twl-svc-proof__layout {
    gap:
      64px;
  }


  .twl-svc-architecture-map {
    height:
      auto;

    min-height:
      0;

    display:
      grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-template-areas:
      "task task"
      "structure structure"
      "interface interface"
      "cms cms"
      "crm api"
      "analytics analytics"
      "growth growth";

    gap:
      12px;

    padding:
      34px;
  }


  .twl-svc-architecture-map__links,
  .twl-svc-architecture-map__status {
    display:
      none;
  }


  .twl-svc-architecture-map__node,
  .twl-svc-architecture-map__node.is-core {
    position:
      relative;

    inset:
      auto;

    width:
      100%;

    min-height:
      70px;
  }


  .twl-svc-architecture-map__node--task {
    grid-area:
      task;
  }


  .twl-svc-architecture-map__node--structure {
    grid-area:
      structure;
  }


  .twl-svc-architecture-map__node--interface {
    grid-area:
      interface;
  }


  .twl-svc-architecture-map__node--cms {
    grid-area:
      cms;
  }


  .twl-svc-architecture-map__node--crm {
    grid-area:
      crm;
  }


  .twl-svc-architecture-map__node--api {
    grid-area:
      api;
  }


  .twl-svc-architecture-map__node--analytics {
    grid-area:
      analytics;
  }


  .twl-svc-architecture-map__node--growth {
    grid-area:
      growth;
  }


  .twl-svc
  .twl-faq__inner {
    grid-template-columns:
      minmax(0, 1fr);

    row-gap:
      34px;
  }

}


/* =========================================================
   RESPONSIVE — 767
   ========================================================= */

@media (max-width: 767px) {

  .twl-svc__container {
    width:
      min(
        calc(100% - 40px),
        var(--twl-svc-container)
      );
  }


  .twl-svc__section,
  .twl-svc__section--compact,
  .twl-svc__section--chapter {
    padding:
      80px
      0;
  }


  .twl-svc__section-head {
    margin-bottom:
      34px;
  }


  .twl-svc__title {
    font-size:
      clamp(30px, 9vw, 42px);
  }


  .twl-svc__title--signature {
    font-size:
      clamp(34px, 10vw, 48px);
  }


  .twl-svc-hero {
    padding:
      68px
      0
      84px;
  }


  .twl-svc-hero__title {
    font-size:
      clamp(42px, 13vw, 58px);
  }


  .twl-svc-hero-map {
    min-height:
      450px;
  }


  .twl-svc-hero-node {
    width:
      132px;

    padding:
      12px
      13px;
  }


  .twl-svc-hero-node--cms {
    width:
      144px;
  }


  .twl-svc-hero-node strong {
    font-size:
      13px;
  }


  .twl-svc-scenarios__list,
  .twl-svc-checklist,
  .twl-svc-metrics,
  .twl-svc-work__grid,
  .twl-svc-tech__groups,
  .twl-svc-process__list {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .twl-svc-scenario {
    min-height:
      0;
  }


  .twl-svc-process__list {
    gap:
      24px;

    padding-bottom:
      0;
  }


  .twl-svc-process__step {
    min-height:
      126px;
  }


  .twl-svc-architecture {
    padding:
      86px
      0
      76px;
  }


  .twl-svc-architecture__heading {
    margin-bottom:
      38px;
  }


  .twl-svc-architecture-map {
    padding:
      24px;

    border-radius:
      22px;
  }


  .twl-svc-tech__group {
    min-height:
      0;
  }


  .twl-svc-related__item {
    grid-template-columns:
      38px
      minmax(0, 1fr)
      auto;

    gap:
      12px;
  }


  .twl-svc
  .twl-faq {
    padding:
      92px
      0;
  }


  .twl-svc
  .twl-faq__inner {
    width:
      min(
        calc(100% - 40px),
        var(--twl-svc-container)
      );
  }


  .twl-svc-cta__box {
    padding:
      40px
      24px;
  }

}


/* =========================================================
   RESPONSIVE — 560
   ========================================================= */

@media (max-width: 560px) {

  .twl-svc-hero-map {
    min-height:
      420px;
  }


  .twl-svc-hero-node {
    width:
      116px;

    padding:
      10px
      11px;
  }


  .twl-svc-hero-node--cms {
    width:
      128px;
  }


  .twl-svc-hero-node span,
  .twl-svc-hero-node small {
    font-size:
      7px;
  }


  .twl-svc-hero-node strong {
    font-size:
      12px;
  }


  .twl-svc-card {
    min-height:
      220px;
  }


  .twl-svc-card__icon svg {
    width:
      26px;

    height:
      26px;
  }


  .twl-svc-metric__value-row {
    min-height:
      62px;
  }


  .twl-svc-metric strong,
  .twl-svc-metric--featured strong {
    font-size:
      clamp(42px, 13vw, 58px);
  }


  .twl-svc-architecture-map {
    grid-template-columns:
      minmax(0, 1fr);

    grid-template-areas:
      "task"
      "structure"
      "interface"
      "cms"
      "crm"
      "api"
      "analytics"
      "growth";
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .twl-svc *,
  .twl-svc *::before,
  .twl-svc *::after {
    scroll-behavior:
      auto !important;
  }


  .twl-svc.twl-svc-motion-ready
  .twl-svc-reveal,
  .twl-svc.twl-svc-motion-ready
  .twl-svc-reveal.is-visible {
    opacity:
      1;

    transform:
      none;

    transition:
      none;
  }


  .twl-svc-card,
  .twl-svc-card__icon,
  .twl-svc-related__item,
  .twl-svc-related__arrow {
    transition:
      none;
  }

}

/* =========================================================
   ARCHITECTURE INFOGRAPHIC — DESKTOP FIT PATCH
   ========================================================= */


/* ---------------------------------------------------------
   Canvas
   --------------------------------------------------------- */

.twl-svc-architecture-map {
  min-height:
    420px;

  /*
   * Даём схеме чуть больше внутреннего воздуха,
   * но не увеличиваем общую высоту.
   */
  padding-inline:
    24px;
}


/* ---------------------------------------------------------
   Nodes
   --------------------------------------------------------- */

.twl-svc-architecture-map__node {
  width:
    142px;

  min-height:
    72px;

  padding:
    12px
    14px;
}


.twl-svc-architecture-map__node.is-core {
  width:
    154px;
}


.twl-svc-architecture-map__node strong {
  font-size:
    13px;
}


.twl-svc-architecture-map__node span,
.twl-svc-architecture-map__node small {
  font-size:
    7px;
}


/* =========================================================
   SAFE DESKTOP COORDINATE SYSTEM

   Вместо растягивания от 4% до 85%
   собираем всю систему внутри примерно 90%
   рабочей ширины canvas.
   ========================================================= */


/* 01 — Бизнес-задача */

.twl-svc-architecture-map__node--task {
  left:
    4%;

  top:
    38%;
}


/* 02 — Структура */

.twl-svc-architecture-map__node--structure {
  left:
    20%;

  top:
    15%;
}


/* 03 — Интерфейс */

.twl-svc-architecture-map__node--interface {
  left:
    36%;

  top:
    38%;
}


/* 04 — CMS */

.twl-svc-architecture-map__node--cms {
  left:
    51%;

  top:
    38%;
}


/* 05 — CRM */

.twl-svc-architecture-map__node--crm {
  left:
    68%;

  top:
    15%;
}


/* 06 — API */

.twl-svc-architecture-map__node--api {
  left:
    68%;

  top:
    64%;
}


/*
 * 07–08 лучше привязывать через right,
 * а не left.
 *
 * Тогда ширина самих карточек никогда
 * не вытолкнет их за пределы canvas.
 */

.twl-svc-architecture-map__node--analytics {
  left:
    auto;

  right:
    4%;

  top:
    38%;
}


.twl-svc-architecture-map__node--growth {
  left:
    auto;

  right:
    4%;

  bottom:
    5%;
}


/* ---------------------------------------------------------
   System status
   --------------------------------------------------------- */

.twl-svc-architecture-map__status {
  left:
    3%;

  bottom:
    5%;
}


/* =========================================================
   COMPACT DESKTOP
   901–1200
   ========================================================= */

@media (
  min-width: 901px
) and (
  max-width: 1200px
) {

  .twl-svc-architecture-map {
    min-height:
      400px;

    padding-inline:
      18px;
  }


  .twl-svc-architecture-map__node {
    width:
      124px;

    min-height:
      68px;

    padding:
      10px
      12px;
  }


  .twl-svc-architecture-map__node.is-core {
    width:
      136px;
  }


  .twl-svc-architecture-map__node strong {
    font-size:
      12px;
  }


  /* task */

  .twl-svc-architecture-map__node--task {
    left:
      3%;
  }


  /* structure */

  .twl-svc-architecture-map__node--structure {
    left:
      19%;
  }


  /* interface */

  .twl-svc-architecture-map__node--interface {
    left:
      35%;
  }


  /* CMS */

  .twl-svc-architecture-map__node--cms {
    left:
      50%;
  }


  /* CRM / API */

  .twl-svc-architecture-map__node--crm,
  .twl-svc-architecture-map__node--api {
    left:
      67%;
  }


  /* analytics / growth */

  .twl-svc-architecture-map__node--analytics,
  .twl-svc-architecture-map__node--growth {
    right:
      3%;
  }

}
/* =========================================================
   SERVICE MODULE — RESPONSIVE PATCH 1.0

   Targets:
   - tablet / mobile rhythm
   - Hero node infographic
   - Architecture node infographic
   - Technology card/tag hover

   Temporary override layer.
   Will be merged into base CSS during final refactor.
   ========================================================= */


/* =========================================================
   TECHNOLOGIES — INTERACTION
   ========================================================= */

.twl-svc-tech__group {
  transition:
    transform 240ms ease,
    border-color 240ms ease,
    background 240ms ease,
    box-shadow 240ms ease;
}


.twl-svc-tech__label {
  transition:
    color 200ms ease;
}


.twl-svc-tech__chips span {
  transition:
    transform 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}


@media (hover: hover) and (pointer: fine) {

  .twl-svc-tech__group:hover {
    transform:
      translateY(-3px);

    border-color:
      rgba(166, 176, 255, 0.25);

    background:
      linear-gradient(
        145deg,
        rgba(17, 21, 43, 0.72),
        rgba(10, 12, 27, 0.66)
      );

    box-shadow:
      0 18px 46px
      rgba(0, 0, 0, 0.14);
  }


  .twl-svc-tech__group:hover
  .twl-svc-tech__label {
    color:
      rgba(211, 215, 255, 0.90);
  }


  .twl-svc-tech__chips span:hover {
    transform:
      translateY(-1px);

    border-color:
      rgba(166, 176, 255, 0.34);

    background:
      rgba(100, 115, 255, 0.09);

    color:
      #f3f5ff;

    box-shadow:
      0 6px 18px
      rgba(69, 78, 158, 0.10);
  }

}


/* =========================================================
   TABLET
   <= 1024
   ========================================================= */

@media (max-width: 1024px) {

  /* -------------------------------------------------------
     General rhythm
     ------------------------------------------------------- */

  .twl-svc__section {
    padding:
      92px
      0;
  }


  .twl-svc__section--compact {
    padding:
      76px
      0;
  }


  .twl-svc__section--chapter {
    padding:
      112px
      0;
  }


  /* -------------------------------------------------------
     Hero
     ------------------------------------------------------- */

  .twl-svc-hero {
    padding:
      76px
      0
      94px;
  }


  .twl-svc-hero__layout {
    gap:
      52px;
  }


  /* -------------------------------------------------------
     Work cards
     ------------------------------------------------------- */

  .twl-svc-card {
    min-height:
      232px;
  }


  /* -------------------------------------------------------
     Technologies
     ------------------------------------------------------- */

  .twl-svc-tech__group {
    min-height:
      132px;
  }

}


/* =========================================================
   TABLET NODE COMPOSITION
   <= 900

   Hero remains a real infographic with live SVG links.

   Architecture intentionally switches from horizontal
   desktop diagram into a responsive pipeline.
   ========================================================= */

@media (max-width: 900px) {

  /* =======================================================
     HERO — TABLET INFOGRAPHIC
     ======================================================= */

  .twl-svc-hero-map {
    width:
      min(100%, 620px);

    max-width:
      620px;

    min-height:
      460px;

    margin:
      18px
      auto
      0;
  }


  .twl-svc-hero-map__frame {
    inset:
      0;

    border-radius:
      24px;
  }


  .twl-svc-hero-map__links {
    inset:
      0;

    z-index:
      1;
  }


  .twl-svc-hero-node {
    z-index:
      2;

    width:
      136px;

    min-width:
      0;

    padding:
      12px
      13px;
  }


  .twl-svc-hero-node--cms {
    width:
      148px;
  }


  .twl-svc-hero-node strong {
    font-size:
      13px;
  }


  .twl-svc-hero-node span,
  .twl-svc-hero-node small {
    font-size:
      7.5px;
  }


  /*
   * Compact desktop-like arrangement.
   *
   * Interface  → CMS → API/CRM
   *                     ↓
   *                Analytics
   *                     ↙
   *                  Growth
   */

  .twl-svc-hero-node--interface {
    left:
      6%;

    top:
      16%;
  }


  .twl-svc-hero-node--cms {
    left:
      36%;

    top:
      36%;
  }


  .twl-svc-hero-node--api {
    right:
      6%;

    top:
      14%;
  }


  .twl-svc-hero-node--analytics {
    right:
      9%;

    bottom:
      17%;
  }


  .twl-svc-hero-node--growth {
    left:
      35%;

    bottom:
      7%;
  }


  .twl-svc-hero-map__status {
    left:
      5%;

    bottom:
      7%;
  }


  /* =======================================================
     ARCHITECTURE — TABLET PIPELINE
     ======================================================= */

  .twl-svc-architecture-map {
    height:
      auto;

    min-height:
      0;

    display:
      grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-template-areas:
      "task task"
      "structure structure"
      "interface interface"
      "cms cms"
      "crm api"
      "analytics analytics"
      "growth growth";

    gap:
      14px
      18px;

    padding:
      36px;

    border-radius:
      24px;
  }


  /*
   * Desktop SVG is intentionally removed here.
   * Spatial hierarchy itself carries the flow.
   */

  .twl-svc-architecture-map__links,
  .twl-svc-architecture-map__status {
    display:
      none;
  }


  .twl-svc-architecture-map__node,
  .twl-svc-architecture-map__node.is-core {
    position:
      relative;

    inset:
      auto;

    width:
      62%;

    min-width:
      0;

    min-height:
      72px;

    padding:
      12px
      14px;
  }


  /*
   * Alternating placement preserves
   * the infographic character instead
   * of producing a plain vertical list.
   */

  .twl-svc-architecture-map__node--task {
    grid-area:
      task;

    justify-self:
      start;
  }


  .twl-svc-architecture-map__node--structure {
    grid-area:
      structure;

    justify-self:
      end;
  }


  .twl-svc-architecture-map__node--interface {
    grid-area:
      interface;

    justify-self:
      start;
  }


  .twl-svc-architecture-map__node--cms {
    grid-area:
      cms;

    justify-self:
      center;

    width:
      66%;
  }


  /*
   * Important semantic branch:
   * CRM and API remain next to each other.
   */

  .twl-svc-architecture-map__node--crm,
  .twl-svc-architecture-map__node--api {
    width:
      100%;
  }


  .twl-svc-architecture-map__node--crm {
    grid-area:
      crm;

    justify-self:
      stretch;
  }


  .twl-svc-architecture-map__node--api {
    grid-area:
      api;

    justify-self:
      stretch;
  }


  .twl-svc-architecture-map__node--analytics {
    grid-area:
      analytics;

    justify-self:
      end;
  }


  .twl-svc-architecture-map__node--growth {
    grid-area:
      growth;

    justify-self:
      center;
  }


  .twl-svc-architecture-map__node strong {
    font-size:
      14px;
  }


  /*
   * Slight visual hierarchy.
   */

  .twl-svc-architecture-map__node.is-core {
    border-color:
      rgba(141, 128, 255, 0.60);

    background:
      linear-gradient(
        145deg,
        rgba(25, 28, 57, 0.98),
        rgba(12, 15, 32, 0.98)
      );
  }


  .twl-svc-architecture-map__node.is-secondary {
    background:
      rgba(8, 11, 24, 0.92);
  }

}


/* =========================================================
   MOBILE
   <= 767
   ========================================================= */

@media (max-width: 767px) {

  /* =======================================================
     PAGE RHYTHM
     ======================================================= */

  .twl-svc__section,
  .twl-svc__section--compact,
  .twl-svc__section--chapter {
    padding:
      72px
      0;
  }


  .twl-svc__section-head {
    margin-bottom:
      30px;
  }


  .twl-svc-hero {
    padding:
      58px
      0
      72px;
  }


  /* =======================================================
     HERO TYPOGRAPHY
     ======================================================= */

  .twl-svc-hero__lead {
    margin-top:
      20px;

    font-size:
      15px;

    line-height:
      1.65;
  }


  .twl-svc-hero__actions {
    margin-top:
      26px;
  }


  .twl-svc-hero__microcopy {
    margin-top:
      17px;
  }


  /* =======================================================
     HERO NODE INFOGRAPHIC — MOBILE

     Instead of scaling desktop scene down,
     create a readable S-route.

        Interface
             ↘
             CMS
               ↗
             API
              ↓
          Analytics
             ↙
           Growth

     JS keeps drawing connections using real
     node coordinates.
     ======================================================= */

  .twl-svc-hero-map {
    width:
      100%;

    max-width:
      430px;

    min-height:
      520px;

    margin:
      30px
      auto
      0;
  }


  .twl-svc-hero-map__frame {
    inset:
      0;

    border-radius:
      20px;
  }


  .twl-svc-hero-map__frame::before {
    background-size:
      38px
      38px;

    opacity:
      0.20;
  }


  .twl-svc-hero-node {
    width:
      31%;

    min-width:
      0;

    min-height:
      62px;

    padding:
      10px
      11px;

    border-radius:
      11px;
  }


  .twl-svc-hero-node--cms {
    width:
      34%;
  }


  .twl-svc-hero-node strong {
    font-size:
      12px;

    line-height:
      1.15;
  }


  .twl-svc-hero-node span,
  .twl-svc-hero-node small {
    font-size:
      6.5px;

    line-height:
      1.25;
  }


  .twl-svc-hero-node::after {
    top:
      9px;

    right:
      9px;

    width:
      4px;

    height:
      4px;
  }


  /*
   * Positions respect connection directions
   * already configured in services.js:
   *
   * interface right → CMS left
   * CMS right       → API left
   * API bottom      → analytics top
   * analytics left  → growth right
   */

  .twl-svc-hero-node--interface {
    left:
      3%;

    top:
      8%;
  }


  .twl-svc-hero-node--cms {
    left:
      33%;

    top:
      27%;
  }


  .twl-svc-hero-node--api {
    right:
      3%;

    top:
      43%;
  }


  .twl-svc-hero-node--analytics {
    right:
      3%;

    bottom:
      18%;
  }


  .twl-svc-hero-node--growth {
    left:
      33%;

    bottom:
      4%;
  }


  /*
   * Status does not add enough value on a phone
   * to justify occupying infographic space.
   */

  .twl-svc-hero-map__status {
    display:
      none;
  }


  /* =======================================================
     WHAT WE DO
     ======================================================= */

  .twl-svc-card {
    min-height:
      0;

    padding:
      22px;
  }


  .twl-svc-card__title {
    font-size:
      21px;
  }


  /* =======================================================
     CHECKLIST
     ======================================================= */

  .twl-svc-checklist__item {
    min-height:
      64px;
  }


  /* =======================================================
     PROCESS
     ======================================================= */

  .twl-svc-process__step {
    min-height:
      108px;

    gap:
      18px;
  }


  /* =======================================================
     PROOF
     ======================================================= */

  .twl-svc-proof__layout {
    gap:
      48px;
  }


  .twl-svc-results__list li {
    padding-top:
      22px;

    padding-bottom:
      22px;
  }


  /* =======================================================
     ARCHITECTURE — MOBILE

     Keep a two-column system internally.
     Main route occupies both columns.
     CRM / API stay side-by-side to communicate branching.
     ======================================================= */

  .twl-svc-architecture {
    padding:
      78px
      0
      70px;
  }


  .twl-svc-architecture__heading {
    margin-bottom:
      32px;
  }


  .twl-svc-architecture-map {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-template-areas:
      "task task"
      "structure structure"
      "interface interface"
      "cms cms"
      "crm api"
      "analytics analytics"
      "growth growth";

    gap:
      10px;

    padding:
      20px;

    border-radius:
      20px;
  }


  .twl-svc-architecture-map__node,
  .twl-svc-architecture-map__node.is-core {
    width:
      82%;

    min-height:
      62px;

    padding:
      10px
      12px;

    border-radius:
      11px;
  }


  .twl-svc-architecture-map__node--task {
    justify-self:
      start;
  }


  .twl-svc-architecture-map__node--structure {
    justify-self:
      end;
  }


  .twl-svc-architecture-map__node--interface {
    justify-self:
      start;
  }


  .twl-svc-architecture-map__node--cms {
    width:
      86%;

    justify-self:
      center;
  }


  /*
   * Branch is deliberately wider:
   * CRM | API
   */

  .twl-svc-architecture-map__node--crm,
  .twl-svc-architecture-map__node--api {
    width:
      100%;
  }


  .twl-svc-architecture-map__node--analytics {
    justify-self:
      end;
  }


  .twl-svc-architecture-map__node--growth {
    justify-self:
      center;
  }


  .twl-svc-architecture-map__node strong {
    font-size:
      12px;
  }


  .twl-svc-architecture-map__node span,
  .twl-svc-architecture-map__node small {
    font-size:
      6.5px;
  }


  .twl-svc-architecture-map__node::after {
    top:
      9px;

    right:
      9px;

    width:
      4px;

    height:
      4px;
  }


  /* =======================================================
     TECHNOLOGIES
     ======================================================= */

  .twl-svc-tech__groups {
    gap:
      10px;
  }


  .twl-svc-tech__group {
    min-height:
      0;

    padding:
      18px;
  }


  .twl-svc-tech__chips {
    margin-top:
      14px;
  }


  /* =======================================================
     RELATED
     ======================================================= */

  .twl-svc-related__item {
    min-height:
      58px;
  }


  /* =======================================================
     FAQ
     ======================================================= */

  .twl-svc
  .twl-faq {
    padding:
      82px
      0;
  }


  .twl-svc
  .twl-faq-item__trigger {
    padding:
      14px
      16px;
  }


  /* =======================================================
     CTA
     ======================================================= */

  .twl-svc-cta__box {
    padding:
      36px
      22px;
  }

}


/* =========================================================
   MOBILE — 560
   ========================================================= */

@media (max-width: 560px) {

  /* -------------------------------------------------------
     Main spacing
     ------------------------------------------------------- */

  .twl-svc__section,
  .twl-svc__section--compact,
  .twl-svc__section--chapter {
    padding:
      66px
      0;
  }


  /* -------------------------------------------------------
     Hero infographic
     ------------------------------------------------------- */

  .twl-svc-hero-map {
    min-height:
      500px;
  }


  /*
   * Do NOT switch architecture to one column.
   *
   * The previous rule:
   *
   * grid-template-areas:
   *   "task"
   *   "structure"
   *   ...
   *
   * made the block unnecessarily tall and destroyed
   * the CRM / API branch.
   */

  .twl-svc-architecture-map {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-template-areas:
      "task task"
      "structure structure"
      "interface interface"
      "cms cms"
      "crm api"
      "analytics analytics"
      "growth growth";

    gap:
      9px;

    padding:
      18px;
  }


  .twl-svc-architecture-map__node,
  .twl-svc-architecture-map__node.is-core {
    width:
      88%;
  }


  .twl-svc-architecture-map__node--crm,
  .twl-svc-architecture-map__node--api {
    width:
      100%;
  }


  /* -------------------------------------------------------
     Metrics

     Two columns remain useful on normal phones.
     ------------------------------------------------------- */

  .twl-svc-metrics {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    column-gap:
      18px;

    row-gap:
      38px;
  }


  .twl-svc-metric__value-row {
    min-height:
      54px;
  }


  .twl-svc-metric strong,
  .twl-svc-metric--featured strong {
    font-size:
      clamp(36px, 11vw, 48px);
  }


  .twl-svc-metric__unit {
    font-size:
      11px;
  }

}


/* =========================================================
   VERY NARROW MOBILE
   <= 390
   ========================================================= */

@media (max-width: 390px) {

  .twl-svc__container {
    width:
      calc(100% - 32px);
  }


  /* -------------------------------------------------------
     Hero infographic
     ------------------------------------------------------- */

  .twl-svc-hero-map {
    min-height:
      470px;
  }


  .twl-svc-hero-node {
    width:
      30%;

    padding:
      9px;
  }


  .twl-svc-hero-node--cms {
    width:
      33%;
  }


  .twl-svc-hero-node strong {
    font-size:
      11px;
  }


  /* -------------------------------------------------------
     Architecture
     ------------------------------------------------------- */

  .twl-svc-architecture-map {
    padding:
      14px;

    gap:
      8px;
  }


  .twl-svc-architecture-map__node,
  .twl-svc-architecture-map__node.is-core {
    width:
      92%;

    padding:
      9px
      10px;
  }


  .twl-svc-architecture-map__node--crm,
  .twl-svc-architecture-map__node--api {
    width:
      100%;
  }


  /* -------------------------------------------------------
     Metrics return to one column only on narrow phones.
     ------------------------------------------------------- */

  .twl-svc-metrics {
    grid-template-columns:
      minmax(0, 1fr);

    row-gap:
      32px;
  }

}


/* =========================================================
   TOUCH FEEDBACK FOR TECHNOLOGIES
   ========================================================= */

@media (hover: none) {

  .twl-svc-tech__group:active {
    border-color:
      rgba(166, 176, 255, 0.22);

    background:
      rgba(16, 20, 40, 0.68);
  }


  .twl-svc-tech__chips span:active {
    border-color:
      rgba(166, 176, 255, 0.30);

    background:
      rgba(100, 115, 255, 0.08);

    color:
      #f3f5ff;
  }

}


/* =========================================================
   REDUCED MOTION — PATCH
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .twl-svc-tech__group,
  .twl-svc-tech__label,
  .twl-svc-tech__chips span {
    transition:
      none;
  }

}
/* =========================================================
   SERVICE NODES — RESPONSIVE TOP-DOWN PATCH 2.0

   Breakpoint logic:
   > 1024  — desktop spatial diagrams
   <=1024  — top-down tablet composition
   <=767   — mobile
   <=560   — compact mobile
   <=390   — narrow mobile

   Temporary override layer.
   ========================================================= */


/* =========================================================
   CONNECTION VISIBILITY
   ========================================================= */

.twl-svc-hero-map__links,
.twl-svc-architecture-map__links {
  opacity:
    0;

  transition:
    opacity 180ms ease;
}


.twl-svc-hero-map.is-links-ready
.twl-svc-hero-map__links,
.twl-svc-architecture-map.is-links-ready
.twl-svc-architecture-map__links {
  opacity:
    1;
}


/* =========================================================
   TABLET / MOBILE MODE
   <= 1024
   ========================================================= */

@media (max-width: 1024px) {

  /* =======================================================
     HERO NODE INFOGRAPHIC
     ======================================================= */

  .twl-svc-hero-map {
    position:
      relative;

    width:
      min(100%, 610px);

    max-width:
      610px;

    min-height:
      570px;

    margin:
      24px
      auto
      0;
  }


  .twl-svc-hero-map__frame {
    inset:
      0;

    border-radius:
      24px;
  }


  .twl-svc-hero-map__links {
    display:
      block !important;

    position:
      absolute;

    inset:
      0;

    z-index:
      1;

    width:
      100%;

    height:
      100%;
  }


  /*
   * Important:
   * node width now follows content instead of grid width.
   */

  .twl-svc-hero-node,
  .twl-svc-hero-node--cms {
    position:
      absolute;

    z-index:
      2;

    width:
      max-content;

    min-width:
      132px;

    max-width:
      168px;

    min-height:
      62px;

    padding:
      11px
      13px;

    border-radius:
      12px;

    transform:
      translateX(-50%);
  }


  .twl-svc-hero-node strong {
    font-size:
      13px;

    white-space:
      nowrap;
  }


  .twl-svc-hero-node span,
  .twl-svc-hero-node small {
    font-size:
      7px;
  }


  /*
   * Top-down route with very small horizontal displacement.
   *
   * Interface
   *      ↓
   *    CMS
   *      ↓
   * API / CRM
   *      ↓
   * Analytics
   *      ↓
   * Growth
   */

  .twl-svc-hero-node--interface {
    left:
      43%;

    top:
      7%;
  }


  .twl-svc-hero-node--cms {
    left:
      55%;

    top:
      27%;
  }


  .twl-svc-hero-node--api {
    left:
      45%;

    right:
      auto;

    top:
      47%;
  }


  .twl-svc-hero-node--analytics {
    left:
      55%;

    right:
      auto;

    top:
      67%;

    bottom:
      auto;
  }


  .twl-svc-hero-node--growth {
    left:
      45%;

    top:
      84%;

    bottom:
      auto;
  }


  .twl-svc-hero-map__status {
    display:
      none;
  }


  /* =======================================================
     ARCHITECTURE — TOP DOWN PIPELINE
     ======================================================= */

  .twl-svc-architecture-map {
    position:
      relative;

    display:
      block;

    width:
      100%;

    min-height:
      690px;

    padding:
      0;

    overflow:
      hidden;
  }


  /*
   * Re-enable SVG links on responsive.
   * Older adaptive rules disabled them.
   */

  .twl-svc-architecture-map__links {
    display:
      block !important;

    position:
      absolute;

    inset:
      0;

    z-index:
      1;

    width:
      100%;

    height:
      100%;
  }


  .twl-svc-architecture-map__status {
    display:
      none;
  }


  /*
   * Reset old responsive grid rules.
   */

  .twl-svc-architecture-map__node,
  .twl-svc-architecture-map__node.is-core,
  .twl-svc-architecture-map__node.is-secondary {
    position:
      absolute !important;

    inset:
      auto;

    z-index:
      2;

    width:
      max-content;

    min-width:
      136px;

    max-width:
      180px;

    min-height:
      62px;

    padding:
      11px
      13px;

    border-radius:
      12px;

    transform:
      translateX(-50%);

    justify-self:
      auto;
  }


  .twl-svc-architecture-map__node strong {
    font-size:
      13px;

    white-space:
      nowrap;
  }


  .twl-svc-architecture-map__node span,
  .twl-svc-architecture-map__node small {
    font-size:
      7px;
  }


  /*
   * Main path:
   *
   *      Business task
   *            ↓
   *        Structure
   *            ↓
   *        Interface
   *            ↓
   *           CMS
   *         ↙     ↘
   *       CRM     API
   *         ↘     ↙
   *        Analytics
   *            ↓
   *          Growth
   */

  .twl-svc-architecture-map__node--task {
    left:
      50%;

    top:
      5%;
  }


  .twl-svc-architecture-map__node--structure {
    left:
      50%;

    top:
      18%;
  }


  .twl-svc-architecture-map__node--interface {
    left:
      50%;

    top:
      31%;
  }


  .twl-svc-architecture-map__node--cms {
    left:
      50%;

    top:
      44%;
  }


  /*
   * Semantic branch.
   */

  .twl-svc-architecture-map__node--crm {
    left:
      34%;

    top:
      58%;
  }


  .twl-svc-architecture-map__node--api {
    left:
      66%;

    top:
      58%;
  }


  .twl-svc-architecture-map__node--analytics {
    left:
      50%;

    right:
      auto;

    top:
      73%;
  }


  .twl-svc-architecture-map__node--growth {
    left:
      50%;

    right:
      auto;

    top:
      87%;

    bottom:
      auto;
  }

}


/* =========================================================
   TABLET COMPACT
   <= 900
   ========================================================= */

@media (max-width: 900px) {

  .twl-svc-hero-map {
    min-height:
      550px;

    max-width:
      560px;
  }


  .twl-svc-architecture-map {
    min-height:
      670px;
  }


  .twl-svc-architecture-map__node--crm {
    left:
      32%;
  }


  .twl-svc-architecture-map__node--api {
    left:
      68%;
  }

}


/* =========================================================
   MOBILE
   <= 767
   ========================================================= */

@media (max-width: 767px) {

  /* =======================================================
     HERO
     ======================================================= */

  .twl-svc-hero-map {
    width:
      100%;

    max-width:
      430px;

    min-height:
      520px;

    margin-top:
      28px;
  }


  .twl-svc-hero-map__frame {
    border-radius:
      20px;
  }


  .twl-svc-hero-node,
  .twl-svc-hero-node--cms {
    min-width:
      116px;

    max-width:
      150px;

    min-height:
      58px;

    padding:
      9px
      11px;

    border-radius:
      10px;
  }


  .twl-svc-hero-node strong {
    font-size:
      12px;
  }


  /*
   * Slightly tighter central path.
   */

  .twl-svc-hero-node--interface {
    left:
      40%;

    top:
      6%;
  }


  .twl-svc-hero-node--cms {
    left:
      56%;

    top:
      26%;
  }


  .twl-svc-hero-node--api {
    left:
      43%;

    top:
      46%;
  }


  .twl-svc-hero-node--analytics {
    left:
      57%;

    top:
      66%;
  }


  .twl-svc-hero-node--growth {
    left:
      43%;

    top:
      84%;
  }


  /* =======================================================
     ARCHITECTURE
     ======================================================= */

  .twl-svc-architecture-map {
    min-height:
      640px;

    border-radius:
      20px;
  }


  .twl-svc-architecture-map__node,
  .twl-svc-architecture-map__node.is-core,
  .twl-svc-architecture-map__node.is-secondary {
    min-width:
      116px;

    max-width:
      154px;

    min-height:
      56px;

    padding:
      9px
      11px;

    border-radius:
      10px;
  }


  .twl-svc-architecture-map__node strong {
    font-size:
      12px;
  }


  .twl-svc-architecture-map__node--task {
    top:
      4%;
  }


  .twl-svc-architecture-map__node--structure {
    top:
      17%;
  }


  .twl-svc-architecture-map__node--interface {
    top:
      30%;
  }


  .twl-svc-architecture-map__node--cms {
    top:
      43%;
  }


  .twl-svc-architecture-map__node--crm {
    left:
      29%;

    top:
      57%;
  }


  .twl-svc-architecture-map__node--api {
    left:
      71%;

    top:
      57%;
  }


  .twl-svc-architecture-map__node--analytics {
    top:
      72%;
  }


  .twl-svc-architecture-map__node--growth {
    top:
      86%;
  }

}


/* =========================================================
   COMPACT MOBILE
   <= 560
   ========================================================= */

@media (max-width: 560px) {

  /* =======================================================
     HERO
     ======================================================= */

  .twl-svc-hero-map {
    min-height:
      490px;
  }


  .twl-svc-hero-node,
  .twl-svc-hero-node--cms {
    min-width:
      108px;

    max-width:
      138px;

    min-height:
      54px;

    padding:
      8px
      10px;
  }


  .twl-svc-hero-node strong {
    font-size:
      11.5px;
  }


  .twl-svc-hero-node span,
  .twl-svc-hero-node small {
    font-size:
      6.2px;
  }


  .twl-svc-hero-node--interface {
    left:
      38%;
  }


  .twl-svc-hero-node--cms {
    left:
      57%;
  }


  .twl-svc-hero-node--api {
    left:
      42%;
  }


  .twl-svc-hero-node--analytics {
    left:
      58%;
  }


  .twl-svc-hero-node--growth {
    left:
      42%;
  }


  /* =======================================================
     ARCHITECTURE
     ======================================================= */

  .twl-svc-architecture-map {
    min-height:
      610px;
  }


  .twl-svc-architecture-map__node,
  .twl-svc-architecture-map__node.is-core,
  .twl-svc-architecture-map__node.is-secondary {
    min-width:
      108px;

    max-width:
      142px;

    min-height:
      54px;

    padding:
      8px
      10px;
  }


  .twl-svc-architecture-map__node strong {
    font-size:
      11.5px;
  }


  .twl-svc-architecture-map__node span,
  .twl-svc-architecture-map__node small {
    font-size:
      6.2px;
  }


  /*
   * CRM / API remain a branch.
   * They do not stretch to half screen.
   */

  .twl-svc-architecture-map__node--crm {
    left:
      28%;
  }


  .twl-svc-architecture-map__node--api {
    left:
      72%;
  }

}


/* =========================================================
   NARROW MOBILE
   <= 390
   ========================================================= */

@media (max-width: 390px) {

  /* =======================================================
     HERO
     ======================================================= */

  .twl-svc-hero-map {
    min-height:
      470px;
  }


  .twl-svc-hero-node,
  .twl-svc-hero-node--cms {
    min-width:
      102px;

    max-width:
      130px;

    padding:
      8px
      9px;
  }


  .twl-svc-hero-node strong {
    font-size:
      11px;
  }


  /*
   * Keep some zig-zag, but very close
   * to vertical center axis.
   */

  .twl-svc-hero-node--interface {
    left:
      37%;
  }


  .twl-svc-hero-node--cms {
    left:
      58%;
  }


  .twl-svc-hero-node--api {
    left:
      41%;
  }


  .twl-svc-hero-node--analytics {
    left:
      59%;
  }


  .twl-svc-hero-node--growth {
    left:
      41%;
  }


  /* =======================================================
     ARCHITECTURE
     ======================================================= */

  .twl-svc-architecture-map {
    min-height:
      590px;
  }


  .twl-svc-architecture-map__node,
  .twl-svc-architecture-map__node.is-core,
  .twl-svc-architecture-map__node.is-secondary {
    min-width:
      102px;

    max-width:
      134px;

    min-height:
      52px;

    padding:
      7px
      9px;
  }


  .twl-svc-architecture-map__node strong {
    font-size:
      11px;
  }


  .twl-svc-architecture-map__node--crm {
    left:
      27%;
  }


  .twl-svc-architecture-map__node--api {
    left:
      73%;
  }

}
/* =========================================================
   ARCHITECTURE — RESPONSIVE TOP-DOWN FIX 3.0

   Applies only to:
   "Не привязываем развитие сайта
   к одной странице или одному разработчику"

   Logic:

        Бизнес-задача
              ↓
          Структура
              ↓
          Интерфейс
              ↓
             CMS
           ↙     ↘
         CRM     API
           ↘     ↙
          Аналитика
              ↓
           Развитие

   Existing JS keeps calculating the SVG paths
   from real node positions.
   ========================================================= */


/* =========================================================
   TABLET
   768–1024
   ========================================================= */

@media (max-width: 1024px) {

  /* -------------------------------------------------------
     Section
     ------------------------------------------------------- */

  .twl-svc-architecture {
    padding-top:
      108px;

    padding-bottom:
      92px;
  }


  .twl-svc-architecture__heading {
    max-width:
      760px;

    margin-bottom:
      42px;
  }


  /* -------------------------------------------------------
     Diagram canvas

     Nodes stay in normal document flow.
     This prevents clipping / disappearing nodes.
     ------------------------------------------------------- */

  .twl-svc-architecture-map {
    position:
      relative;

    display:
      grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    grid-template-areas:
      "task task"
      "structure structure"
      "interface interface"
      "cms cms"
      "crm api"
      "analytics analytics"
      "growth growth";

    align-items:
      center;

    justify-items:
      center;

    column-gap:
      clamp(56px, 9vw, 100px);

    row-gap:
      52px;

    width:
      100%;

    min-height:
      0 !important;

    height:
      auto !important;

    padding:
      46px
      clamp(34px, 6vw, 64px)
      48px;

    overflow:
      hidden;

    border-radius:
      24px;
  }


  /* -------------------------------------------------------
     SVG layer

     Keep it behind the nodes.
     JS will calculate all coordinates.
     ------------------------------------------------------- */

  .twl-svc-architecture-map__links {
    display:
      block !important;

    position:
      absolute;

    inset:
      0;

    z-index:
      1;

    width:
      100%;

    height:
      100%;

    pointer-events:
      none;
  }


  /*
   * Hide old service status on adaptive diagram.
   */

  .twl-svc-architecture-map__status {
    display:
      none !important;
  }


  /* -------------------------------------------------------
     Reset ALL desktop absolute positioning
     ------------------------------------------------------- */

  .twl-svc-architecture-map__node,
  .twl-svc-architecture-map__node.is-core,
  .twl-svc-architecture-map__node.is-secondary {
    position:
      relative !important;

    inset:
      auto !important;

    left:
      auto !important;

    right:
      auto !important;

    top:
      auto !important;

    bottom:
      auto !important;

    transform:
      none !important;

    z-index:
      2;

    width:
      max-content !important;

    min-width:
      136px;

    max-width:
      190px;

    min-height:
      64px;

    margin:
      0;

    padding:
      11px
      14px;

    justify-self:
      center !important;

    align-self:
      center;

    border-radius:
      12px;
  }


  /* -------------------------------------------------------
     Grid areas
     ------------------------------------------------------- */

  .twl-svc-architecture-map__node--task {
    grid-area:
      task;
  }


  .twl-svc-architecture-map__node--structure {
    grid-area:
      structure;
  }


  .twl-svc-architecture-map__node--interface {
    grid-area:
      interface;
  }


  .twl-svc-architecture-map__node--cms {
    grid-area:
      cms;
  }


  .twl-svc-architecture-map__node--crm {
    grid-area:
      crm;

    justify-self:
      end !important;
  }


  .twl-svc-architecture-map__node--api {
    grid-area:
      api;

    justify-self:
      start !important;
  }


  .twl-svc-architecture-map__node--analytics {
    grid-area:
      analytics;
  }


  .twl-svc-architecture-map__node--growth {
    grid-area:
      growth;
  }


  /* -------------------------------------------------------
     Typography
     ------------------------------------------------------- */

  .twl-svc-architecture-map__node strong {
    font-size:
      13px;

    line-height:
      1.18;

    white-space:
      nowrap;
  }


  .twl-svc-architecture-map__node span,
  .twl-svc-architecture-map__node small {
    font-size:
      7px;

    line-height:
      1.3;
  }


  /* -------------------------------------------------------
     Visual hierarchy
     ------------------------------------------------------- */

  .twl-svc-architecture-map__node--cms {
    min-width:
      148px;

    border-color:
      rgba(141, 128, 255, 0.62);
  }


  .twl-svc-architecture-map__node--crm,
  .twl-svc-architecture-map__node--api {
    min-width:
      124px;

    opacity:
      0.94;
  }


  /*
   * Main nodes slightly stronger than branch nodes.
   */

  .twl-svc-architecture-map__node--task,
  .twl-svc-architecture-map__node--structure,
  .twl-svc-architecture-map__node--interface,
  .twl-svc-architecture-map__node--analytics,
  .twl-svc-architecture-map__node--growth {
    border-color:
      rgba(151, 160, 255, 0.24);
  }

}


/* =========================================================
   MOBILE
   <= 767
   ========================================================= */

@media (max-width: 767px) {

  .twl-svc-architecture {
    padding-top:
      78px;

    padding-bottom:
      70px;
  }


  .twl-svc-architecture__heading {
    margin-bottom:
      30px;
  }


  .twl-svc-architecture-map {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    grid-template-areas:
      "task task"
      "structure structure"
      "interface interface"
      "cms cms"
      "crm api"
      "analytics analytics"
      "growth growth";

    column-gap:
      24px;

    row-gap:
      44px;

    padding:
      34px
      20px
      36px;

    border-radius:
      20px;
  }


  /* -------------------------------------------------------
     Nodes

     Important:
     width follows content instead of column width.
     ------------------------------------------------------- */

  .twl-svc-architecture-map__node,
  .twl-svc-architecture-map__node.is-core,
  .twl-svc-architecture-map__node.is-secondary {
    width:
      max-content !important;

    min-width:
      112px;

    max-width:
      154px;

    min-height:
      56px;

    padding:
      9px
      11px;

    border-radius:
      10px;
  }


  .twl-svc-architecture-map__node--cms {
    min-width:
      126px;
  }


  .twl-svc-architecture-map__node--crm,
  .twl-svc-architecture-map__node--api {
    min-width:
      104px;

    max-width:
      126px;
  }


  /*
   * Keep the branch visually centred.
   *
   * CRM ← centre → API
   */

  .twl-svc-architecture-map__node--crm {
    justify-self:
      end !important;
  }


  .twl-svc-architecture-map__node--api {
    justify-self:
      start !important;
  }


  .twl-svc-architecture-map__node strong {
    font-size:
      12px;

    white-space:
      nowrap;
  }


  .twl-svc-architecture-map__node span,
  .twl-svc-architecture-map__node small {
    font-size:
      6.4px;
  }


  .twl-svc-architecture-map__node::after {
    top:
      9px;

    right:
      9px;

    width:
      4px;

    height:
      4px;
  }

}


/* =========================================================
   SMALL MOBILE
   <= 560
   ========================================================= */

@media (max-width: 560px) {

  .twl-svc-architecture-map {
    /*
     * Keep enough distance for the SVG arrows.
     * Do not compress this too aggressively.
     */

    column-gap:
      18px;

    row-gap:
      40px;

    padding:
      30px
      16px
      32px;
  }


  .twl-svc-architecture-map__node,
  .twl-svc-architecture-map__node.is-core,
  .twl-svc-architecture-map__node.is-secondary {
    min-width:
      108px;

    max-width:
      142px;

    min-height:
      54px;

    padding:
      8px
      10px;
  }


  .twl-svc-architecture-map__node--cms {
    min-width:
      120px;
  }


  .twl-svc-architecture-map__node--crm,
  .twl-svc-architecture-map__node--api {
    min-width:
      100px;

    max-width:
      118px;
  }


  .twl-svc-architecture-map__node strong {
    font-size:
      11.5px;
  }


  .twl-svc-architecture-map__node span,
  .twl-svc-architecture-map__node small {
    font-size:
      6px;
  }

}


/* =========================================================
   NARROW MOBILE
   <= 390
   ========================================================= */

@media (max-width: 390px) {

  .twl-svc-architecture-map {
    column-gap:
      12px;

    row-gap:
      38px;

    padding:
      26px
      12px
      30px;
  }


  .twl-svc-architecture-map__node,
  .twl-svc-architecture-map__node.is-core,
  .twl-svc-architecture-map__node.is-secondary {
    min-width:
      102px;

    max-width:
      132px;

    min-height:
      52px;

    padding:
      7px
      9px;
  }


  .twl-svc-architecture-map__node--cms {
    min-width:
      116px;
  }


  /*
   * Two branch nodes still fit side-by-side
   * on 360–390 px screens.
   */

  .twl-svc-architecture-map__node--crm,
  .twl-svc-architecture-map__node--api {
    min-width:
      94px;

    max-width:
      108px;
  }


  .twl-svc-architecture-map__node strong {
    font-size:
      11px;
  }

}
/* =========================================================
   CRM MAP — SCROLL STABILITY
   ========================================================= */

.twl-svc-crm-hero-map,
.twl-svc-crm-pipeline {
  overflow-anchor: none;
}

.twl-svc-crm-map__links {
  overflow: hidden;
}
/* =========================================================
   SERVICE — CRM & AUTOMATION
   Template: service-crm-automation.php

   Temporary page-specific layer.
   Merge into base CSS during final refactor.
   ========================================================= */


/* =========================================================
   HERO / MAP BASE
   ========================================================= */

.twl-svc--crm .twl-svc-hero__title {
  max-width: 920px;
}


.twl-svc-crm-hero-map {
  position: relative;

  min-width: 0;
  min-height: 560px;

  width: 108%;
  margin-left: -4%;

  overflow-anchor: none;
}


.twl-svc-crm-map__frame {
  position: absolute;

  inset:
    7%
    4%
    6%;

  overflow: hidden;

  border:
    1px solid
    rgba(151, 160, 255, 0.18);

  border-radius:
    26px;

  background:
    radial-gradient(
      circle at 55% 44%,
      rgba(119, 104, 255, 0.11),
      transparent 41%
    ),
    linear-gradient(
      145deg,
      rgba(13, 16, 34, 0.95),
      rgba(7, 9, 21, 0.97)
    );
}


.twl-svc-crm-map__frame::before,
.twl-svc-crm-map__grid {
  position: absolute;

  inset: 0;

  opacity: 0.20;

  background-image:
    linear-gradient(
      rgba(151, 160, 255, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(151, 160, 255, 0.045) 1px,
      transparent 1px
    );

  background-size:
    50px
    50px;

  -webkit-mask-image:
    radial-gradient(
      circle at 54% 48%,
      #000,
      transparent 76%
    );

  mask-image:
    radial-gradient(
      circle at 54% 48%,
      #000,
      transparent 76%
    );

  pointer-events: none;
}


.twl-svc-crm-map__frame::before {
  content: "";
}


.twl-svc-crm-map__glow {
  position: absolute;

  width: 520px;
  height: 300px;

  left: 52%;
  top: 50%;

  transform:
    translate(
      -50%,
      -50%
    );

  border-radius: 50%;

  background:
    rgba(
      119,
      104,
      255,
      0.065
    );

  filter:
    blur(110px);

  pointer-events: none;
}


/* =========================================================
   CONNECTIONS
   ========================================================= */

.twl-svc-crm-map__links {
  position: absolute;

  inset: 0;

  z-index: 1;

  width: 100%;
  height: 100%;

  overflow: hidden;

  opacity: 0;

  pointer-events: none;

  transition:
    opacity
    180ms
    ease;
}


.twl-svc-crm-hero-map.is-links-ready
.twl-svc-crm-map__links,
.twl-svc-crm-pipeline.is-links-ready
.twl-svc-crm-map__links {
  opacity: 1;
}


.twl-svc-crm-map__link {
  fill: none;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  vector-effect:
    non-scaling-stroke;
}


.twl-svc-crm-map__link--primary {
  stroke:
    rgba(
      164,
      154,
      255,
      0.84
    );

  stroke-width:
    1.55;

  filter:
    drop-shadow(
      0
      0
      5px
      rgba(
        119,
        104,
        255,
        0.14
      )
    );
}


.twl-svc-crm-map__link--secondary {
  stroke:
    rgba(
      105,
      116,
      165,
      0.48
    );

  stroke-width:
    1.15;
}


/* =========================================================
   NODES
   ========================================================= */

.twl-svc-crm-node {
  position: absolute;

  z-index: 2;

  width:
    max-content;

  min-width:
    142px;

  max-width:
    184px;

  min-height:
    72px;

  padding:
    12px
    14px;

  border:
    1px solid
    rgba(
      151,
      160,
      255,
      0.20
    );

  border-radius:
    13px;

  background:
    rgba(
      9,
      12,
      27,
      0.97
    );

  box-shadow:
    0
    12px
    30px
    rgba(
      0,
      0,
      0,
      0.10
    );
}


.twl-svc-crm-node::after {
  content: "";

  position: absolute;

  top: 11px;
  right: 11px;

  width: 5px;
  height: 5px;

  border-radius:
    50%;

  background:
    rgba(
      100,
      115,
      255,
      0.90
    );

  box-shadow:
    0
    0
    10px
    rgba(
      100,
      115,
      255,
      0.32
    );
}


.twl-svc-crm-node span,
.twl-svc-crm-node small {
  display: block;

  color:
    var(--twl-svc-muted);

  font:
    500
    7px/1.35
    "IBM Plex Mono",
    monospace;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.twl-svc-crm-node strong {
  display: block;

  margin:
    5px
    0
    3px;

  color:
    var(--twl-svc-text);

  font-size:
    13px;

  font-weight:
    600;

  line-height:
    1.18;
}


.twl-svc-crm-node.is-core {
  min-width:
    154px;

  border-color:
    rgba(
      141,
      128,
      255,
      0.62
    );

  background:
    linear-gradient(
      145deg,
      rgba(25, 28, 57, 0.98),
      rgba(12, 15, 32, 0.98)
    );

  box-shadow:
    0
    18px
    46px
    rgba(
      81,
      72,
      184,
      0.12
    );
}


.twl-svc-crm-node.is-core::after {
  background:
    var(--twl-svc-lavender);

  box-shadow:
    0
    0
    12px
    rgba(
      187,
      194,
      255,
      0.50
    );
}


/* =========================================================
   STATUS
   ========================================================= */

.twl-svc-crm-map__status {
  position: absolute;

  left: 6%;
  bottom: 10%;

  z-index: 2;

  padding:
    10px
    12px;

  border:
    1px solid
    rgba(
      151,
      160,
      255,
      0.12
    );

  border-radius:
    9px;

  background:
    rgba(
      7,
      9,
      22,
      0.94
    );
}


.twl-svc-crm-map__status span {
  display: block;

  color:
    var(--twl-svc-muted);

  font:
    500
    8px/1.35
    "IBM Plex Mono",
    monospace;

  letter-spacing:
    0.08em;
}


.twl-svc-crm-map__status strong {
  color:
    var(--twl-svc-secondary);

  font-size:
    10px;

  font-weight:
    600;
}


.twl-svc-crm-map__status i {
  display: inline-block;

  width: 5px;
  height: 5px;

  margin-left:
    5px;

  border-radius:
    50%;

  background:
    var(--twl-svc-blue);
}


/* =========================================================
   CRM HERO — DESKTOP
   ========================================================= */

.twl-svc-crm-hero-node--source {
  left: 5%;
  top: 20%;
}


.twl-svc-crm-hero-node--lead {
  left: 29%;
  top: 36%;
}


.twl-svc-crm-hero-node--qualification {
  left: 49%;
  top: 18%;
}


.twl-svc-crm-hero-node--deal {
  right: 8%;
  top: 34%;
}


.twl-svc-crm-hero-node--tasks {
  right: 13%;
  bottom: 18%;
}


.twl-svc-crm-hero-node--analytics {
  left: 42%;
  bottom: 8%;
}


/* =========================================================
   CRM PIPELINE — DESKTOP
   ========================================================= */

.twl-svc-crm-pipeline {
  position: relative;

  height:
    440px;

  min-height:
    440px;

  overflow: hidden;
  overflow-anchor: none;

  border:
    1px solid
    var(--twl-svc-border);

  border-radius:
    26px;

  background:
    radial-gradient(
      circle at 54% 49%,
      rgba(119, 104, 255, 0.10),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(12, 15, 32, 0.97),
      rgba(6, 8, 18, 0.98)
    );
}


.twl-svc-crm-pipeline
.twl-svc-crm-map__status {
  left: 3%;
  bottom: 6%;
}


.twl-svc-crm-pipeline-node--source {
  left: 4%;
  top: 38%;
}


.twl-svc-crm-pipeline-node--client {
  left: 19%;
  top: 15%;
}


.twl-svc-crm-pipeline-node--qualification {
  left: 34%;
  top: 38%;
}


.twl-svc-crm-pipeline-node--pipeline {
  left: 49%;
  top: 15%;
}


.twl-svc-crm-pipeline-node--tasks {
  left: 64%;
  top: 38%;
}


.twl-svc-crm-pipeline-node--result {
  left: 79%;
  top: 15%;
}


.twl-svc-crm-pipeline-node--analytics {
  right: 4%;
  top: 38%;
}


/* =========================================================
   COMPACT DESKTOP
   1025–1200
   ========================================================= */

@media (
  max-width: 1200px
) and (
  min-width: 1025px
) {

  .twl-svc-crm-hero-map {
    width: 100%;

    margin-left: 0;

    min-height:
      520px;
  }


  .twl-svc-crm-node {
    min-width:
      122px;

    max-width:
      154px;

    min-height:
      66px;

    padding:
      10px
      12px;
  }


  .twl-svc-crm-node.is-core {
    min-width:
      134px;
  }


  .twl-svc-crm-node strong {
    font-size:
      12px;
  }


  .twl-svc-crm-pipeline-node--source {
    left: 3%;
  }


  .twl-svc-crm-pipeline-node--client {
    left: 18%;
  }


  .twl-svc-crm-pipeline-node--qualification {
    left: 33%;
  }


  .twl-svc-crm-pipeline-node--pipeline {
    left: 48%;
  }


  .twl-svc-crm-pipeline-node--tasks {
    left: 63%;
  }


  .twl-svc-crm-pipeline-node--result {
    left: 77%;
  }


  .twl-svc-crm-pipeline-node--analytics {
    right: 3%;
  }

}


/* =========================================================
   TABLET
   <= 1024
   ========================================================= */

@media (max-width: 1024px) {

  /*
   * Both CRM diagrams switch from absolute desktop scene
   * to a real vertical document-flow pipeline.
   */

  .twl-svc-crm-hero-map,
  .twl-svc-crm-pipeline {
    position: relative;

    display: grid;

    grid-template-columns:
      minmax(0, 1fr);

    justify-items:
      center;

    align-items:
      center;

    width:
      min(
        100%,
        610px
      );

    height:
      auto;

    min-height:
      0;

    margin:
      24px
      auto
      0;

    padding:
      44px
      34px;

    row-gap:
      42px;
  }


  .twl-svc-crm-pipeline {
    width:
      100%;

    margin-top:
      0;

    padding:
      46px
      clamp(
        34px,
        6vw,
        64px
      )
      48px;
  }


  .twl-svc-crm-hero-map
  .twl-svc-crm-map__frame {
    inset: 0;

    border-radius:
      24px;
  }


  .twl-svc-crm-map__links {
    display:
      block !important;

    position:
      absolute;

    inset: 0;

    z-index: 1;

    width:
      100%;

    height:
      100%;
  }


  /*
   * Completely reset desktop coordinates.
   */

  .twl-svc-crm-node,
  .twl-svc-crm-node.is-core {
    position:
      relative !important;

    inset:
      auto !important;

    left:
      auto !important;

    right:
      auto !important;

    top:
      auto !important;

    bottom:
      auto !important;

    transform:
      none !important;

    z-index: 2;

    width:
      max-content;

    min-width:
      136px;

    max-width:
      190px;

    min-height:
      62px;

    margin: 0;

    padding:
      11px
      14px;

    justify-self:
      center;
  }


  .twl-svc-crm-map__status {
    display: none;
  }

}


/* =========================================================
   MOBILE
   <= 767
   ========================================================= */

@media (max-width: 767px) {

  .twl-svc-crm-hero-map {
    width: 100%;

    max-width:
      430px;

    padding:
      34px
      20px;

    row-gap:
      36px;

    border-radius:
      20px;
  }


  .twl-svc-crm-pipeline {
    padding:
      34px
      20px
      36px;

    row-gap:
      36px;

    border-radius:
      20px;
  }


  .twl-svc-crm-node,
  .twl-svc-crm-node.is-core {
    min-width:
      112px;

    max-width:
      158px;

    min-height:
      56px;

    padding:
      9px
      11px;

    border-radius:
      10px;
  }


  .twl-svc-crm-node strong {
    font-size:
      12px;
  }


  .twl-svc-crm-node span,
  .twl-svc-crm-node small {
    font-size:
      6.4px;
  }


  .twl-svc-crm-node::after {
    top: 9px;
    right: 9px;

    width: 4px;
    height: 4px;
  }

}


/* =========================================================
   MOBILE
   <= 560
   ========================================================= */

@media (max-width: 560px) {

  .twl-svc-crm-hero-map,
  .twl-svc-crm-pipeline {
    padding-inline:
      16px;

    row-gap:
      32px;
  }


  .twl-svc-crm-node,
  .twl-svc-crm-node.is-core {
    min-width:
      106px;

    max-width:
      146px;

    min-height:
      54px;

    padding:
      8px
      10px;
  }


  .twl-svc-crm-node strong {
    font-size:
      11.5px;
  }

}


/* =========================================================
   NARROW MOBILE
   <= 390
   ========================================================= */

@media (max-width: 390px) {

  .twl-svc-crm-hero-map,
  .twl-svc-crm-pipeline {
    padding-inline:
      12px;

    row-gap:
      30px;
  }


  .twl-svc-crm-node,
  .twl-svc-crm-node.is-core {
    min-width:
      102px;

    max-width:
      136px;

    min-height:
      52px;

    padding:
      7px
      9px;
  }


  .twl-svc-crm-node strong {
    font-size:
      11px;
  }

}
/* =========================================================
   CRM HERO — DESKTOP REBALANCE
   Правим только hero-схему на десктопе.
   JS не меняем.
   ========================================================= */

@media (min-width: 1025px) {

  .twl-svc-crm-hero-map {
    width: 100%;
    max-width: 700px;
    min-height: 540px;
    margin-left: 0;
  }


  .twl-svc-crm-hero-map .twl-svc-crm-map__frame {
    inset: 6% 3% 6% 3%;
    border-radius: 28px;
  }


  .twl-svc-crm-hero-map .twl-svc-crm-map__glow {
    width: 500px;
    height: 280px;
    left: 54%;
    top: 48%;
    transform: translate(-50%, -50%);
  }


  .twl-svc-crm-hero-map .twl-svc-crm-node,
  .twl-svc-crm-hero-map .twl-svc-crm-node.is-core {
    min-width: 136px;
    max-width: 172px;
  }


  /* -------------------------------------------------------
     Новая композиция:
     Источник → Лид → Квалификация → Сделка
                                      ↓
                               Задачи ← Аналитика
     ------------------------------------------------------- */

  .twl-svc-crm-hero-node--source {
    left: 4%;
    top: 14%;
  }


  .twl-svc-crm-hero-node--lead {
    left: 25%;
    top: 42%;
  }


  .twl-svc-crm-hero-node--qualification {
    left: 46%;
    top: 14%;
  }


  .twl-svc-crm-hero-node--deal {
    left: auto;
    right: 5%;
    top: 34%;
  }


  .twl-svc-crm-hero-node--tasks {
    left: auto;
    right: 10%;
    top: auto;
    bottom: 15%;
  }


  .twl-svc-crm-hero-node--analytics {
    left: 43%;
    right: auto;
    top: auto;
    bottom: 8%;
  }


  .twl-svc-crm-hero-map .twl-svc-crm-map__status {
    left: 5%;
    bottom: 8%;
  }

}
/* =========================================================
   CRM HERO — DESKTOP NODE POSITION FIX 2
   Designed for current JS connection anchors.

   source        -> lead          right / left
   lead          -> qualification right / left
   qualification -> deal          right / left
   deal          -> tasks         bottom / top
   tasks         -> analytics     left / right
   ========================================================= */

@media (min-width: 1025px) {

  /* -------------------------------------------------------
     Canvas
     ------------------------------------------------------- */

  .twl-svc-crm-hero-map {
    width: 100%;
    max-width: 700px;
    min-height: 540px;

    margin-left: 0;
  }


  .twl-svc-crm-hero-map
  .twl-svc-crm-map__frame {
    inset: 6% 3% 6%;
  }


  /* -------------------------------------------------------
     Node sizing
     ------------------------------------------------------- */

  .twl-svc-crm-hero-map
  .twl-svc-crm-node {
    min-width: 128px;
    max-width: 154px;
  }


  .twl-svc-crm-hero-map
  .twl-svc-crm-node.is-core {
    min-width: 136px;
    max-width: 154px;
  }


  /* -------------------------------------------------------
     01 SOURCE

     First node of the main horizontal flow.
     ------------------------------------------------------- */

  .twl-svc-crm-hero-node--source {
    left: 5%;
    right: auto;

    top: 15%;
    bottom: auto;
  }


  /* -------------------------------------------------------
     02 LEAD

     Same Y-axis as source.
     This gives source -> lead an almost straight connector.
     ------------------------------------------------------- */

  .twl-svc-crm-hero-node--lead {
    left: 31%;
    right: auto;

    top: 15%;
    bottom: auto;
  }


  /* -------------------------------------------------------
     03 QUALIFICATION

     Same horizontal route continues.
     ------------------------------------------------------- */

  .twl-svc-crm-hero-node--qualification {
    left: 57%;
    right: auto;

    top: 15%;
    bottom: auto;
  }


  /* -------------------------------------------------------
     04 DEAL

     Shifted right + down.

     Because JS uses:
     qualification right -> deal left

     this produces one controlled diagonal curve,
     instead of an S-shaped backwards route.
     ------------------------------------------------------- */

  .twl-svc-crm-hero-node--deal {
    left: auto;
    right: 5%;

    top: 39%;
    bottom: auto;
  }


  /* -------------------------------------------------------
     05 TASKS

     Directly below Deal because JS uses:
     deal bottom -> tasks top
     ------------------------------------------------------- */

  .twl-svc-crm-hero-node--tasks {
    left: auto;
    right: 8%;

    top: auto;
    bottom: 11%;
  }


  /* -------------------------------------------------------
     06 ANALYTICS

     Positioned LEFT of Tasks because JS uses:
     tasks left -> analytics right
     ------------------------------------------------------- */

  .twl-svc-crm-hero-node--analytics {
    left: 49%;
    right: auto;

    top: auto;
    bottom: 11%;
  }


  /* -------------------------------------------------------
     Status

     Keep outside main route.
     ------------------------------------------------------- */

  .twl-svc-crm-hero-map
  .twl-svc-crm-map__status {
    left: 5%;

    top: auto;
    bottom: 7%;
  }

}
/* =========================================================
   CRM HERO — DESKTOP POSITION TUNE 3
   ========================================================= */

@media (min-width: 1025px) {

  .twl-svc-crm-hero-map {
    width: 100%;
    max-width: 720px;
    min-height: 560px;
    margin-left: 0;
  }


  .twl-svc-crm-hero-map .twl-svc-crm-map__frame {
    inset: 6% 3% 6% 3%;
    border-radius: 28px;
  }


  .twl-svc-crm-hero-map .twl-svc-crm-node {
    min-width: 132px;
    max-width: 158px;
  }


  .twl-svc-crm-hero-map .twl-svc-crm-node.is-core {
    min-width: 140px;
    max-width: 160px;
  }


  /* -------------------------------------------------------
     Верхний ряд:
     даём больше воздуха между нодами
     ------------------------------------------------------- */

  .twl-svc-crm-hero-node--source {
    left: 2.5%;
    right: auto;
    top: 14%;
    bottom: auto;
  }


  .twl-svc-crm-hero-node--lead {
    left: 28%;
    right: auto;
    top: 14%;
    bottom: auto;
  }


  .twl-svc-crm-hero-node--qualification {
    left: 58%;
    right: auto;
    top: 14%;
    bottom: auto;
  }


  /* -------------------------------------------------------
     Сделка:
     ниже верхнего ряда, чтобы вход сверху читался естественно
     ------------------------------------------------------- */

  .twl-svc-crm-hero-node--deal {
    left: auto;
    right: 6%;
    top: 40%;
    bottom: auto;
  }


  /* -------------------------------------------------------
     Нижняя пара:
     дальше от края и дальше друг от друга
     ------------------------------------------------------- */

  .twl-svc-crm-hero-node--analytics {
    left: 43%;
    right: auto;
    top: auto;
    bottom: 12%;
  }


  .twl-svc-crm-hero-node--tasks {
    left: auto;
    right: 12%;
    top: auto;
    bottom: 12%;
  }


  .twl-svc-crm-hero-map .twl-svc-crm-map__status {
    left: 5%;
    bottom: 7%;
  }

}
/* =========================================================
   CRM HERO — DESKTOP FINAL POSITION
   Target composition: screenshot markup
   ========================================================= */

@media (min-width: 1025px) {

  .twl-svc-crm-hero-map {
    width: 100%;
    max-width: 720px;
    min-height: 560px;
    margin-left: 0;
  }


  .twl-svc-crm-hero-map
  .twl-svc-crm-map__frame {
    inset: 6% 3% 6%;
    border-radius: 28px;
  }


  .twl-svc-crm-hero-map
  .twl-svc-crm-node {
    min-width: 132px;
    max-width: 158px;
  }


  .twl-svc-crm-hero-map
  .twl-svc-crm-node.is-core {
    min-width: 140px;
    max-width: 160px;
  }


  /* -------------------------------------------------------
     01 — SOURCE
     ------------------------------------------------------- */

  .twl-svc-crm-hero-node--source {
    left: 4%;
    right: auto;

    top: 6%;
    bottom: auto;
  }


  /* -------------------------------------------------------
     02 — LEAD
     ------------------------------------------------------- */

  .twl-svc-crm-hero-node--lead {
    left: 33%;
    right: auto;

    top: 6%;
    bottom: auto;
  }


  /* -------------------------------------------------------
     03 — QUALIFICATION
     ------------------------------------------------------- */

  .twl-svc-crm-hero-node--qualification {
    left: 61%;
    right: auto;

    top: 6%;
    bottom: auto;
  }


  /* -------------------------------------------------------
     04 — DEAL

     Центр практически совпадает с Tasks,
     поэтому Deal → Tasks становится чистой вертикалью.
     ------------------------------------------------------- */

  .twl-svc-crm-hero-node--deal {
    left: auto;
    right: 7%;

    top: 37%;
    bottom: auto;
  }


  /* -------------------------------------------------------
     05 — TASKS
     ------------------------------------------------------- */

  .twl-svc-crm-hero-node--tasks {
    left: auto;
    right: 7%;

    top: auto;
    bottom: 12%;
  }


  /* -------------------------------------------------------
     06 — ANALYTICS
     ------------------------------------------------------- */

  .twl-svc-crm-hero-node--analytics {
    left: 36%;
    right: auto;

    top: auto;
    bottom: 14%;
  }


  /* -------------------------------------------------------
     STATUS
     ------------------------------------------------------- */

  .twl-svc-crm-hero-map
  .twl-svc-crm-map__status {
    left: 4%;
    right: auto;

    top: auto;
    bottom: 7%;
  }

}
/* =========================================================
   CRM HERO — DESKTOP INNER SPACING
   Финальная корректировка расстояний от границ canvas
   ========================================================= */

@media (min-width: 1025px) {

  /* -------------------------------------------------------
     TOP ROW
     ------------------------------------------------------- */

  .twl-svc-crm-hero-node--source {
    left: 7.5%;
    right: auto;

    top: 10%;
    bottom: auto;
  }


  .twl-svc-crm-hero-node--lead {
    left: 34%;
    right: auto;

    top: 10%;
    bottom: auto;
  }


  .twl-svc-crm-hero-node--qualification {
    left: 61%;
    right: auto;

    top: 10%;
    bottom: auto;
  }


  /* -------------------------------------------------------
     DEAL
     ------------------------------------------------------- */

  .twl-svc-crm-hero-node--deal {
    left: auto;
    right: 7.5%;

    top: 39%;
    bottom: auto;
  }


  /* -------------------------------------------------------
     LOWER ROW
     ------------------------------------------------------- */

  .twl-svc-crm-hero-node--tasks {
    left: auto;
    right: 7.5%;

    top: auto;
    bottom: 13%;
  }


  .twl-svc-crm-hero-node--analytics {
    left: 39%;
    right: auto;

    top: auto;
    bottom: 13%;
  }


  /* -------------------------------------------------------
     STATUS
     ------------------------------------------------------- */

  .twl-svc-crm-hero-map
  .twl-svc-crm-map__status {
    left: 7.5%;
    right: auto;

    top: auto;
    bottom: 8%;
  }

}
/* =========================================================
   CRM PIPELINE — DESKTOP LAYOUT REBALANCE
   Блок: "CRM должна повторять бизнес-процесс..."
   ========================================================= */

@media (min-width: 1025px) {

  .twl-svc-crm-pipeline {
    height: 480px;
    min-height: 480px;
  }


  .twl-svc-crm-pipeline .twl-svc-crm-node {
    min-width: 148px;
    max-width: 176px;
  }


  .twl-svc-crm-pipeline .twl-svc-crm-node.is-core {
    min-width: 156px;
    max-width: 184px;
  }


  /* -------------------------------------------------------
     01 — Источник обращения
     ------------------------------------------------------- */

  .twl-svc-crm-pipeline-node--source {
    left: 4%;
    right: auto;

    top: 40%;
    bottom: auto;
  }


  /* -------------------------------------------------------
     02 — Лид / клиент
     ------------------------------------------------------- */

  .twl-svc-crm-pipeline-node--client {
    left: 18%;
    right: auto;

    top: 15%;
    bottom: auto;
  }


  /* -------------------------------------------------------
     03 — Квалификация
     ------------------------------------------------------- */

  .twl-svc-crm-pipeline-node--qualification {
    left: 33%;
    right: auto;

    top: 40%;
    bottom: auto;
  }


  /* -------------------------------------------------------
     04 — Рабочая воронка
     ------------------------------------------------------- */

  .twl-svc-crm-pipeline-node--pipeline {
    left: 49%;
    right: auto;

    top: 15%;
    bottom: auto;
  }


  /* -------------------------------------------------------
     05 — Задачи и коммуникации
     ------------------------------------------------------- */

  .twl-svc-crm-pipeline-node--tasks {
    left: 64%;
    right: auto;

    top: 40%;
    bottom: auto;
  }


  /* -------------------------------------------------------
     06 — Результат
     ------------------------------------------------------- */

  .twl-svc-crm-pipeline-node--result {
    left: 79%;
    right: auto;

    top: 15%;
    bottom: auto;
  }


  /* -------------------------------------------------------
     07 — Аналитика
     ------------------------------------------------------- */

  .twl-svc-crm-pipeline-node--analytics {
    left: auto;
    right: 4%;

    top: 40%;
    bottom: auto;
  }


  /* -------------------------------------------------------
     STATUS
     ------------------------------------------------------- */

  .twl-svc-crm-pipeline .twl-svc-crm-map__status {
    left: 3%;
    right: auto;

    bottom: 6%;
    top: auto;
  }

}
/* =========================================================
   CRM PIPELINE — DESKTOP MANUAL NODE POSITIONS
   ========================================================= */

@media (min-width: 1025px) {

  .twl-svc-crm-pipeline-node--client {
    left: 22%;
    right: auto;

    top: 15%;
    bottom: auto;
  }


  .twl-svc-crm-pipeline-node--qualification {
    left: 39%;
    right: auto;

    top: 14%;
    bottom: auto;
  }


  .twl-svc-crm-pipeline-node--pipeline {
    left: 60%;
    right: auto;

    top: 15%;
    bottom: auto;
  }


  .twl-svc-crm-pipeline-node--tasks {
    left: 81%;
    right: auto;

    top: 14%;
    bottom: auto;
  }


  .twl-svc-crm-pipeline-node--result {
    left: 82%;
    right: auto;

    top: 43%;
    bottom: auto;
  }


  .twl-svc-crm-pipeline-node--analytics {
    left: auto;
    right: 6%;

    top: 76%;
    bottom: auto;
  }

}
/* =========================================================
   SERVICE — API INTEGRATIONS
   Template: service-api-integration.php
   ========================================================= */


/* =========================================================
   SCENARIOS
   ========================================================= */

.twl-svc-api-scenario__code {
  display: block;
  margin-bottom: 8px;
  color: rgba(187, 194, 255, 0.46);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* =========================================================
   WORK — 3 + 2
   ========================================================= */

.twl-svc-api-work__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 22px);
}

.twl-svc-api-work__card {
  grid-column: span 2;
}

.twl-svc-api-work__card:nth-child(4),
.twl-svc-api-work__card:nth-child(5) {
  grid-column: span 3;
}


/* =========================================================
   INCLUDED
   ========================================================= */

.twl-svc-api-included__groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 44px);
}

.twl-svc-api-included__group {
  min-width: 0;
  padding: clamp(26px, 2.5vw, 34px);
  border: 1px solid var(--twl-svc-border);
  border-radius: 24px;
  background:
    linear-gradient(
      145deg,
      rgba(14, 18, 38, 0.78),
      rgba(7, 9, 21, 0.72)
    );
}

.twl-svc-api-included__head {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--twl-svc-border-soft);
}

.twl-svc-api-included__head > span {
  color: rgba(187, 194, 255, 0.52);
  font-size: 8px;
  letter-spacing: 0.08em;
}

.twl-svc-api-included__head h3 {
  margin: 8px 0 0;
  color: var(--twl-svc-text);
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 600;
}

.twl-svc-api-included__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.twl-svc-api-included__list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 62px;
  border-bottom: 1px solid var(--twl-svc-border-soft);
}

.twl-svc-api-included__list li:last-child {
  border-bottom: 0;
}

.twl-svc-api-included__list li > span {
  color: rgba(187, 194, 255, 0.48);
  font-size: 8px;
}

.twl-svc-api-included__list strong {
  color: var(--twl-svc-secondary);
  font-size: 14px;
  font-weight: 500;
}


/* =========================================================
   PROCESS CHECKPOINT
   ========================================================= */

.twl-svc-api-process__step.is-checkpoint {
  position: relative;
}

.twl-svc-api-process__step.is-checkpoint::after {
  content: "api.check";
  position: absolute;
  left: 0;
  bottom: -17px;
  color: rgba(187, 194, 255, 0.46);
  font: 500 7px/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* =========================================================
   API MAP — COMMON
   ========================================================= */

.twl-svc-api-hero-map,
.twl-svc-api-flow {
  position: relative;
  overflow: hidden;
  overflow-anchor: none;
}

.twl-svc-api-hero-map {
  width: 108%;
  min-height: 560px;
  margin-left: -4%;
}

.twl-svc-api-map__frame {
  position: absolute;
  inset: 7% 4% 6%;
  border: 1px solid rgba(151, 160, 255, 0.18);
  border-radius: 26px;
  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(119, 104, 255, 0.12),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(13, 16, 34, 0.96),
      rgba(7, 9, 21, 0.98)
    );
}

.twl-svc-api-map__grid {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  pointer-events: none;
  background-image:
    linear-gradient(
      rgba(151, 160, 255, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(151, 160, 255, 0.045) 1px,
      transparent 1px
    );
  background-size: 50px 50px;
  -webkit-mask-image:
    radial-gradient(
      circle at 50% 48%,
      #000,
      transparent 74%
    );
  mask-image:
    radial-gradient(
      circle at 50% 48%,
      #000,
      transparent 74%
    );
}

.twl-svc-api-map__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 470px;
  height: 280px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(119, 104, 255, 0.07);
  filter: blur(100px);
  pointer-events: none;
}

.twl-svc-api-map__links {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.twl-svc-api-hero-map.is-links-ready
.twl-svc-api-map__links,
.twl-svc-api-flow.is-links-ready
.twl-svc-api-map__links {
  opacity: 1;
}

.twl-svc-api-map__link {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.twl-svc-api-map__link--primary {
  stroke: rgba(164, 154, 255, 0.86);
  stroke-width: 1.55;
  filter:
    drop-shadow(
      0 0 5px rgba(119, 104, 255, 0.15)
    );
}

.twl-svc-api-map__link--secondary {
  stroke: rgba(105, 116, 165, 0.48);
  stroke-width: 1.15;
}


/* =========================================================
   NODE
   ========================================================= */

.twl-svc-api-node {
  position: absolute;
  z-index: 2;

  width: max-content;
  min-width: 138px;
  max-width: 190px;
  min-height: 68px;

  padding: 11px 13px;

  border: 1px solid rgba(151, 160, 255, 0.20);
  border-radius: 12px;

  background: rgba(9, 12, 27, 0.97);

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.10);
}

.twl-svc-api-node::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: rgba(100, 115, 255, 0.92);

  box-shadow:
    0 0 10px rgba(100, 115, 255, 0.35);
}

.twl-svc-api-node span,
.twl-svc-api-node small {
  display: block;

  color: var(--twl-svc-muted);

  font:
    500 7px/1.35
    "IBM Plex Mono",
    monospace;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.twl-svc-api-node strong {
  display: block;

  margin: 5px 0 3px;

  color: var(--twl-svc-text);

  font-size: 13px;
  font-weight: 600;
  line-height: 1.18;
}

.twl-svc-api-node.is-core {
  min-width: 170px;

  border-color: rgba(141, 128, 255, 0.64);

  background:
    linear-gradient(
      145deg,
      rgba(27, 29, 62, 0.99),
      rgba(12, 15, 33, 0.99)
    );

  box-shadow:
    0 18px 52px rgba(81, 72, 184, 0.16);
}


/* =========================================================
   STATUS
   ========================================================= */

.twl-svc-api-map__status {
  position: absolute;
  z-index: 2;

  left: 6%;
  bottom: 8%;

  padding: 10px 12px;

  border: 1px solid rgba(151, 160, 255, 0.12);
  border-radius: 9px;

  background: rgba(7, 9, 22, 0.94);
}

.twl-svc-api-map__status span {
  display: block;

  color: var(--twl-svc-muted);

  font:
    500 8px/1.35
    "IBM Plex Mono",
    monospace;

  letter-spacing: 0.08em;
}

.twl-svc-api-map__status strong {
  color: var(--twl-svc-secondary);
  font-size: 10px;
  font-weight: 600;
}

.twl-svc-api-map__status i {
  display: inline-block;

  width: 5px;
  height: 5px;

  margin-left: 5px;

  border-radius: 50%;

  background: var(--twl-svc-blue);
}


/* =========================================================
   HERO — DESKTOP
   ========================================================= */

@media (min-width: 1025px) {

  .twl-svc-api-hero-node--site {
    left: 5%;
    top: 14%;
  }

  .twl-svc-api-hero-node--telephony {
    left: 5%;
    bottom: 14%;
  }

  .twl-svc-api-hero-node--internal {
    left: 7%;
    top: 44%;
  }

  .twl-svc-api-hero-node--integration {
    left: 42%;
    top: 40%;
  }

  .twl-svc-api-hero-node--crm {
    right: 5%;
    top: 20%;
  }

  .twl-svc-api-hero-node--payment {
    right: 5%;
    bottom: 20%;
  }

}


/* =========================================================
   DATA FLOW — DESKTOP
   ========================================================= */

.twl-svc-api-flow {
  height: 440px;
  min-height: 440px;

  border: 1px solid var(--twl-svc-border);
  border-radius: 26px;

  background:
    radial-gradient(
      circle at 52% 49%,
      rgba(119, 104, 255, 0.10),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(12, 15, 32, 0.97),
      rgba(6, 8, 18, 0.98)
    );
}

@media (min-width: 1025px) {

  .twl-svc-api-flow-node--source {
    left: 3%;
    top: 35%;
  }

  .twl-svc-api-flow-node--endpoint {
    left: 20%;
    top: 35%;
  }

  .twl-svc-api-flow-node--integration {
    left: 38%;
    top: 35%;
  }

  .twl-svc-api-flow-node--transform {
    left: 57%;
    top: 35%;
  }

  .twl-svc-api-flow-node--target {
    right: 4%;
    top: 35%;
  }

  .twl-svc-api-flow-node--log {
    right: 4%;
    bottom: 7%;
  }

  .twl-svc-api-flow
  .twl-svc-api-map__status {
    left: 3%;
    bottom: 6%;
  }

}


/* =========================================================
   <= 1024
   ========================================================= */

@media (max-width: 1024px) {

  .twl-svc-api-work__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .twl-svc-api-work__card,
  .twl-svc-api-work__card:nth-child(4),
  .twl-svc-api-work__card:nth-child(5) {
    grid-column: auto;
  }


  .twl-svc-api-hero-map {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-template-areas:
      "site telephony"
      "internal internal"
      "integration integration"
      "crm payment";

    justify-items: center;
    align-items: center;

    width: min(100%, 610px);
    min-height: 0;

    margin: 24px auto 0;
    padding: 42px 30px;

    column-gap: 24px;
    row-gap: 40px;
  }


  .twl-svc-api-hero-map
  .twl-svc-api-map__frame {
    inset: 0;
  }


  .twl-svc-api-hero-node--site {
    grid-area: site;
  }

  .twl-svc-api-hero-node--telephony {
    grid-area: telephony;
  }

  .twl-svc-api-hero-node--internal {
    grid-area: internal;
  }

  .twl-svc-api-hero-node--integration {
    grid-area: integration;
  }

  .twl-svc-api-hero-node--crm {
    grid-area: crm;
  }

  .twl-svc-api-hero-node--payment {
    grid-area: payment;
  }


  .twl-svc-api-node,
  .twl-svc-api-node.is-core {
    position: relative !important;

    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    width: max-content;
    min-width: 132px;
    max-width: 180px;
    min-height: 60px;

    margin: 0;
  }


  .twl-svc-api-map__status {
    display: none;
  }


  .twl-svc-api-flow {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr);

    justify-items: center;

    height: auto;
    min-height: 0;

    padding: 44px 34px;

    row-gap: 40px;
  }

}


/* =========================================================
   <= 767
   ========================================================= */

@media (max-width: 767px) {

  .twl-svc-api-included__groups {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .twl-svc-api-hero-map {
    width: 100%;

    padding:
      32px
      18px;

    column-gap: 12px;
    row-gap: 34px;

    border-radius: 20px;
  }


  .twl-svc-api-flow {
    padding:
      34px
      20px;

    row-gap: 34px;

    border-radius: 20px;
  }


  .twl-svc-api-node,
  .twl-svc-api-node.is-core {
    min-width: 110px;
    max-width: 150px;
    min-height: 54px;

    padding:
      8px
      10px;

    border-radius: 10px;
  }


  .twl-svc-api-node strong {
    font-size: 11.5px;
  }


  .twl-svc-api-node span,
  .twl-svc-api-node small {
    font-size: 6.2px;
  }

}


/* =========================================================
   <= 560
   ========================================================= */

@media (max-width: 560px) {

  .twl-svc-api-work__grid {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .twl-svc-api-hero-map {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    padding-inline: 12px;

    column-gap: 8px;
  }


  .twl-svc-api-node,
  .twl-svc-api-node.is-core {
    min-width: 102px;
    max-width: 136px;
  }

}
/* =========================================================
   SERVICE — API INTEGRATIONS
   Template: service-api-integration.php
   ========================================================= */


/* =========================================================
   SCENARIOS
   ========================================================= */

.twl-svc-api-scenario__code {
  display: block;
  margin-bottom: 8px;
  color: rgba(187, 194, 255, 0.46);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* =========================================================
   WORK — 3 + 2
   ========================================================= */

.twl-svc-api-work__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 22px);
}

.twl-svc-api-work__card {
  grid-column: span 2;
}

.twl-svc-api-work__card:nth-child(4),
.twl-svc-api-work__card:nth-child(5) {
  grid-column: span 3;
}


/* =========================================================
   INCLUDED
   ========================================================= */

.twl-svc-api-included__groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 44px);
}

.twl-svc-api-included__group {
  min-width: 0;
  padding: clamp(26px, 2.5vw, 34px);
  border: 1px solid var(--twl-svc-border);
  border-radius: 24px;
  background:
    linear-gradient(
      145deg,
      rgba(14, 18, 38, 0.78),
      rgba(7, 9, 21, 0.72)
    );
}

.twl-svc-api-included__head {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--twl-svc-border-soft);
}

.twl-svc-api-included__head > span {
  color: rgba(187, 194, 255, 0.52);
  font-size: 8px;
  letter-spacing: 0.08em;
}

.twl-svc-api-included__head h3 {
  margin: 8px 0 0;
  color: var(--twl-svc-text);
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 600;
}

.twl-svc-api-included__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.twl-svc-api-included__list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 62px;
  border-bottom: 1px solid var(--twl-svc-border-soft);
}

.twl-svc-api-included__list li:last-child {
  border-bottom: 0;
}

.twl-svc-api-included__list li > span {
  color: rgba(187, 194, 255, 0.48);
  font-size: 8px;
}

.twl-svc-api-included__list strong {
  color: var(--twl-svc-secondary);
  font-size: 14px;
  font-weight: 500;
}


/* =========================================================
   PROCESS CHECKPOINT
   ========================================================= */

.twl-svc-api-process__step.is-checkpoint {
  position: relative;
}

.twl-svc-api-process__step.is-checkpoint::after {
  content: "api.check";
  position: absolute;
  left: 0;
  bottom: -17px;
  color: rgba(187, 194, 255, 0.46);
  font: 500 7px/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* =========================================================
   API MAP — COMMON
   ========================================================= */

.twl-svc-api-hero-map,
.twl-svc-api-flow {
  position: relative;
  overflow: hidden;
  overflow-anchor: none;
}

.twl-svc-api-hero-map {
  width: 108%;
  min-height: 560px;
  margin-left: -4%;
}

.twl-svc-api-map__frame {
  position: absolute;
  inset: 7% 4% 6%;
  border: 1px solid rgba(151, 160, 255, 0.18);
  border-radius: 26px;
  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(119, 104, 255, 0.12),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(13, 16, 34, 0.96),
      rgba(7, 9, 21, 0.98)
    );
}

.twl-svc-api-map__grid {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  pointer-events: none;
  background-image:
    linear-gradient(
      rgba(151, 160, 255, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(151, 160, 255, 0.045) 1px,
      transparent 1px
    );
  background-size: 50px 50px;
  -webkit-mask-image:
    radial-gradient(
      circle at 50% 48%,
      #000,
      transparent 74%
    );
  mask-image:
    radial-gradient(
      circle at 50% 48%,
      #000,
      transparent 74%
    );
}

.twl-svc-api-map__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 470px;
  height: 280px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(119, 104, 255, 0.07);
  filter: blur(100px);
  pointer-events: none;
}

.twl-svc-api-map__links {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.twl-svc-api-hero-map.is-links-ready
.twl-svc-api-map__links,
.twl-svc-api-flow.is-links-ready
.twl-svc-api-map__links {
  opacity: 1;
}

.twl-svc-api-map__link {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.twl-svc-api-map__link--primary {
  stroke: rgba(164, 154, 255, 0.86);
  stroke-width: 1.55;
  filter:
    drop-shadow(
      0 0 5px rgba(119, 104, 255, 0.15)
    );
}

.twl-svc-api-map__link--secondary {
  stroke: rgba(105, 116, 165, 0.48);
  stroke-width: 1.15;
}


/* =========================================================
   NODE
   ========================================================= */

.twl-svc-api-node {
  position: absolute;
  z-index: 2;

  width: max-content;
  min-width: 138px;
  max-width: 190px;
  min-height: 68px;

  padding: 11px 13px;

  border: 1px solid rgba(151, 160, 255, 0.20);
  border-radius: 12px;

  background: rgba(9, 12, 27, 0.97);

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.10);
}

.twl-svc-api-node::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: rgba(100, 115, 255, 0.92);

  box-shadow:
    0 0 10px rgba(100, 115, 255, 0.35);
}

.twl-svc-api-node span,
.twl-svc-api-node small {
  display: block;

  color: var(--twl-svc-muted);

  font:
    500 7px/1.35
    "IBM Plex Mono",
    monospace;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.twl-svc-api-node strong {
  display: block;

  margin: 5px 0 3px;

  color: var(--twl-svc-text);

  font-size: 13px;
  font-weight: 600;
  line-height: 1.18;
}

.twl-svc-api-node.is-core {
  min-width: 170px;

  border-color: rgba(141, 128, 255, 0.64);

  background:
    linear-gradient(
      145deg,
      rgba(27, 29, 62, 0.99),
      rgba(12, 15, 33, 0.99)
    );

  box-shadow:
    0 18px 52px rgba(81, 72, 184, 0.16);
}


/* =========================================================
   STATUS
   ========================================================= */

.twl-svc-api-map__status {
  position: absolute;
  z-index: 2;

  left: 6%;
  bottom: 8%;

  padding: 10px 12px;

  border: 1px solid rgba(151, 160, 255, 0.12);
  border-radius: 9px;

  background: rgba(7, 9, 22, 0.94);
}

.twl-svc-api-map__status span {
  display: block;

  color: var(--twl-svc-muted);

  font:
    500 8px/1.35
    "IBM Plex Mono",
    monospace;

  letter-spacing: 0.08em;
}

.twl-svc-api-map__status strong {
  color: var(--twl-svc-secondary);
  font-size: 10px;
  font-weight: 600;
}

.twl-svc-api-map__status i {
  display: inline-block;

  width: 5px;
  height: 5px;

  margin-left: 5px;

  border-radius: 50%;

  background: var(--twl-svc-blue);
}


/* =========================================================
   HERO — DESKTOP
   ========================================================= */

@media (min-width: 1025px) {

  .twl-svc-api-hero-node--site {
    left: 5%;
    top: 14%;
  }

  .twl-svc-api-hero-node--telephony {
    left: 5%;
    bottom: 14%;
  }

  .twl-svc-api-hero-node--internal {
    left: 7%;
    top: 44%;
  }

  .twl-svc-api-hero-node--integration {
    left: 42%;
    top: 40%;
  }

  .twl-svc-api-hero-node--crm {
    right: 5%;
    top: 20%;
  }

  .twl-svc-api-hero-node--payment {
    right: 5%;
    bottom: 20%;
  }

}


/* =========================================================
   DATA FLOW — DESKTOP
   ========================================================= */

.twl-svc-api-flow {
  height: 440px;
  min-height: 440px;

  border: 1px solid var(--twl-svc-border);
  border-radius: 26px;

  background:
    radial-gradient(
      circle at 52% 49%,
      rgba(119, 104, 255, 0.10),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(12, 15, 32, 0.97),
      rgba(6, 8, 18, 0.98)
    );
}

@media (min-width: 1025px) {

  .twl-svc-api-flow-node--source {
    left: 3%;
    top: 35%;
  }

  .twl-svc-api-flow-node--endpoint {
    left: 20%;
    top: 35%;
  }

  .twl-svc-api-flow-node--integration {
    left: 38%;
    top: 35%;
  }

  .twl-svc-api-flow-node--transform {
    left: 57%;
    top: 35%;
  }

  .twl-svc-api-flow-node--target {
    right: 4%;
    top: 35%;
  }

  .twl-svc-api-flow-node--log {
    right: 4%;
    bottom: 7%;
  }

  .twl-svc-api-flow
  .twl-svc-api-map__status {
    left: 3%;
    bottom: 6%;
  }

}


/* =========================================================
   <= 1024
   ========================================================= */

@media (max-width: 1024px) {

  .twl-svc-api-work__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .twl-svc-api-work__card,
  .twl-svc-api-work__card:nth-child(4),
  .twl-svc-api-work__card:nth-child(5) {
    grid-column: auto;
  }


  .twl-svc-api-hero-map {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-template-areas:
      "site telephony"
      "internal internal"
      "integration integration"
      "crm payment";

    justify-items: center;
    align-items: center;

    width: min(100%, 610px);
    min-height: 0;

    margin: 24px auto 0;
    padding: 42px 30px;

    column-gap: 24px;
    row-gap: 40px;
  }


  .twl-svc-api-hero-map
  .twl-svc-api-map__frame {
    inset: 0;
  }


  .twl-svc-api-hero-node--site {
    grid-area: site;
  }

  .twl-svc-api-hero-node--telephony {
    grid-area: telephony;
  }

  .twl-svc-api-hero-node--internal {
    grid-area: internal;
  }

  .twl-svc-api-hero-node--integration {
    grid-area: integration;
  }

  .twl-svc-api-hero-node--crm {
    grid-area: crm;
  }

  .twl-svc-api-hero-node--payment {
    grid-area: payment;
  }


  .twl-svc-api-node,
  .twl-svc-api-node.is-core {
    position: relative !important;

    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    width: max-content;
    min-width: 132px;
    max-width: 180px;
    min-height: 60px;

    margin: 0;
  }


  .twl-svc-api-map__status {
    display: none;
  }


  .twl-svc-api-flow {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr);

    justify-items: center;

    height: auto;
    min-height: 0;

    padding: 44px 34px;

    row-gap: 40px;
  }

}


/* =========================================================
   <= 767
   ========================================================= */

@media (max-width: 767px) {

  .twl-svc-api-included__groups {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .twl-svc-api-hero-map {
    width: 100%;

    padding:
      32px
      18px;

    column-gap: 12px;
    row-gap: 34px;

    border-radius: 20px;
  }


  .twl-svc-api-flow {
    padding:
      34px
      20px;

    row-gap: 34px;

    border-radius: 20px;
  }


  .twl-svc-api-node,
  .twl-svc-api-node.is-core {
    min-width: 110px;
    max-width: 150px;
    min-height: 54px;

    padding:
      8px
      10px;

    border-radius: 10px;
  }


  .twl-svc-api-node strong {
    font-size: 11.5px;
  }


  .twl-svc-api-node span,
  .twl-svc-api-node small {
    font-size: 6.2px;
  }

}


/* =========================================================
   <= 560
   ========================================================= */

@media (max-width: 560px) {

  .twl-svc-api-work__grid {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .twl-svc-api-hero-map {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    padding-inline: 12px;

    column-gap: 8px;
  }


  .twl-svc-api-node,
  .twl-svc-api-node.is-core {
    min-width: 102px;
    max-width: 136px;
  }

}
/* =========================================================
   SERVICE — API INTEGRATIONS
   Template: service-api-integration.php
   ========================================================= */


/* =========================================================
   SCENARIOS
   ========================================================= */

.twl-svc-api-scenario__code {
  display: block;
  margin-bottom: 8px;
  color: rgba(187, 194, 255, 0.46);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* =========================================================
   WORK — 3 + 2
   ========================================================= */

.twl-svc-api-work__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 22px);
}

.twl-svc-api-work__card {
  grid-column: span 2;
}

.twl-svc-api-work__card:nth-child(4),
.twl-svc-api-work__card:nth-child(5) {
  grid-column: span 3;
}


/* =========================================================
   INCLUDED
   ========================================================= */

.twl-svc-api-included__groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 44px);
}

.twl-svc-api-included__group {
  min-width: 0;
  padding: clamp(26px, 2.5vw, 34px);
  border: 1px solid var(--twl-svc-border);
  border-radius: 24px;
  background:
    linear-gradient(
      145deg,
      rgba(14, 18, 38, 0.78),
      rgba(7, 9, 21, 0.72)
    );
}

.twl-svc-api-included__head {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--twl-svc-border-soft);
}

.twl-svc-api-included__head > span {
  color: rgba(187, 194, 255, 0.52);
  font-size: 8px;
  letter-spacing: 0.08em;
}

.twl-svc-api-included__head h3 {
  margin: 8px 0 0;
  color: var(--twl-svc-text);
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 600;
}

.twl-svc-api-included__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.twl-svc-api-included__list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 62px;
  border-bottom: 1px solid var(--twl-svc-border-soft);
}

.twl-svc-api-included__list li:last-child {
  border-bottom: 0;
}

.twl-svc-api-included__list li > span {
  color: rgba(187, 194, 255, 0.48);
  font-size: 8px;
}

.twl-svc-api-included__list strong {
  color: var(--twl-svc-secondary);
  font-size: 14px;
  font-weight: 500;
}


/* =========================================================
   PROCESS CHECKPOINT
   ========================================================= */

.twl-svc-api-process__step.is-checkpoint {
  position: relative;
}

.twl-svc-api-process__step.is-checkpoint::after {
  content: "api.check";
  position: absolute;
  left: 0;
  bottom: -17px;
  color: rgba(187, 194, 255, 0.46);
  font: 500 7px/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* =========================================================
   API MAP — COMMON
   ========================================================= */

.twl-svc-api-hero-map,
.twl-svc-api-flow {
  position: relative;
  overflow: hidden;
  overflow-anchor: none;
}

.twl-svc-api-hero-map {
  width: 108%;
  min-height: 560px;
  margin-left: -4%;
}

.twl-svc-api-map__frame {
  position: absolute;
  inset: 7% 4% 6%;
  border: 1px solid rgba(151, 160, 255, 0.18);
  border-radius: 26px;
  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(119, 104, 255, 0.12),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(13, 16, 34, 0.96),
      rgba(7, 9, 21, 0.98)
    );
}

.twl-svc-api-map__grid {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  pointer-events: none;
  background-image:
    linear-gradient(
      rgba(151, 160, 255, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(151, 160, 255, 0.045) 1px,
      transparent 1px
    );
  background-size: 50px 50px;
  -webkit-mask-image:
    radial-gradient(
      circle at 50% 48%,
      #000,
      transparent 74%
    );
  mask-image:
    radial-gradient(
      circle at 50% 48%,
      #000,
      transparent 74%
    );
}

.twl-svc-api-map__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 470px;
  height: 280px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(119, 104, 255, 0.07);
  filter: blur(100px);
  pointer-events: none;
}

.twl-svc-api-map__links {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.twl-svc-api-hero-map.is-links-ready
.twl-svc-api-map__links,
.twl-svc-api-flow.is-links-ready
.twl-svc-api-map__links {
  opacity: 1;
}

.twl-svc-api-map__link {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.twl-svc-api-map__link--primary {
  stroke: rgba(164, 154, 255, 0.86);
  stroke-width: 1.55;
  filter:
    drop-shadow(
      0 0 5px rgba(119, 104, 255, 0.15)
    );
}

.twl-svc-api-map__link--secondary {
  stroke: rgba(105, 116, 165, 0.48);
  stroke-width: 1.15;
}


/* =========================================================
   NODE
   ========================================================= */

.twl-svc-api-node {
  position: absolute;
  z-index: 2;

  width: max-content;
  min-width: 138px;
  max-width: 190px;
  min-height: 68px;

  padding: 11px 13px;

  border: 1px solid rgba(151, 160, 255, 0.20);
  border-radius: 12px;

  background: rgba(9, 12, 27, 0.97);

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.10);
}

.twl-svc-api-node::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: rgba(100, 115, 255, 0.92);

  box-shadow:
    0 0 10px rgba(100, 115, 255, 0.35);
}

.twl-svc-api-node span,
.twl-svc-api-node small {
  display: block;

  color: var(--twl-svc-muted);

  font:
    500 7px/1.35
    "IBM Plex Mono",
    monospace;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.twl-svc-api-node strong {
  display: block;

  margin: 5px 0 3px;

  color: var(--twl-svc-text);

  font-size: 13px;
  font-weight: 600;
  line-height: 1.18;
}

.twl-svc-api-node.is-core {
  min-width: 170px;

  border-color: rgba(141, 128, 255, 0.64);

  background:
    linear-gradient(
      145deg,
      rgba(27, 29, 62, 0.99),
      rgba(12, 15, 33, 0.99)
    );

  box-shadow:
    0 18px 52px rgba(81, 72, 184, 0.16);
}


/* =========================================================
   STATUS
   ========================================================= */

.twl-svc-api-map__status {
  position: absolute;
  z-index: 2;

  left: 6%;
  bottom: 8%;

  padding: 10px 12px;

  border: 1px solid rgba(151, 160, 255, 0.12);
  border-radius: 9px;

  background: rgba(7, 9, 22, 0.94);
}

.twl-svc-api-map__status span {
  display: block;

  color: var(--twl-svc-muted);

  font:
    500 8px/1.35
    "IBM Plex Mono",
    monospace;

  letter-spacing: 0.08em;
}

.twl-svc-api-map__status strong {
  color: var(--twl-svc-secondary);
  font-size: 10px;
  font-weight: 600;
}

.twl-svc-api-map__status i {
  display: inline-block;

  width: 5px;
  height: 5px;

  margin-left: 5px;

  border-radius: 50%;

  background: var(--twl-svc-blue);
}


/* =========================================================
   HERO — DESKTOP
   ========================================================= */

@media (min-width: 1025px) {

  .twl-svc-api-hero-node--site {
    left: 5%;
    top: 14%;
  }

  .twl-svc-api-hero-node--telephony {
    left: 5%;
    bottom: 22%;
  }

  .twl-svc-api-hero-node--internal {
    left: 7%;
    top: 44%;
  }

  .twl-svc-api-hero-node--integration {
    left: 42%;
    top: 40%;
  }

  .twl-svc-api-hero-node--crm {
    right: 5%;
    top: 20%;
  }

  .twl-svc-api-hero-node--payment {
    right: 5%;
    bottom: 20%;
  }

}


/* =========================================================
   DATA FLOW — DESKTOP
   ========================================================= */

.twl-svc-api-flow {
  height: 440px;
  min-height: 440px;

  border: 1px solid var(--twl-svc-border);
  border-radius: 26px;

  background:
    radial-gradient(
      circle at 52% 49%,
      rgba(119, 104, 255, 0.10),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(12, 15, 32, 0.97),
      rgba(6, 8, 18, 0.98)
    );
}

@media (min-width: 1025px) {

  .twl-svc-api-flow-node--source {
    left: 3%;
    top: 35%;
  }

  .twl-svc-api-flow-node--endpoint {
    left: 20%;
    top: 35%;
  }

  .twl-svc-api-flow-node--integration {
    left: 38%;
    top: 35%;
  }

  .twl-svc-api-flow-node--transform {
    left: 57%;
    top: 35%;
  }

  .twl-svc-api-flow-node--target {
    right: 4%;
    top: 35%;
  }

  .twl-svc-api-flow-node--log {
    right: 2%;
    bottom: 7%;
  }

  .twl-svc-api-flow
  .twl-svc-api-map__status {
    left: 3%;
    bottom: 6%;
  }

}


/* =========================================================
   <= 1024
   ========================================================= */

@media (max-width: 1024px) {

  .twl-svc-api-work__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .twl-svc-api-work__card,
  .twl-svc-api-work__card:nth-child(4),
  .twl-svc-api-work__card:nth-child(5) {
    grid-column: auto;
  }


  .twl-svc-api-hero-map {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-template-areas:
      "site telephony"
      "internal internal"
      "integration integration"
      "crm payment";

    justify-items: center;
    align-items: center;

    width: min(100%, 610px);
    min-height: 0;

    margin: 24px auto 0;
    padding: 42px 30px;

    column-gap: 24px;
    row-gap: 40px;
  }


  .twl-svc-api-hero-map
  .twl-svc-api-map__frame {
    inset: 0;
  }


  .twl-svc-api-hero-node--site {
    grid-area: site;
  }

  .twl-svc-api-hero-node--telephony {
    grid-area: telephony;
  }

  .twl-svc-api-hero-node--internal {
    grid-area: internal;
  }

  .twl-svc-api-hero-node--integration {
    grid-area: integration;
  }

  .twl-svc-api-hero-node--crm {
    grid-area: crm;
  }

  .twl-svc-api-hero-node--payment {
    grid-area: payment;
  }


  .twl-svc-api-node,
  .twl-svc-api-node.is-core {
    position: relative !important;

    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    width: max-content;
    min-width: 132px;
    max-width: 180px;
    min-height: 60px;

    margin: 0;
  }


  .twl-svc-api-map__status {
    display: none;
  }


  .twl-svc-api-flow {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr);

    justify-items: center;

    height: auto;
    min-height: 0;

    padding: 44px 34px;

    row-gap: 40px;
  }

}


/* =========================================================
   <= 767
   ========================================================= */

@media (max-width: 767px) {

  .twl-svc-api-included__groups {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .twl-svc-api-hero-map {
    width: 100%;

    padding:
      32px
      18px;

    column-gap: 12px;
    row-gap: 34px;

    border-radius: 20px;
  }


  .twl-svc-api-flow {
    padding:
      34px
      20px;

    row-gap: 34px;

    border-radius: 20px;
  }


  .twl-svc-api-node,
  .twl-svc-api-node.is-core {
    min-width: 110px;
    max-width: 150px;
    min-height: 54px;

    padding:
      8px
      10px;

    border-radius: 10px;
  }


  .twl-svc-api-node strong {
    font-size: 11.5px;
  }


  .twl-svc-api-node span,
  .twl-svc-api-node small {
    font-size: 6.2px;
  }

}


/* =========================================================
   <= 560
   ========================================================= */

@media (max-width: 560px) {

  .twl-svc-api-work__grid {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .twl-svc-api-hero-map {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    padding-inline: 12px;

    column-gap: 8px;
  }


  .twl-svc-api-node,
  .twl-svc-api-node.is-core {
    min-width: 102px;
    max-width: 136px;
  }

}
/* =========================================================
   SERVICE — UI / UX DESIGN
   Template: service-ui-ux-design.php
   ========================================================= */


/* =========================================================
   HERO
   ========================================================= */

.twl-svc--design .twl-svc-hero__title {
  max-width: 900px;
}

.twl-svc-design-hero-map {
  position: relative;

  width: 108%;
  min-height: 560px;

  margin-left: -4%;

  overflow: hidden;
  overflow-anchor: none;
}

.twl-svc-design-map__frame {
  position: absolute;

  inset: 7% 4% 6%;

  border: 1px solid rgba(151, 160, 255, 0.16);
  border-radius: 28px;

  background:
    radial-gradient(
      circle at 58% 48%,
      rgba(119, 104, 255, 0.105),
      transparent 43%
    ),
    linear-gradient(
      145deg,
      rgba(12, 15, 31, 0.94),
      rgba(7, 9, 20, 0.98)
    );
}

.twl-svc-design-map__grid {
  position: absolute;
  inset: 0;

  opacity: 0.16;

  background-image:
    linear-gradient(
      rgba(151, 160, 255, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(151, 160, 255, 0.045) 1px,
      transparent 1px
    );

  background-size: 48px 48px;

  -webkit-mask-image:
    radial-gradient(
      circle at 55% 48%,
      #000,
      transparent 73%
    );

  mask-image:
    radial-gradient(
      circle at 55% 48%,
      #000,
      transparent 73%
    );

  pointer-events: none;
}

.twl-svc-design-map__glow {
  position: absolute;

  left: 55%;
  top: 48%;

  width: 500px;
  height: 300px;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: rgba(119, 104, 255, 0.06);

  filter: blur(110px);

  pointer-events: none;
}


/* =========================================================
   CONNECTIONS
   ========================================================= */

.twl-svc-design-map__links {
  position: absolute;

  inset: 0;

  z-index: 1;

  width: 100%;
  height: 100%;

  overflow: hidden;

  opacity: 0;

  pointer-events: none;

  transition: opacity 180ms ease;
}

.twl-svc-design-hero-map.is-links-ready
.twl-svc-design-map__links,
.twl-svc-design-flow.is-links-ready
.twl-svc-design-map__links {
  opacity: 1;
}

.twl-svc-design-map__link {
  fill: none;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect: non-scaling-stroke;
}

.twl-svc-design-map__link--primary {
  stroke: rgba(164, 154, 255, 0.84);
  stroke-width: 1.45;

  filter:
    drop-shadow(
      0 0 5px rgba(119, 104, 255, 0.14)
    );
}

.twl-svc-design-map__link--secondary {
  stroke: rgba(105, 116, 165, 0.46);
  stroke-width: 1.1;
}


/* =========================================================
   HERO STAGES
   ========================================================= */

.twl-svc-design-stage {
  position: absolute;

  z-index: 2;

  width: 138px;

  padding: 11px;

  border: 1px solid rgba(151, 160, 255, 0.18);
  border-radius: 14px;

  background: rgba(8, 11, 25, 0.96);
}

.twl-svc-design-stage.is-core {
  border-color: rgba(150, 139, 255, 0.54);

  background:
    linear-gradient(
      145deg,
      rgba(24, 27, 56, 0.98),
      rgba(10, 13, 29, 0.98)
    );
}

.twl-svc-design-stage > span {
  display: block;

  margin-top: 9px;

  color: rgba(187, 194, 255, 0.48);

  font-size: 6.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.twl-svc-design-stage > strong {
  display: block;

  margin-top: 4px;

  color: var(--twl-svc-text);

  font-size: 12px;
  font-weight: 600;
}

.twl-svc-design-stage__preview {
  position: relative;

  height: 68px;

  overflow: hidden;

  border: 1px solid rgba(151, 160, 255, 0.12);
  border-radius: 8px;

  background: rgba(5, 7, 17, 0.78);
}

.twl-svc-design-stage__preview i {
  position: absolute;

  display: block;

  border-radius: 3px;

  background: rgba(143, 152, 205, 0.20);
}


/* wireframe */

.twl-svc-design-stage__preview--wireframe i:nth-child(1) {
  left: 8px;
  top: 8px;

  width: 52%;
  height: 5px;
}

.twl-svc-design-stage__preview--wireframe i:nth-child(2) {
  left: 8px;
  top: 21px;

  width: 78%;
  height: 18px;

  background: transparent;

  border: 1px solid rgba(151, 160, 255, 0.20);
}

.twl-svc-design-stage__preview--wireframe i:nth-child(3) {
  left: 8px;
  bottom: 8px;

  width: 35%;
  height: 12px;

  background: transparent;

  border: 1px solid rgba(151, 160, 255, 0.16);
}

.twl-svc-design-stage__preview--wireframe i:nth-child(4) {
  right: 8px;
  bottom: 8px;

  width: 43%;
  height: 12px;

  background: transparent;

  border: 1px solid rgba(151, 160, 255, 0.16);
}


/* UI */

.twl-svc-design-stage__preview--ui {
  background:
    linear-gradient(
      145deg,
      rgba(20, 23, 48, 0.94),
      rgba(8, 10, 24, 0.94)
    );
}

.twl-svc-design-stage__preview--ui i:nth-child(1) {
  left: 8px;
  top: 8px;

  width: 32%;
  height: 5px;

  background: rgba(187, 194, 255, 0.56);
}

.twl-svc-design-stage__preview--ui i:nth-child(2) {
  left: 8px;
  top: 20px;

  width: 68%;
  height: 6px;
}

.twl-svc-design-stage__preview--ui i:nth-child(3) {
  left: 8px;
  bottom: 10px;

  width: 42%;
  height: 15px;

  background:
    linear-gradient(
      90deg,
      rgba(100, 115, 255, 0.78),
      rgba(119, 104, 255, 0.78)
    );
}

.twl-svc-design-stage__preview--ui i:nth-child(4) {
  right: 9px;
  top: 14px;

  width: 26%;
  height: 42px;

  background: rgba(132, 143, 207, 0.12);
}


/* component */

.twl-svc-design-stage__preview--component {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 6px;

  padding: 8px;
}

.twl-svc-design-stage__preview--component i {
  position: relative;

  inset: auto;

  width: auto;
  height: auto;

  min-height: 21px;

  border: 1px solid rgba(151, 160, 255, 0.16);

  background: rgba(119, 104, 255, 0.07);
}

.twl-svc-design-stage__preview--component i:nth-child(3) {
  grid-column: span 2;

  min-height: 18px;

  background:
    linear-gradient(
      90deg,
      rgba(100, 115, 255, 0.34),
      rgba(119, 104, 255, 0.10)
    );
}


/* final */

.twl-svc-design-stage__preview--final {
  background:
    linear-gradient(
      145deg,
      rgba(25, 29, 62, 0.98),
      rgba(9, 12, 28, 0.98)
    );
}

.twl-svc-design-stage__preview--final i:nth-child(1) {
  left: 8px;
  top: 8px;

  width: 42%;
  height: 5px;

  background: rgba(225, 228, 255, 0.70);
}

.twl-svc-design-stage__preview--final i:nth-child(2) {
  left: 8px;
  top: 21px;

  width: 62%;
  height: 5px;
}

.twl-svc-design-stage__preview--final i:nth-child(3) {
  left: 8px;
  bottom: 9px;

  width: 37%;
  height: 15px;

  background:
    linear-gradient(
      90deg,
      rgba(100, 115, 255, 0.90),
      rgba(119, 104, 255, 0.90)
    );
}

.twl-svc-design-stage__preview--final i:nth-child(4) {
  right: 8px;
  top: 14px;

  width: 28%;
  height: 43px;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(187, 194, 255, 0.30),
      transparent 65%
    );
}


/* desktop hero positions */

@media (min-width: 1025px) {

  .twl-svc-design-hero-stage--wireframe {
    left: 5%;
    top: 18%;
  }

  .twl-svc-design-hero-stage--ui {
    left: 30%;
    top: 32%;
  }

  .twl-svc-design-hero-stage--component {
    left: 55%;
    top: 18%;
  }

  .twl-svc-design-hero-stage--final {
    right: 5%;
    top: 37%;
  }

}


/* =========================================================
   STATUS
   ========================================================= */

.twl-svc-design-map__status {
  position: absolute;

  z-index: 2;

  left: 6%;
  bottom: 9%;

  padding: 10px 12px;

  border: 1px solid rgba(151, 160, 255, 0.12);
  border-radius: 9px;

  background: rgba(7, 9, 22, 0.92);
}

.twl-svc-design-map__status span {
  display: block;

  color: var(--twl-svc-muted);

  font:
    500 8px/1.35
    "IBM Plex Mono",
    monospace;
}

.twl-svc-design-map__status strong {
  color: var(--twl-svc-secondary);

  font-size: 10px;
  font-weight: 600;
}

.twl-svc-design-map__status i {
  display: inline-block;

  width: 5px;
  height: 5px;

  margin-left: 5px;

  border-radius: 50%;

  background: var(--twl-svc-blue);
}


/* =========================================================
   SCENARIOS
   ========================================================= */

.twl-svc-design-scenarios__list {
  grid-template-columns: minmax(0, 1fr);
}

.twl-svc-design-scenario__code {
  display: block;

  margin-bottom: 7px;

  color: rgba(187, 194, 255, 0.46);

  font-size: 7px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* =========================================================
   WORK — 3 + 2
   ========================================================= */

.twl-svc-design-work__grid {
  display: grid;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  gap: clamp(16px, 1.7vw, 22px);
}

.twl-svc-design-work__card {
  grid-column: span 2;

  min-height: 220px;
}

.twl-svc-design-work__card:nth-child(4),
.twl-svc-design-work__card:nth-child(5) {
  grid-column: span 3;
}

.twl-svc-design-work__meta {
  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 14px;

  margin-bottom: 38px;
}

.twl-svc-design-work__meta span,
.twl-svc-design-work__meta small {
  color: rgba(187, 194, 255, 0.52);

  font-size: 8px;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.twl-svc-design-work__meta small {
  color: rgba(133, 141, 171, 0.65);
}


/* =========================================================
   INCLUDED
   ========================================================= */

.twl-svc-design-included__layout {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: clamp(48px, 7vw, 100px);
}

.twl-svc-design-included__group {
  min-width: 0;
}

.twl-svc-design-included__head {
  padding-bottom: 22px;

  border-bottom:
    1px solid
    var(--twl-svc-border-soft);
}

.twl-svc-design-included__head span {
  color: rgba(187, 194, 255, 0.50);

  font-size: 8px;
}

.twl-svc-design-included__head h3 {
  margin: 8px 0 0;

  color: var(--twl-svc-text);

  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 600;
}

.twl-svc-design-included__list {
  list-style: none;

  margin: 0;
  padding: 0;
}

.twl-svc-design-included__list li {
  display: grid;

  grid-template-columns:
    34px
    minmax(0, 1fr);

  gap: 14px;

  align-items: center;

  min-height: 62px;

  border-bottom:
    1px solid
    var(--twl-svc-border-soft);
}

.twl-svc-design-included__list li > span {
  color: rgba(187, 194, 255, 0.42);

  font-size: 8px;
}

.twl-svc-design-included__list strong {
  color: var(--twl-svc-secondary);

  font-size: 14px;
  font-weight: 500;
}


/* =========================================================
   PROCESS — 7 STEPS
   ========================================================= */

.twl-svc-design-process__list {
  display: grid;

  grid-template-columns:
    repeat(7, minmax(0, 1fr));

  gap: clamp(18px, 2.5vw, 34px);

  list-style: none;

  margin: 0;
  padding: 0;
}

.twl-svc-design-process__step {
  position: relative;

  min-height: 128px;

  padding-top: 18px;

  border-top:
    1px solid
    rgba(151, 160, 255, 0.16);
}

.twl-svc-design-process__step:nth-child(2) {
  transform: translateY(18px);
}

.twl-svc-design-process__step:nth-child(3) {
  transform: translateY(36px);
}

.twl-svc-design-process__step:nth-child(4) {
  transform: translateY(54px);
}

.twl-svc-design-process__step:nth-child(5) {
  transform: translateY(36px);
}

.twl-svc-design-process__step:nth-child(6) {
  transform: translateY(18px);
}

.twl-svc-design-process__step > span {
  display: block;

  color: var(--twl-svc-lavender);

  font-size: 9px;
}

.twl-svc-design-process__step strong {
  display: block;

  margin-top: 24px;

  color: var(--twl-svc-text);

  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}


/* =========================================================
   METRICS
   ========================================================= */

.twl-svc-design-metrics
.twl-svc-metric:nth-child(3)
strong {
  font-size: clamp(38px, 4vw, 58px);
}

.twl-svc-design-metrics
.twl-svc-metric:nth-child(4)
strong {
  font-size: clamp(24px, 2.7vw, 40px);
  letter-spacing: -0.035em;
}


/* =========================================================
   SIGNATURE FLOW
   ========================================================= */

.twl-svc-design-flow {
  position: relative;

  height: 470px;
  min-height: 470px;

  overflow: hidden;
  overflow-anchor: none;

  border:
    1px solid
    var(--twl-svc-border);

  border-radius: 28px;

  background:
    radial-gradient(
      circle at 55% 50%,
      rgba(119, 104, 255, 0.085),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(11, 14, 30, 0.97),
      rgba(6, 8, 18, 0.99)
    );
}

.twl-svc-design-flow-node {
  position: absolute;

  z-index: 2;

  width: max-content;

  min-width: 130px;
  max-width: 170px;
  min-height: 66px;

  padding: 10px 12px;

  border:
    1px solid
    rgba(151, 160, 255, 0.18);

  border-radius: 12px;

  background:
    rgba(8, 11, 25, 0.97);
}

.twl-svc-design-flow-node.is-core {
  min-width: 158px;

  border-color:
    rgba(151, 140, 255, 0.60);

  background:
    linear-gradient(
      145deg,
      rgba(26, 29, 59, 0.99),
      rgba(11, 14, 31, 0.99)
    );
}

.twl-svc-design-flow-node span,
.twl-svc-design-flow-node small {
  display: block;

  color: var(--twl-svc-muted);

  font:
    500 7px/1.35
    "IBM Plex Mono",
    monospace;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.twl-svc-design-flow-node strong {
  display: block;

  margin: 5px 0 3px;

  color: var(--twl-svc-text);

  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}


@media (min-width: 1025px) {

  .twl-svc-design-flow-node--task {
    left: 3%;
    top: 19%;
  }

  .twl-svc-design-flow-node--scenario {
    left: 17%;
    top: 46%;
  }

  .twl-svc-design-flow-node--structure {
    left: 31%;
    top: 19%;
  }

  .twl-svc-design-flow-node--prototype {
    left: 45%;
    top: 46%;
  }

  .twl-svc-design-flow-node--ui {
    left: 59%;
    top: 19%;
  }

  .twl-svc-design-flow-node--component {
    left: 73%;
    top: 46%;
  }

  .twl-svc-design-flow-node--final {
    right: 3%;
    top: 19%;
  }

  .twl-svc-design-flow
  .twl-svc-design-map__status {
    left: 3%;
    bottom: 6%;
  }

}


/* =========================================================
   TECHNOLOGIES
   ========================================================= */

.twl-svc-design-tech {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;
}

.twl-svc-design-tech > span {
  display: inline-flex;

  align-items: center;

  min-height: 44px;

  padding: 0 17px;

  border:
    1px solid
    rgba(151, 160, 255, 0.14);

  border-radius: 12px;

  color: var(--twl-svc-secondary);

  background:
    rgba(10, 13, 29, 0.68);

  font-size: 12px;

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

.twl-svc-design-tech > span:hover {
  transform: translateY(-2px);

  border-color:
    rgba(151, 140, 255, 0.44);

  color: var(--twl-svc-text);

  background:
    rgba(20, 23, 48, 0.82);
}


/* =========================================================
   RELATED
   ========================================================= */

.twl-svc-design-related__content {
  display: grid;

  gap: 4px;
}

.twl-svc-design-related__content small {
  color: var(--twl-svc-muted);

  font-size: 11px;
  font-weight: 400;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

  .twl-svc-design-hero-map,
  .twl-svc-design-flow {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr);

    justify-items: center;

    width: min(100%, 620px);

    height: auto;
    min-height: 0;

    margin:
      26px
      auto
      0;

    padding:
      42px
      34px;

    row-gap: 38px;
  }


  .twl-svc-design-hero-map
  .twl-svc-design-map__frame {
    inset: 0;
  }


  .twl-svc-design-stage,
  .twl-svc-design-flow-node,
  .twl-svc-design-flow-node.is-core {
    position: relative !important;

    inset: auto !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;

    margin: 0;

    justify-self: center;
  }


  .twl-svc-design-map__status {
    display: none;
  }


  .twl-svc-design-work__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .twl-svc-design-work__card,
  .twl-svc-design-work__card:nth-child(4),
  .twl-svc-design-work__card:nth-child(5) {
    grid-column: auto;
  }


  .twl-svc-design-process__list {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 32px 40px;
  }


  .twl-svc-design-process__step,
  .twl-svc-design-process__step:nth-child(n) {
    min-height: 100px;

    transform: none;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .twl-svc-design-included__layout {
    grid-template-columns:
      minmax(0, 1fr);

    gap: 48px;
  }


  .twl-svc-design-hero-map,
  .twl-svc-design-flow {
    width: 100%;

    padding:
      32px
      18px;

    row-gap: 32px;

    border-radius: 20px;
  }


  .twl-svc-design-stage {
    width: 132px;
  }


  .twl-svc-design-flow-node,
  .twl-svc-design-flow-node.is-core {
    min-width: 118px;
    max-width: 154px;

    min-height: 56px;

    padding: 9px 11px;
  }


  .twl-svc-design-process__list {
    grid-template-columns:
      minmax(0, 1fr);

    gap: 0;
  }


  .twl-svc-design-process__step,
  .twl-svc-design-process__step:nth-child(n) {
    min-height: 0;

    padding:
      22px
      0;

    border-top:
      1px solid
      rgba(151, 160, 255, 0.12);
  }


  .twl-svc-design-process__step strong {
    margin-top: 10px;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 560px) {

  .twl-svc-design-work__grid {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .twl-svc-design-tech {
    gap: 8px;
  }


  .twl-svc-design-tech > span {
    min-height: 40px;

    padding-inline: 13px;

    font-size: 11px;
  }

}
/* =========================================================
   UI / UX DESIGN — DESKTOP COMPOSITION PATCH

   1. Hero map:
      - больше воздуха от рамки
      - равномернее распределяем 4 стадии
      - немного компактнее canvas

   2. Process:
      - layout offset больше не использует transform
      - reveal animation больше не ломает композицию
   ========================================================= */


/* =========================================================
   DESIGN HERO — DESKTOP
   ========================================================= */

@media (min-width: 1025px) {

  /*
   * Карта больше не выходит за свою колонку.
   * На текущем варианте width: 108% + margin-left: -4%
   * визуально слишком растягивали сцену.
   */

  .twl-svc-design-hero-map {
    width: 100%;
    min-height: 540px;

    margin-left: 0;
  }


  /*
   * Чуть больше внутреннего пространства
   * относительно внешней рамки.
   */

  .twl-svc-design-map__frame {
    inset:
      5%
      4%
      5%;
  }


  /*
   * Карточки слегка увеличиваем —
   * визуальные preview читаются лучше.
   */

  .twl-svc-design-stage {
    width: 148px;

    padding: 12px;
  }


  /*
   * 01 — WIREFRAME
   */

  .twl-svc-design-hero-stage--wireframe {
    left: 7%;
    right: auto;

    top: 17%;
    bottom: auto;
  }


  /*
   * 02 — UI
   *
   * Опускаем относительно wireframe,
   * сохраняя характер эволюции.
   */

  .twl-svc-design-hero-stage--ui {
    left: 31%;
    right: auto;

    top: 43%;
    bottom: auto;
  }


  /*
   * 03 — COMPONENT
   */

  .twl-svc-design-hero-stage--component {
    left: 56%;
    right: auto;

    top: 17%;
    bottom: auto;
  }


  /*
   * 04 — FINAL
   *
   * Отодвигаем от правой рамки.
   */

  .twl-svc-design-hero-stage--final {
    left: auto;
    right: 7%;

    top: 43%;
    bottom: auto;
  }


  /*
   * Status остаётся отдельным техническим элементом,
   * но получает тот же внутренний левый отступ.
   */

  .twl-svc-design-hero-map
  .twl-svc-design-map__status {
    left: 7%;
    right: auto;

    top: auto;
    bottom: 7%;
  }

}


/* =========================================================
   DESIGN PROCESS — DESKTOP FIX
   ========================================================= */

@media (min-width: 1025px) {

  /*
   * Немного уменьшаем вертикальную пустоту именно
   * у этого раздела.
   */

  .twl-svc-design-process {
    padding-top: 104px;
    padding-bottom: 112px;
  }


  .twl-svc-design-process__list {
    align-items: start;

    gap:
      clamp(
        20px,
        2vw,
        32px
      );

    padding-bottom: 44px;
  }


  /*
   * ВАЖНО:
   *
   * Геометрическое смещение больше НЕ делаем
   * через transform.
   *
   * transform принадлежит reveal-анимации.
   * Для layout используем margin-top.
   */

  .twl-svc-design-process__step,
  .twl-svc-design-process__step:nth-child(n) {
    transform: none;

    margin-top: 0;

    min-height: 116px;

    padding-top: 18px;
  }


  .twl-svc-design-process__step:nth-child(2) {
    margin-top: 16px;
  }


  .twl-svc-design-process__step:nth-child(3) {
    margin-top: 32px;
  }


  .twl-svc-design-process__step:nth-child(4) {
    margin-top: 48px;
  }


  .twl-svc-design-process__step:nth-child(5) {
    margin-top: 32px;
  }


  .twl-svc-design-process__step:nth-child(6) {
    margin-top: 16px;
  }


  /*
   * Точка начала сегмента.
   */

  .twl-svc-design-process__step::before {
    content: "";

    position: absolute;

    left: 0;
    top: -3px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
      rgba(
        119,
        104,
        255,
        0.92
      );

    box-shadow:
      0
      0
      12px
      rgba(
        119,
        104,
        255,
        0.28
      );
  }


  .twl-svc-design-process__step > span {
    font-size: 8px;

    letter-spacing: 0.08em;
  }


  .twl-svc-design-process__step strong {
    max-width: 160px;

    margin-top: 20px;

    font-size: 13px;
    line-height: 1.42;
  }

}


/* =========================================================
   DESIGN PROCESS — TABLET RESET
   ========================================================= */

@media (max-width: 1024px) {

  /*
   * Desktop margin offsets обязательно сбрасываем.
   */

  .twl-svc-design-process__step,
  .twl-svc-design-process__step:nth-child(n) {
    margin-top: 0;
  }

}


/* =========================================================
   DESIGN PROCESS — MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .twl-svc-design-process {
    padding-top: 82px;
    padding-bottom: 88px;
  }


  .twl-svc-design-process__step::before {
    content: "";

    position: absolute;

    left: 0;
    top: -3px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
      rgba(
        119,
        104,
        255,
        0.86
      );
  }

}

/* =========================================================
   UI / UX DESIGN — COMPOSITION PATCH
   service-ui-ux-design.php
   ========================================================= */


/* =========================================================
   HERO — DESKTOP FINAL POSITIONS

   Screenshot target:

   Wireframe              Components

             Interface                Final
   ========================================================= */

@media (min-width: 1025px) {

  .twl-svc-design-hero-map {
    width: 100%;
    min-height: 540px;

    margin-left: 0;
  }


  .twl-svc-design-map__frame {
    inset: 5% 4% 5%;
  }


  /*
   * 01 — WIREFRAME
   */

  .twl-svc-design-hero-stage--wireframe {
    left: 7%;
    right: auto;

    top: 17%;
    bottom: auto;
  }


  /*
   * 02 — UI
   *
   * Положение непосредственно из
   * твоего скрина DevTools.
   */

  .twl-svc-design-hero-stage--ui {
    left: 31%;
    right: auto;

    top: 59%;
    bottom: auto;
  }


  /*
   * 03 — COMPONENT
   */

  .twl-svc-design-hero-stage--component {
    left: 56%;
    right: auto;

    top: 17%;
    bottom: auto;
  }


  /*
   * 04 — FINAL
   *
   * Положение непосредственно из
   * твоего скрина DevTools.
   */

  .twl-svc-design-hero-stage--final {
    left: auto;
    right: 10%;

    top: 59%;
    bottom: auto;
  }


  /*
   * Technical status
   */

  .twl-svc-design-hero-map
  .twl-svc-design-map__status {
    left: 7%;
    right: auto;

    top: auto;
    bottom: 6%;
  }

}


/* =========================================================
   DESIGN PROCESS
   SAME VISUAL SYSTEM AS API PAGE
   ========================================================= */

.twl-svc-design-process {
  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #080a18,
      #050711
    );
}


/*
 * Используем API-компонент,
 * но расширяем сетку с 5 до 7 этапов.
 */

.twl-svc-design-process
.twl-svc-process__list {
  grid-template-columns:
    repeat(
      7,
      minmax(0, 1fr)
    );

  gap:
    clamp(
      22px,
      2.6vw,
      44px
    );

  padding:
    28px
    0
    70px;
}


/*
 * Убираем старую ступенчатую геометрию.
 *
 * На API сейчас этапы визуально находятся
 * на одной горизонтальной оси —
 * именно это повторяем здесь.
 */

.twl-svc-design-process
.twl-svc-process__step,
.twl-svc-design-process
.twl-svc-process__step:nth-child(n) {
  transform: none;

  margin: 0;

  min-height: 178px;

  padding-top: 24px;
}


/*
 * Для 7 колонок номер немного компактнее,
 * чем в 5-шаговом API-блоке.
 */

.twl-svc-design-process
.twl-svc-process__step > span {
  color:
    rgba(
      199,
      205,
      255,
      0.78
    );

  font-size:
    clamp(
      30px,
      2.8vw,
      44px
    );

  font-weight: 500;
  line-height: 1;
}


/*
 * Текст тоже чуть компактнее,
 * чтобы длинные шаги не ломали ритм.
 */

.twl-svc-design-process
.twl-svc-process__step > strong {
  max-width: 170px;

  margin-top: 0;

  color: #ffffff;

  font-size:
    clamp(
      16px,
      1.3vw,
      21px
    );

  font-weight: 600;

  line-height: 1.28;

  letter-spacing: -0.025em;
}


/*
 * Точки на общей линии —
 * полностью в стиле API component.
 */

.twl-svc-design-process
.twl-svc-process__step::before {
  top: -3px;

  width: 7px;
  height: 7px;

  background:
    var(--twl-svc-violet);

  box-shadow:
    0
    0
    12px
    rgba(
      119,
      104,
      255,
      0.26
    );
}


/* =========================================================
   DESIGN PROCESS — TABLET
   ========================================================= */

@media (max-width: 1024px) {

  .twl-svc-design-process
  .twl-svc-process__list {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );

    gap:
      46px
      36px;

    padding-bottom: 20px;
  }


  /*
   * На нескольких рядах одна общая линия
   * больше не имеет смысла.
   */

  .twl-svc-design-process
  .twl-svc-process__list::before {
    display: none;
  }


  .twl-svc-design-process
  .twl-svc-process__step,
  .twl-svc-design-process
  .twl-svc-process__step:nth-child(n) {
    min-height: 138px;

    padding-top: 18px;

    border-top:
      1px solid
      rgba(
        151,
        160,
        255,
        0.16
      );
  }


  .twl-svc-design-process
  .twl-svc-process__step > span {
    font-size:
      clamp(
        30px,
        5vw,
        42px
      );
  }


  .twl-svc-design-process
  .twl-svc-process__step > strong {
    max-width: 190px;

    font-size:
      18px;
  }

}


/* =========================================================
   DESIGN PROCESS — MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .twl-svc-design-process
  .twl-svc-process__list {
    grid-template-columns:
      minmax(
        0,
        1fr
      );

    gap: 0;

    padding-bottom: 0;
  }


  .twl-svc-design-process
  .twl-svc-process__step,
  .twl-svc-design-process
  .twl-svc-process__step:nth-child(n) {
    display: grid;

    grid-template-columns:
      58px
      minmax(
        0,
        1fr
      );

    gap: 20px;

    align-items: center;

    min-height: 0;

    padding:
      24px
      0;
  }


  .twl-svc-design-process
  .twl-svc-process__step > span {
    font-size: 28px;
  }


  .twl-svc-design-process
  .twl-svc-process__step > strong {
    margin: 0;

    max-width: none;

    font-size: 17px;
  }

}

/* =========================================================
   SERVICE — BUSINESS TELEPHONY
   Template: service-business-telephony.php
   ========================================================= */


/* =========================================================
   HERO / ROUTE MAP COMMON
   ========================================================= */

.twl-svc-tel-hero-map,
.twl-svc-tel-route-map {
  position: relative;

  overflow: hidden;
  overflow-anchor: none;
}


.twl-svc-tel-hero-map {
  width: 100%;

  min-height: 550px;

  margin-left: 0;
}


.twl-svc-tel-map__frame {
  position: absolute;

  inset: 5% 4%;

  border:
    1px solid
    rgba(151, 160, 255, 0.17);

  border-radius: 28px;

  background:
    radial-gradient(
      circle at 55% 48%,
      rgba(119, 104, 255, 0.10),
      transparent 43%
    ),
    linear-gradient(
      145deg,
      rgba(12, 15, 31, 0.96),
      rgba(6, 8, 19, 0.99)
    );
}


.twl-svc-tel-map__grid {
  position: absolute;

  inset: 0;

  opacity: 0.17;

  background-image:
    linear-gradient(
      rgba(151, 160, 255, 0.04) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(151, 160, 255, 0.04) 1px,
      transparent 1px
    );

  background-size:
    50px
    50px;

  -webkit-mask-image:
    radial-gradient(
      circle at 54% 48%,
      #000,
      transparent 75%
    );

  mask-image:
    radial-gradient(
      circle at 54% 48%,
      #000,
      transparent 75%
    );

  pointer-events: none;
}


.twl-svc-tel-map__glow {
  position: absolute;

  left: 55%;
  top: 50%;

  width: 520px;
  height: 300px;

  transform:
    translate(
      -50%,
      -50%
    );

  border-radius: 50%;

  background:
    rgba(119, 104, 255, 0.065);

  filter:
    blur(110px);

  pointer-events: none;
}


/* =========================================================
   CONNECTIONS
   ========================================================= */

.twl-svc-tel-map__links {
  position: absolute;

  inset: 0;

  z-index: 1;

  width: 100%;
  height: 100%;

  overflow: hidden;

  opacity: 0;

  pointer-events: none;

  transition:
    opacity
    180ms
    ease;
}


.twl-svc-tel-hero-map.is-links-ready
.twl-svc-tel-map__links,
.twl-svc-tel-route-map.is-links-ready
.twl-svc-tel-map__links {
  opacity: 1;
}


.twl-svc-tel-map__link {
  fill: none;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect:
    non-scaling-stroke;
}


.twl-svc-tel-map__link--primary {
  stroke:
    rgba(
      164,
      154,
      255,
      0.86
    );

  stroke-width:
    1.5;

  filter:
    drop-shadow(
      0
      0
      5px
      rgba(
        119,
        104,
        255,
        0.14
      )
    );
}


.twl-svc-tel-map__link--secondary {
  stroke:
    rgba(
      105,
      116,
      165,
      0.46
    );

  stroke-width:
    1.1;
}


/* =========================================================
   NODE
   ========================================================= */

.twl-svc-tel-node {
  position: absolute;

  z-index: 2;

  width: max-content;

  min-width: 132px;
  max-width: 172px;
  min-height: 66px;

  padding:
    10px
    12px;

  border:
    1px solid
    rgba(
      151,
      160,
      255,
      0.19
    );

  border-radius:
    12px;

  background:
    rgba(
      8,
      11,
      25,
      0.97
    );
}


.twl-svc-tel-node::after {
  content: "";

  position: absolute;

  top: 10px;
  right: 10px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    rgba(
      100,
      115,
      255,
      0.92
    );

  box-shadow:
    0
    0
    10px
    rgba(
      100,
      115,
      255,
      0.34
    );
}


.twl-svc-tel-node span,
.twl-svc-tel-node small {
  display: block;

  color:
    var(--twl-svc-muted);

  font:
    500
    7px/1.35
    "IBM Plex Mono",
    monospace;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.twl-svc-tel-node strong {
  display: block;

  margin:
    5px
    0
    3px;

  color:
    var(--twl-svc-text);

  font-size:
    12px;

  font-weight:
    600;

  line-height:
    1.2;
}


.twl-svc-tel-node.is-core {
  min-width: 150px;

  border-color:
    rgba(
      151,
      140,
      255,
      0.58
    );

  background:
    linear-gradient(
      145deg,
      rgba(26, 29, 59, 0.99),
      rgba(11, 14, 31, 0.99)
    );
}


/* =========================================================
   STATUS
   ========================================================= */

.twl-svc-tel-map__status {
  position: absolute;

  z-index: 2;

  left: 7%;
  bottom: 7%;

  padding:
    10px
    12px;

  border:
    1px solid
    rgba(151, 160, 255, 0.12);

  border-radius:
    9px;

  background:
    rgba(
      7,
      9,
      22,
      0.93
    );
}


.twl-svc-tel-map__status span {
  display: block;

  color:
    var(--twl-svc-muted);

  font:
    500
    8px/1.35
    "IBM Plex Mono",
    monospace;
}


.twl-svc-tel-map__status strong {
  color:
    var(--twl-svc-secondary);

  font-size:
    10px;

  font-weight:
    600;
}


.twl-svc-tel-map__status i {
  display: inline-block;

  width: 5px;
  height: 5px;

  margin-left: 5px;

  border-radius: 50%;

  background:
    var(--twl-svc-blue);
}


/* =========================================================
   HERO POSITIONS — DESKTOP
   ========================================================= */

@media (min-width: 1025px) {

  .twl-svc-tel-hero-node--number {
    left: 6%;
    top: 16%;
  }


  .twl-svc-tel-hero-node--pbx {
    left: 32%;
    top: 16%;
  }


  .twl-svc-tel-hero-node--schedule {
    left: 58%;
    top: 16%;
  }


  .twl-svc-tel-hero-node--queue {
    right: 6%;
    top: 38%;
  }


  .twl-svc-tel-hero-node--manager {
    right: 11%;
    bottom: 14%;
  }


  .twl-svc-tel-hero-node--crm {
    left: 48%;
    bottom: 14%;
  }

}


/* =========================================================
   SCENARIOS
   ========================================================= */

.twl-svc-tel-scenario__code {
  display: block;

  margin-bottom: 7px;

  color:
    rgba(
      187,
      194,
      255,
      0.45
    );

  font-size:
    7px;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


/* =========================================================
   WORK — 3 + 2
   ========================================================= */

.twl-svc-tel-work__grid {
  display: grid;

  grid-template-columns:
    repeat(
      6,
      minmax(0, 1fr)
    );

  gap:
    clamp(
      16px,
      1.7vw,
      22px
    );
}


.twl-svc-tel-work__card {
  grid-column:
    span 2;

  min-height:
    220px;
}


.twl-svc-tel-work__card:nth-child(4),
.twl-svc-tel-work__card:nth-child(5) {
  grid-column:
    span 3;
}


.twl-svc-tel-work__meta {
  display: flex;

  justify-content:
    space-between;

  gap: 14px;

  margin-bottom: 38px;
}


.twl-svc-tel-work__meta span,
.twl-svc-tel-work__meta small {
  color:
    rgba(
      187,
      194,
      255,
      0.50
    );

  font-size:
    8px;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


/* =========================================================
   INCLUDED
   ========================================================= */

.twl-svc-tel-included__layout {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    clamp(
      28px,
      5vw,
      72px
    );
}


.twl-svc-tel-included__group {
  min-width: 0;
}


.twl-svc-tel-included__head {
  padding-bottom: 22px;

  border-bottom:
    1px solid
    var(--twl-svc-border-soft);
}


.twl-svc-tel-included__head span {
  color:
    rgba(
      187,
      194,
      255,
      0.48
    );

  font-size:
    8px;
}


.twl-svc-tel-included__head h3 {
  margin:
    8px
    0
    0;

  color:
    var(--twl-svc-text);

  font-size:
    clamp(
      20px,
      1.8vw,
      27px
    );

  font-weight:
    600;
}


.twl-svc-tel-included__list {
  list-style: none;

  margin: 0;
  padding: 0;
}


.twl-svc-tel-included__list li {
  display: grid;

  grid-template-columns:
    34px
    minmax(0, 1fr);

  gap: 14px;

  align-items: center;

  min-height: 61px;

  border-bottom:
    1px solid
    var(--twl-svc-border-soft);
}


.twl-svc-tel-included__list li > span {
  color:
    rgba(
      187,
      194,
      255,
      0.40
    );

  font-size:
    8px;
}


.twl-svc-tel-included__list strong {
  color:
    var(--twl-svc-secondary);

  font-size:
    14px;

  font-weight:
    500;
}


/* =========================================================
   PROCESS — 7 STEP ROUTE
   ========================================================= */

.twl-svc-tel-process
.twl-svc-process__list {
  grid-template-columns:
    repeat(
      7,
      minmax(0, 1fr)
    );

  gap:
    clamp(
      22px,
      2.5vw,
      42px
    );
}


.twl-svc-tel-process
.twl-svc-process__step,
.twl-svc-tel-process
.twl-svc-process__step:nth-child(n) {
  transform: none;

  margin-top: 0;
}


@media (min-width: 1025px) {

  .twl-svc-tel-process
  .twl-svc-process__step:nth-child(2) {
    margin-top: 12px;
  }

  .twl-svc-tel-process
  .twl-svc-process__step:nth-child(3) {
    margin-top: 24px;
  }

  .twl-svc-tel-process
  .twl-svc-process__step:nth-child(4) {
    margin-top: 36px;
  }

  .twl-svc-tel-process
  .twl-svc-process__step:nth-child(5) {
    margin-top: 24px;
  }

  .twl-svc-tel-process
  .twl-svc-process__step:nth-child(6) {
    margin-top: 12px;
  }

}


/* =========================================================
   ROUTE MAP
   ========================================================= */

.twl-svc-tel-route-map {
  height: 500px;
  min-height: 500px;

  border:
    1px solid
    var(--twl-svc-border);

  border-radius:
    28px;

  background:
    radial-gradient(
      circle at 54% 48%,
      rgba(119, 104, 255, 0.085),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      rgba(11, 14, 30, 0.97),
      rgba(6, 8, 18, 0.99)
    );
}


@media (min-width: 1025px) {

  .twl-svc-tel-route-node--client {
    left: 3%;
    top: 36%;
  }


  .twl-svc-tel-route-node--number {
    left: 15%;
    top: 15%;
  }


  .twl-svc-tel-route-node--pbx {
    left: 28%;
    top: 36%;
  }


  .twl-svc-tel-route-node--schedule {
    left: 42%;
    top: 15%;
  }


  .twl-svc-tel-route-node--queue {
    left: 57%;
    top: 36%;
  }


  .twl-svc-tel-route-node--employee {
    left: 71%;
    top: 15%;
  }


  .twl-svc-tel-route-node--crm {
    right: 4%;
    top: 36%;
  }


  .twl-svc-tel-route-node--result {
    right: 4%;
    bottom: 7%;
  }


  .twl-svc-tel-route-node--offhours {
    left: 43%;
    bottom: 7%;
  }


  .twl-svc-tel-route-node--fallback {
    left: 60%;
    bottom: 7%;
  }


  .twl-svc-tel-route-map
  .twl-svc-tel-map__status {
    left: 3%;
    bottom: 6%;
  }

}


/* =========================================================
   TECHNOLOGIES
   ========================================================= */

.twl-svc-tel-tech {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;
}


.twl-svc-tel-tech > span {
  display: inline-flex;

  align-items: center;

  min-height: 43px;

  padding:
    0
    16px;

  border:
    1px solid
    rgba(
      151,
      160,
      255,
      0.14
    );

  border-radius: 12px;

  color:
    var(--twl-svc-secondary);

  background:
    rgba(
      10,
      13,
      29,
      0.68
    );

  font-size: 12px;

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease;
}


.twl-svc-tel-tech > span:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(
      151,
      140,
      255,
      0.44
    );

  color:
    var(--twl-svc-text);

  background:
    rgba(
      20,
      23,
      48,
      0.82
    );
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

  .twl-svc-tel-work__grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .twl-svc-tel-work__card,
  .twl-svc-tel-work__card:nth-child(4),
  .twl-svc-tel-work__card:nth-child(5) {
    grid-column: auto;
  }


  .twl-svc-tel-hero-map,
  .twl-svc-tel-route-map {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr);

    justify-items: center;

    width:
      min(
        100%,
        620px
      );

    height: auto;
    min-height: 0;

    margin:
      26px
      auto
      0;

    padding:
      42px
      34px;

    row-gap:
      38px;
  }


  .twl-svc-tel-hero-map
  .twl-svc-tel-map__frame {
    inset: 0;
  }


  .twl-svc-tel-node,
  .twl-svc-tel-node.is-core {
    position: relative !important;

    inset: auto !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;

    margin: 0;

    justify-self: center;
  }


  .twl-svc-tel-map__status {
    display: none;
  }


  .twl-svc-tel-process
  .twl-svc-process__list {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }


  .twl-svc-tel-process
  .twl-svc-process__step,
  .twl-svc-tel-process
  .twl-svc-process__step:nth-child(n) {
    margin-top: 0;
  }


  .twl-svc-tel-included__layout {
    gap: 42px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .twl-svc-tel-included__layout {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .twl-svc-tel-hero-map,
  .twl-svc-tel-route-map {
    width: 100%;

    padding:
      32px
      18px;

    row-gap: 32px;

    border-radius: 20px;
  }


  .twl-svc-tel-node,
  .twl-svc-tel-node.is-core {
    min-width: 112px;
    max-width: 154px;

    min-height: 56px;

    padding:
      9px
      11px;
  }


  .twl-svc-tel-process
  .twl-svc-process__list {
    grid-template-columns:
      minmax(0, 1fr);
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 560px) {

  .twl-svc-tel-work__grid {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .twl-svc-tel-tech {
    gap: 8px;
  }


  .twl-svc-tel-tech > span {
    min-height: 40px;

    padding-inline: 13px;

    font-size: 11px;
  }

}
/* =========================================================
   BUSINESS TELEPHONY — HERO DESKTOP POSITION UPDATE
   Values synced with DevTools screenshots
   ========================================================= */

@media (min-width: 1025px) {

  /* 01 — NUMBER */

  .twl-svc-tel-hero-node--number {
    left: 6%;
    right: auto;

    top: 16%;
    bottom: auto;
  }


  /* 02 — PBX */

  .twl-svc-tel-hero-node--pbx {
    left: 40%;
    right: auto;

    top: 16%;
    bottom: auto;
  }


  /* 03 — SCHEDULE */

  .twl-svc-tel-hero-node--schedule {
    left: 71%;
    right: auto;

    top: 16%;
    bottom: auto;
  }


  /* 04 — QUEUE */

  .twl-svc-tel-hero-node--queue {
    left: auto;
    right: 6%;

    top: 46%;
    bottom: auto;
  }


  /* 05 — MANAGER */

  .twl-svc-tel-hero-node--manager {
    left: auto;
    right: 23%;

    top: auto;
    bottom: 14%;
  }


  /* 06 — CRM */

  .twl-svc-tel-hero-node--crm {
    left: 23%;
    right: auto;

    top: auto;
    bottom: 14%;
  }

}
/* =========================================================
   SERVICE — IT INFRASTRUCTURE
   Template: service-it-infrastructure.php
   ========================================================= */


/* =========================================================
   COMMON MAP
   ========================================================= */

.twl-svc-infra-hero-map,
.twl-svc-infra-dependencies {
  position: relative;

  overflow: hidden;
  overflow-anchor: none;
}


.twl-svc-infra-hero-map {
  width: 100%;
  min-height: 550px;

  margin-left: 0;
}


.twl-svc-infra-map__frame {
  position: absolute;

  inset: 5% 4%;

  border:
    1px solid
    rgba(151, 160, 255, 0.18);

  border-radius: 26px;

  background:
    radial-gradient(
      circle at 54% 48%,
      rgba(119, 104, 255, 0.095),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(10, 13, 29, 0.98),
      rgba(5, 7, 17, 0.99)
    );
}


.twl-svc-infra-map__grid {
  position: absolute;

  inset: 0;

  opacity: 0.18;

  background-image:
    linear-gradient(
      rgba(151, 160, 255, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(151, 160, 255, 0.045) 1px,
      transparent 1px
    );

  background-size:
    46px
    46px;

  -webkit-mask-image:
    radial-gradient(
      circle at 52% 48%,
      #000,
      transparent 75%
    );

  mask-image:
    radial-gradient(
      circle at 52% 48%,
      #000,
      transparent 75%
    );

  pointer-events: none;
}


.twl-svc-infra-map__glow {
  position: absolute;

  left: 53%;
  top: 50%;

  width: 520px;
  height: 300px;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    rgba(119, 104, 255, 0.06);

  filter:
    blur(110px);

  pointer-events: none;
}


/* =========================================================
   LINKS
   ========================================================= */

.twl-svc-infra-map__links {
  position: absolute;

  inset: 0;

  z-index: 1;

  width: 100%;
  height: 100%;

  overflow: hidden;

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 180ms ease;
}


.twl-svc-infra-hero-map.is-links-ready
.twl-svc-infra-map__links,
.twl-svc-infra-dependencies.is-links-ready
.twl-svc-infra-map__links {
  opacity: 1;
}


.twl-svc-infra-map__link {
  fill: none;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect:
    non-scaling-stroke;
}


.twl-svc-infra-map__link--primary {
  stroke:
    rgba(164, 154, 255, 0.86);

  stroke-width:
    1.5;

  filter:
    drop-shadow(
      0 0 5px rgba(119, 104, 255, 0.14)
    );
}


.twl-svc-infra-map__link--secondary {
  stroke:
    rgba(105, 116, 165, 0.46);

  stroke-width:
    1.1;
}


/* =========================================================
   NODE
   ========================================================= */

.twl-svc-infra-node {
  position: absolute;

  z-index: 2;

  width: max-content;

  min-width: 132px;
  max-width: 176px;
  min-height: 66px;

  padding:
    10px
    12px;

  border:
    1px solid
    rgba(151, 160, 255, 0.19);

  border-radius:
    11px;

  background:
    rgba(7, 10, 23, 0.98);

  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.09);
}


.twl-svc-infra-node::after {
  content: "";

  position: absolute;

  top: 10px;
  right: 10px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    rgba(100, 115, 255, 0.92);

  box-shadow:
    0 0 10px rgba(100, 115, 255, 0.34);
}


.twl-svc-infra-node span,
.twl-svc-infra-node small {
  display: block;

  color:
    var(--twl-svc-muted);

  font:
    500 7px/1.35
    "IBM Plex Mono",
    monospace;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.twl-svc-infra-node strong {
  display: block;

  margin:
    5px
    0
    3px;

  color:
    var(--twl-svc-text);

  font-size:
    12px;

  font-weight:
    600;

  line-height:
    1.2;
}


.twl-svc-infra-node.is-core {
  min-width: 150px;

  border-color:
    rgba(151, 140, 255, 0.60);

  background:
    linear-gradient(
      145deg,
      rgba(24, 27, 55, 0.99),
      rgba(9, 12, 28, 0.99)
    );

  box-shadow:
    0 18px 54px rgba(83, 73, 186, 0.15);
}


/* =========================================================
   MAP STATUS
   ========================================================= */

.twl-svc-infra-map__status {
  position: absolute;

  z-index: 2;

  left: 7%;
  bottom: 7%;

  padding:
    10px
    12px;

  border:
    1px solid
    rgba(151, 160, 255, 0.12);

  border-radius:
    9px;

  background:
    rgba(7, 9, 22, 0.94);
}


.twl-svc-infra-map__status span {
  display: block;

  color:
    var(--twl-svc-muted);

  font:
    500 8px/1.35
    "IBM Plex Mono",
    monospace;
}


.twl-svc-infra-map__status strong {
  color:
    var(--twl-svc-secondary);

  font-size: 10px;
  font-weight: 600;
}


.twl-svc-infra-map__status i {
  display: inline-block;

  width: 5px;
  height: 5px;

  margin-left: 5px;

  border-radius: 50%;

  background:
    var(--twl-svc-blue);
}


/* =========================================================
   HERO — DESKTOP
   ========================================================= */

@media (min-width: 1025px) {

  .twl-svc-infra-hero-node--network {
    left: 6%;
    top: 16%;
  }


  .twl-svc-infra-hero-node--gateway {
    left: 37%;
    top: 16%;
  }


  .twl-svc-infra-hero-node--virtualization {
    left: 68%;
    top: 16%;
  }


  .twl-svc-infra-hero-node--servers {
    right: 6%;
    top: 45%;
  }


  .twl-svc-infra-hero-node--data {
    right: 24%;
    bottom: 14%;
  }


  .twl-svc-infra-hero-node--backup {
    left: 43%;
    bottom: 14%;
  }


  .twl-svc-infra-hero-node--users {
    left: 15%;
    bottom: 14%;
  }

}


/* =========================================================
   SCENARIOS
   ========================================================= */

.twl-svc-infra-scenario__code {
  display: block;

  margin-bottom: 7px;

  color:
    rgba(187, 194, 255, 0.44);

  font-size: 7px;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


/* =========================================================
   WORK — 3 × 2
   ========================================================= */

.twl-svc-infra-work__grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    clamp(16px, 1.7vw, 22px);
}


.twl-svc-infra-work__card {
  min-height: 225px;
}


.twl-svc-infra-work__meta {
  display: flex;

  justify-content:
    space-between;

  gap: 14px;

  margin-bottom: 38px;
}


.twl-svc-infra-work__meta span,
.twl-svc-infra-work__meta small {
  color:
    rgba(187, 194, 255, 0.50);

  font-size: 8px;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


/* =========================================================
   INCLUDED — LAYERS
   ========================================================= */

.twl-svc-infra-included__layout {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    clamp(22px, 3vw, 44px);
}


.twl-svc-infra-included__group {
  min-width: 0;

  padding:
    26px
    28px;

  border:
    1px solid
    rgba(151, 160, 255, 0.13);

  border-radius:
    22px;

  background:
    linear-gradient(
      145deg,
      rgba(11, 14, 30, 0.72),
      rgba(6, 8, 18, 0.60)
    );
}


.twl-svc-infra-included__head {
  min-height: 78px;

  padding-bottom: 20px;

  border-bottom:
    1px solid
    var(--twl-svc-border-soft);
}


.twl-svc-infra-included__head span {
  color:
    rgba(187, 194, 255, 0.44);

  font-size: 8px;
}


.twl-svc-infra-included__head h3 {
  margin:
    8px
    0
    0;

  color:
    var(--twl-svc-text);

  font-size:
    clamp(19px, 1.5vw, 24px);

  font-weight: 600;
}


.twl-svc-infra-included__list {
  list-style: none;

  margin: 0;
  padding: 0;
}


.twl-svc-infra-included__list li {
  display: grid;

  grid-template-columns:
    32px
    minmax(0, 1fr);

  gap: 12px;

  align-items: center;

  min-height: 62px;

  border-bottom:
    1px solid
    var(--twl-svc-border-soft);
}


.twl-svc-infra-included__list li:last-child {
  border-bottom: 0;
}


.twl-svc-infra-included__list li > span {
  color:
    rgba(187, 194, 255, 0.38);

  font-size: 8px;
}


.twl-svc-infra-included__list strong {
  color:
    var(--twl-svc-secondary);

  font-size: 13px;
  font-weight: 500;
}


/* =========================================================
   PROCESS — 7 STEPS
   ========================================================= */

.twl-svc-infra-process
.twl-svc-process__list {
  grid-template-columns:
    repeat(7, minmax(0, 1fr));

  gap:
    clamp(20px, 2.3vw, 38px);
}


.twl-svc-infra-process
.twl-svc-process__step,
.twl-svc-infra-process
.twl-svc-process__step:nth-child(n) {
  transform: none;

  margin-top: 0;
}


.twl-svc-infra-process
.twl-svc-process__step.is-migration {
  position: relative;

  border-top-color:
    rgba(151, 140, 255, 0.62);
}


.twl-svc-infra-process
.twl-svc-process__step.is-migration::before {
  box-shadow:
    0 0 18px rgba(119, 104, 255, 0.42);
}


.twl-svc-infra-process
.twl-svc-process__step.is-migration small {
  display: block;

  margin-top: 12px;

  color:
    rgba(187, 194, 255, 0.48);

  font-size: 7px;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;
}


/* =========================================================
   OPERATIONAL METRICS
   ========================================================= */

.twl-svc-infra-metric strong {
  letter-spacing:
    -0.045em;
}


.twl-svc-infra-metric:nth-child(2) strong,
.twl-svc-infra-metric:nth-child(4) strong {
  font-size:
    clamp(29px, 3vw, 46px);
}


/* =========================================================
   DEPENDENCY MAP
   ========================================================= */

.twl-svc-infra-dependencies {
  height: 500px;
  min-height: 500px;

  border:
    1px solid
    var(--twl-svc-border);

  border-radius: 28px;

  background:
    radial-gradient(
      circle at 53% 48%,
      rgba(119, 104, 255, 0.085),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      rgba(10, 13, 28, 0.98),
      rgba(5, 7, 17, 0.99)
    );
}


@media (min-width: 1025px) {

  .twl-svc-infra-dependency-node--internet {
    left: 3%;
    top: 38%;
  }


  .twl-svc-infra-dependency-node--network {
    left: 16%;
    top: 16%;
  }


  .twl-svc-infra-dependency-node--gateway {
    left: 30%;
    top: 38%;
  }


  .twl-svc-infra-dependency-node--virtualization {
    left: 44%;
    top: 16%;
  }


  .twl-svc-infra-dependency-node--servers {
    left: 59%;
    top: 38%;
  }


  .twl-svc-infra-dependency-node--data {
    left: 74%;
    top: 16%;
  }


  .twl-svc-infra-dependency-node--backup {
    right: 3%;
    top: 38%;
  }


  .twl-svc-infra-dependency-node--users {
    left: 59%;
    bottom: 7%;
  }


  .twl-svc-infra-dependencies
  .twl-svc-infra-map__status {
    left: 3%;
    bottom: 6%;
  }

}


/* =========================================================
   TECHNOLOGIES
   ========================================================= */

.twl-svc-infra-tech {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;
}


.twl-svc-infra-tech > span {
  display: inline-flex;

  align-items: center;

  min-height: 43px;

  padding:
    0
    16px;

  border:
    1px solid
    rgba(151, 160, 255, 0.14);

  border-radius: 11px;

  color:
    var(--twl-svc-secondary);

  background:
    rgba(10, 13, 29, 0.68);

  font-size: 12px;

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease;
}


.twl-svc-infra-tech > span:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(151, 140, 255, 0.44);

  color:
    var(--twl-svc-text);

  background:
    rgba(20, 23, 48, 0.82);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

  .twl-svc-infra-work__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .twl-svc-infra-included__layout {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .twl-svc-infra-included__group:last-child {
    grid-column:
      1 / -1;
  }


  .twl-svc-infra-hero-map,
  .twl-svc-infra-dependencies {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr);

    justify-items: center;

    width:
      min(100%, 620px);

    height: auto;
    min-height: 0;

    margin:
      26px
      auto
      0;

    padding:
      42px
      34px;

    row-gap: 38px;
  }


  .twl-svc-infra-hero-map
  .twl-svc-infra-map__frame {
    inset: 0;
  }


  .twl-svc-infra-node,
  .twl-svc-infra-node.is-core {
    position: relative !important;

    inset: auto !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;

    margin: 0;

    justify-self: center;
  }


  .twl-svc-infra-map__status {
    display: none;
  }


  .twl-svc-infra-process
  .twl-svc-process__list {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .twl-svc-infra-work__grid,
  .twl-svc-infra-included__layout {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .twl-svc-infra-included__group:last-child {
    grid-column: auto;
  }


  .twl-svc-infra-hero-map,
  .twl-svc-infra-dependencies {
    width: 100%;

    padding:
      32px
      18px;

    row-gap: 32px;

    border-radius: 20px;
  }


  .twl-svc-infra-node,
  .twl-svc-infra-node.is-core {
    min-width: 114px;
    max-width: 158px;

    min-height: 56px;

    padding:
      9px
      11px;
  }


  .twl-svc-infra-process
  .twl-svc-process__list {
    grid-template-columns:
      minmax(0, 1fr);
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 560px) {

  .twl-svc-infra-tech {
    gap: 8px;
  }


  .twl-svc-infra-tech > span {
    min-height: 40px;

    padding-inline: 13px;

    font-size: 11px;
  }

}

/* =========================================================
   IT INFRASTRUCTURE — DESKTOP NODE POSITION UPDATE
   Values synced with DevTools screenshots
   ========================================================= */

@media (min-width: 1025px) {

  /* =======================================================
     HERO
     ======================================================= */

  /* 06 — BACKUP */

  .twl-svc-infra-hero-node--backup {
    left: 28%;
    right: auto;

    top: auto;
    bottom: 22%;
  }


  /* 07 — USERS */

  .twl-svc-infra-hero-node--users {
    left: 8%;
    right: auto;

    top: auto;
    bottom: 41%;
  }


  /* =======================================================
     DEPENDENCY MAP
     ======================================================= */

  /* 01 — INTERNET */

  .twl-svc-infra-dependency-node--internet {
    left: 3%;
    right: auto;

    top: 16%;
    bottom: auto;
  }


  /* 04 — VIRTUALIZATION / CLOUD */

  .twl-svc-infra-dependency-node--virtualization {
    left: 44%;
    right: auto;

    top: 32%;
    bottom: auto;
  }


  /* 05 — SERVERS */

  .twl-svc-infra-dependency-node--servers {
    left: 59%;
    right: auto;

    top: 16%;
    bottom: auto;
  }

}
/* =========================================================
   SERVICE — INFORMATION SECURITY
   Template: service-information-security.php
   ========================================================= */

.twl-svc--security {
  --twl-sec-warning: #c7a56a;
  --twl-sec-warning-soft: rgba(199, 165, 106, 0.16);
  --twl-sec-warning-border: rgba(199, 165, 106, 0.36);
}


/* =========================================================
   MAP — COMMON
   ========================================================= */

.twl-svc-sec-hero-map,
.twl-svc-sec-risk-map {
  position: relative;

  overflow: hidden;
  overflow-anchor: none;
}


.twl-svc-sec-hero-map {
  width: 100%;
  min-height: 550px;

  margin-left: 0;
}


.twl-svc-sec-map__frame {
  position: absolute;

  inset: 5% 4%;

  border:
    1px solid
    rgba(151, 160, 255, 0.17);

  border-radius: 26px;

  background:
    radial-gradient(
      circle at 53% 48%,
      rgba(119, 104, 255, 0.075),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(10, 13, 28, 0.98),
      rgba(5, 7, 17, 0.99)
    );
}


.twl-svc-sec-map__grid {
  position: absolute;

  inset: 0;

  opacity: 0.15;

  background-image:
    linear-gradient(
      rgba(151, 160, 255, 0.04) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(151, 160, 255, 0.04) 1px,
      transparent 1px
    );

  background-size:
    48px
    48px;

  -webkit-mask-image:
    radial-gradient(
      circle at 52% 48%,
      #000,
      transparent 74%
    );

  mask-image:
    radial-gradient(
      circle at 52% 48%,
      #000,
      transparent 74%
    );

  pointer-events: none;
}


.twl-svc-sec-map__glow {
  position: absolute;

  left: 53%;
  top: 49%;

  width: 500px;
  height: 290px;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    rgba(119, 104, 255, 0.055);

  filter:
    blur(110px);

  pointer-events: none;
}


/* =========================================================
   CONNECTIONS
   ========================================================= */

.twl-svc-sec-map__links {
  position: absolute;

  inset: 0;

  z-index: 1;

  width: 100%;
  height: 100%;

  overflow: hidden;

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 180ms ease;
}


.twl-svc-sec-hero-map.is-links-ready
.twl-svc-sec-map__links,
.twl-svc-sec-risk-map.is-links-ready
.twl-svc-sec-map__links {
  opacity: 1;
}


.twl-svc-sec-map__link {
  fill: none;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect:
    non-scaling-stroke;
}


.twl-svc-sec-map__link--primary {
  stroke:
    rgba(164, 154, 255, 0.82);

  stroke-width:
    1.45;
}


.twl-svc-sec-map__link--secondary {
  stroke:
    rgba(105, 116, 165, 0.44);

  stroke-width:
    1.1;
}


/* =========================================================
   NODE
   ========================================================= */

.twl-svc-sec-node {
  position: absolute;

  z-index: 2;

  width: max-content;

  min-width: 134px;
  max-width: 190px;
  min-height: 66px;

  padding:
    10px
    12px;

  border:
    1px solid
    rgba(151, 160, 255, 0.18);

  border-radius: 11px;

  background:
    rgba(7, 10, 23, 0.985);
}


.twl-svc-sec-node::after {
  content: "";

  position: absolute;

  top: 10px;
  right: 10px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    rgba(100, 115, 255, 0.90);
}


.twl-svc-sec-node span,
.twl-svc-sec-node small {
  display: block;

  color:
    var(--twl-svc-muted);

  font:
    500 7px/1.35
    "IBM Plex Mono",
    monospace;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.twl-svc-sec-node strong {
  display: block;

  margin:
    5px
    0
    3px;

  color:
    var(--twl-svc-text);

  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}


.twl-svc-sec-node.is-core {
  min-width: 154px;

  border-color:
    rgba(151, 140, 255, 0.55);

  background:
    linear-gradient(
      145deg,
      rgba(23, 26, 53, 0.99),
      rgba(9, 12, 28, 0.99)
    );
}


/*
 * Warning — только дополнительный status accent.
 */

.twl-svc-sec-node.is-warning {
  border-color:
    var(--twl-sec-warning-border);
}


.twl-svc-sec-node.is-warning::after {
  background:
    var(--twl-sec-warning);

  box-shadow:
    0 0 10px
    rgba(199, 165, 106, 0.25);
}


.twl-svc-sec-node.is-verified::after {
  box-shadow:
    0 0 12px
    rgba(100, 115, 255, 0.36);
}


/* =========================================================
   STATUS
   ========================================================= */

.twl-svc-sec-map__status {
  position: absolute;

  z-index: 2;

  left: 7%;
  bottom: 7%;

  padding:
    10px
    12px;

  border:
    1px solid
    rgba(151, 160, 255, 0.11);

  border-radius: 9px;

  background:
    rgba(7, 9, 22, 0.94);
}


.twl-svc-sec-map__status span {
  display: block;

  color:
    var(--twl-svc-muted);

  font:
    500 8px/1.35
    "IBM Plex Mono",
    monospace;
}


.twl-svc-sec-map__status strong {
  color:
    var(--twl-svc-secondary);

  font-size: 10px;
  font-weight: 600;
}


.twl-svc-sec-map__status i {
  display: inline-block;

  width: 5px;
  height: 5px;

  margin-left: 5px;

  border-radius: 50%;

  background:
    var(--twl-svc-blue);
}


/* =========================================================
   HERO — DESKTOP
   ========================================================= */

@media (min-width: 1025px) {

  .twl-svc-sec-hero-node--asset {
    left: 7%;
    top: 16%;
  }


  .twl-svc-sec-hero-node--risk {
    left: 39%;
    top: 16%;
  }


  .twl-svc-sec-hero-node--priority {
    right: 7%;
    top: 16%;
  }


  .twl-svc-sec-hero-node--fix {
    right: 17%;
    bottom: 17%;
  }


  .twl-svc-sec-hero-node--verify {
    left: 35%;
    bottom: 17%;
  }

}


/* =========================================================
   SCENARIOS
   ========================================================= */

.twl-svc-sec-scenario__code {
  display: block;

  margin-bottom: 7px;

  color:
    rgba(187, 194, 255, 0.42);

  font-size: 7px;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


/* =========================================================
   WORK — 3 + 2
   ========================================================= */

.twl-svc-sec-work__grid {
  display: grid;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  gap:
    clamp(16px, 1.7vw, 22px);
}


.twl-svc-sec-work__card {
  grid-column:
    span 2;

  min-height:
    218px;
}


.twl-svc-sec-work__card:nth-child(4),
.twl-svc-sec-work__card:nth-child(5) {
  grid-column:
    span 3;
}


.twl-svc-sec-work__meta {
  display: flex;

  justify-content:
    space-between;

  gap: 14px;

  margin-bottom: 38px;
}


.twl-svc-sec-work__meta span,
.twl-svc-sec-work__meta small {
  color:
    rgba(187, 194, 255, 0.46);

  font-size: 8px;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


/* =========================================================
   INCLUDED — 4 CONTROL PHASES
   ========================================================= */

.twl-svc-sec-included__layout {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    clamp(14px, 1.8vw, 24px);
}


.twl-svc-sec-included__group {
  min-width: 0;

  padding:
    24px
    22px;

  border:
    1px solid
    rgba(151, 160, 255, 0.12);

  border-radius:
    20px;

  background:
    linear-gradient(
      145deg,
      rgba(10, 13, 29, 0.66),
      rgba(6, 8, 18, 0.52)
    );
}


.twl-svc-sec-included__head {
  display: flex;

  gap: 14px;

  align-items: flex-start;

  min-height: 78px;

  padding-bottom: 18px;

  border-bottom:
    1px solid
    var(--twl-svc-border-soft);
}


.twl-svc-sec-included__index {
  flex: 0 0 auto;

  color:
    rgba(187, 194, 255, 0.55);

  font-size: 9px;
}


.twl-svc-sec-included__head small {
  display: block;

  color:
    rgba(133, 141, 171, 0.70);

  font:
    500 7px/1.3
    "IBM Plex Mono",
    monospace;

  letter-spacing:
    0.08em;

  text-transform: uppercase;
}


.twl-svc-sec-included__head h3 {
  margin:
    7px
    0
    0;

  color:
    var(--twl-svc-text);

  font-size:
    clamp(18px, 1.4vw, 22px);

  font-weight: 600;
}


.twl-svc-sec-included__list {
  list-style: none;

  margin: 0;
  padding: 0;
}


.twl-svc-sec-included__list li {
  display: grid;

  grid-template-columns:
    28px
    minmax(0, 1fr);

  gap: 10px;

  align-items: center;

  min-height: 57px;

  border-bottom:
    1px solid
    var(--twl-svc-border-soft);
}


.twl-svc-sec-included__list li:last-child {
  border-bottom: 0;
}


.twl-svc-sec-included__list li > span {
  color:
    rgba(187, 194, 255, 0.36);

  font-size: 7px;
}


.twl-svc-sec-included__list strong {
  color:
    var(--twl-svc-secondary);

  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}


/* =========================================================
   PROCESS — 6 STEPS
   ========================================================= */

.twl-svc-sec-process
.twl-svc-process__list {
  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  gap:
    clamp(22px, 2.7vw, 46px);
}


.twl-svc-sec-process
.twl-svc-process__step,
.twl-svc-sec-process
.twl-svc-process__step:nth-child(n) {
  transform: none;

  margin-top: 0;
}


.twl-svc-sec-process
.twl-svc-process__step.is-priority {
  border-top-color:
    var(--twl-sec-warning-border);
}


.twl-svc-sec-process
.twl-svc-process__step.is-priority::before {
  background:
    var(--twl-sec-warning);

  box-shadow:
    0 0 13px
    rgba(199, 165, 106, 0.24);
}


.twl-svc-sec-process
.twl-svc-process__step.is-verified::before {
  box-shadow:
    0 0 15px
    rgba(119, 104, 255, 0.36);
}


/* =========================================================
   METRICS — CONTROL PARAMETERS
   ========================================================= */

.twl-svc-sec-metric {
  position: relative;
}


.twl-svc-sec-metric__label {
  display: block;

  margin-bottom: 12px;

  color:
    rgba(187, 194, 255, 0.42);

  font-size: 7px;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.twl-svc-sec-metric:nth-child(2) strong,
.twl-svc-sec-metric:nth-child(3) strong,
.twl-svc-sec-metric:nth-child(4) strong {
  font-size:
    clamp(28px, 3vw, 46px);
}


/* =========================================================
   RISK PRIORITIZATION MAP
   ========================================================= */

.twl-svc-sec-risk-map {
  height: 480px;
  min-height: 480px;

  border:
    1px solid
    var(--twl-svc-border);

  border-radius: 28px;

  background:
    radial-gradient(
      circle at 54% 49%,
      rgba(119, 104, 255, 0.07),
      transparent 39%
    ),
    linear-gradient(
      145deg,
      rgba(10, 13, 28, 0.98),
      rgba(5, 7, 17, 0.99)
    );
}


@media (min-width: 1025px) {

  .twl-svc-sec-risk-node--asset {
    left: 3%;
    top: 35%;
  }


  .twl-svc-sec-risk-node--vulnerability {
    left: 17%;
    top: 15%;
  }


  .twl-svc-sec-risk-node--likelihood {
    left: 32%;
    top: 35%;
  }


  .twl-svc-sec-risk-node--impact {
    left: 48%;
    top: 15%;
  }


  .twl-svc-sec-risk-node--priority {
    left: 64%;
    top: 35%;
  }


  .twl-svc-sec-risk-node--fix {
    left: 79%;
    top: 15%;
  }


  .twl-svc-sec-risk-node--verify {
    right: 3%;
    top: 35%;
  }


  .twl-svc-sec-risk-map
  .twl-svc-sec-map__status {
    left: 3%;
    bottom: 6%;
  }

}


/* =========================================================
   RISK LEVEL LEGEND
   ========================================================= */

.twl-svc-sec-risk-levels {
  position: absolute;

  z-index: 2;

  left: 32%;
  bottom: 7%;

  display: flex;

  align-items: center;

  gap: 16px;

  padding:
    9px
    12px;

  border:
    1px solid
    rgba(151, 160, 255, 0.10);

  border-radius: 9px;

  background:
    rgba(7, 9, 22, 0.90);
}


.twl-svc-sec-risk-levels > span {
  margin-right: 3px;

  color:
    var(--twl-svc-muted);

  font-size: 7px;

  letter-spacing:
    0.08em;
}


.twl-svc-sec-risk-levels > div {
  display: flex;

  align-items: center;

  gap: 5px;
}


.twl-svc-sec-risk-levels i {
  display: block;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    rgba(119, 104, 255, 0.46);
}


.twl-svc-sec-risk-levels i.is-critical {
  background:
    rgba(199, 165, 106, 0.95);
}


.twl-svc-sec-risk-levels i.is-high {
  background:
    rgba(199, 165, 106, 0.64);
}


.twl-svc-sec-risk-levels i.is-medium {
  background:
    rgba(164, 154, 255, 0.74);
}


.twl-svc-sec-risk-levels i.is-low {
  background:
    rgba(105, 116, 165, 0.66);
}


.twl-svc-sec-risk-levels small {
  color:
    var(--twl-svc-muted);

  font:
    500 7px/1
    "IBM Plex Mono",
    monospace;

  text-transform: uppercase;
}


/* =========================================================
   TECHNOLOGIES
   ========================================================= */

.twl-svc-sec-tech {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 14px;
}


.twl-svc-sec-tech__group {
  min-width: 0;

  padding:
    20px
    22px;

  border:
    1px solid
    rgba(151, 160, 255, 0.12);

  border-radius: 16px;

  background:
    rgba(9, 12, 27, 0.54);

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}


.twl-svc-sec-tech__group:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(151, 140, 255, 0.34);

  background:
    rgba(15, 18, 38, 0.72);
}


.twl-svc-sec-tech__group > span {
  display: block;

  margin-bottom: 16px;

  color:
    rgba(187, 194, 255, 0.40);

  font-size: 7px;

  text-transform: uppercase;
}


.twl-svc-sec-tech__group > div {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;
}


.twl-svc-sec-tech__group strong {
  display: inline-flex;

  align-items: center;

  min-height: 34px;

  padding:
    0
    11px;

  border:
    1px solid
    rgba(151, 160, 255, 0.12);

  border-radius: 9px;

  color:
    var(--twl-svc-secondary);

  background:
    rgba(6, 8, 19, 0.70);

  font-size: 10px;
  font-weight: 500;

  transition:
    border-color 180ms ease,
    color 180ms ease,
    background 180ms ease;
}


.twl-svc-sec-tech__group strong:hover {
  border-color:
    rgba(151, 140, 255, 0.38);

  color:
    var(--twl-svc-text);

  background:
    rgba(20, 23, 48, 0.74);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

  .twl-svc-sec-work__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .twl-svc-sec-work__card,
  .twl-svc-sec-work__card:nth-child(4),
  .twl-svc-sec-work__card:nth-child(5) {
    grid-column: auto;
  }


  .twl-svc-sec-included__layout {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .twl-svc-sec-tech {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .twl-svc-sec-hero-map,
  .twl-svc-sec-risk-map {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr);

    justify-items: center;

    width:
      min(100%, 620px);

    height: auto;
    min-height: 0;

    margin:
      26px
      auto
      0;

    padding:
      42px
      34px;

    row-gap: 38px;
  }


  .twl-svc-sec-hero-map
  .twl-svc-sec-map__frame {
    inset: 0;
  }


  .twl-svc-sec-node,
  .twl-svc-sec-node.is-core {
    position: relative !important;

    inset: auto !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;

    margin: 0;

    justify-self: center;
  }


  .twl-svc-sec-map__status,
  .twl-svc-sec-risk-levels {
    display: none;
  }


  .twl-svc-sec-process
  .twl-svc-process__list {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .twl-svc-sec-work__grid,
  .twl-svc-sec-included__layout,
  .twl-svc-sec-tech {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .twl-svc-sec-hero-map,
  .twl-svc-sec-risk-map {
    width: 100%;

    padding:
      32px
      18px;

    row-gap: 32px;

    border-radius: 20px;
  }


  .twl-svc-sec-node,
  .twl-svc-sec-node.is-core {
    min-width: 116px;
    max-width: 164px;

    min-height: 56px;

    padding:
      9px
      11px;
  }


  .twl-svc-sec-process
  .twl-svc-process__list {
    grid-template-columns:
      minmax(0, 1fr);
  }

}

/* =========================================================
   INFORMATION SECURITY
   RISK PRIORITIZATION MAP — DESKTOP REFINEMENT
   ========================================================= */

@media (min-width: 1025px) {

  /* -------------------------------------------------------
     MAP CONTAINER
     ------------------------------------------------------- */

  .twl-svc-sec-risk-map {
    height: 410px;
    min-height: 410px;

    border-radius: 26px;

    background:
      radial-gradient(
        circle at 53% 45%,
        rgba(119, 104, 255, 0.085),
        transparent 42%
      ),
      linear-gradient(
        145deg,
        rgba(10, 13, 28, 0.99),
        rgba(5, 7, 17, 0.99)
      );
  }


  /* -------------------------------------------------------
     NODES — COMMON
     ------------------------------------------------------- */

  .twl-svc-sec-risk-map
  .twl-svc-sec-node {
    min-width: 142px;
    min-height: 70px;

    padding:
      11px
      14px;

    border-radius: 12px;
  }


  /*
   * Длинным названиям даём больше места,
   * чтобы они не выглядели зажатыми.
   */

  .twl-svc-sec-risk-node--likelihood {
    min-width: 190px !important;
    max-width: 190px;
  }


  .twl-svc-sec-risk-node--impact {
    min-width: 186px !important;
    max-width: 186px;
  }


  .twl-svc-sec-risk-node--verify {
    min-width: 178px !important;
    max-width: 178px;
  }


  /* -------------------------------------------------------
     NODE POSITIONS

     Делаем более собранный zig-zag:
     верхний ряд / нижний ряд.
     ------------------------------------------------------- */

  .twl-svc-sec-risk-node--asset {
    left: 3%;
    right: auto;

    top: 43%;
    bottom: auto;
  }


  .twl-svc-sec-risk-node--vulnerability {
    left: 17%;
    right: auto;

    top: 17%;
    bottom: auto;
  }


  .twl-svc-sec-risk-node--likelihood {
    left: 32%;
    right: auto;

    top: 43%;
    bottom: auto;
  }


  .twl-svc-sec-risk-node--impact {
    left: 48%;
    right: auto;

    top: 17%;
    bottom: auto;
  }


  .twl-svc-sec-risk-node--priority {
    left: 64%;
    right: auto;

    top: 43%;
    bottom: auto;
  }


  .twl-svc-sec-risk-node--fix {
    left: 79%;
    right: auto;

    top: 17%;
    bottom: auto;
  }


  .twl-svc-sec-risk-node--verify {
    left: auto;
    right: 3%;

    top: 43%;
    bottom: auto;
  }


  /* -------------------------------------------------------
     PRIORITY — MAIN CONTROL POINT
     ------------------------------------------------------- */

  .twl-svc-sec-risk-node--priority {
    min-width: 150px;

    border-color:
      rgba(199, 165, 106, 0.52);

    background:
      linear-gradient(
        145deg,
        rgba(39, 32, 28, 0.82),
        rgba(13, 14, 27, 0.98)
      );

    box-shadow:
      0
      14px
      34px
      rgba(0, 0, 0, 0.12),
      0
      0
      28px
      rgba(199, 165, 106, 0.035);
  }


  .twl-svc-sec-risk-node--priority::after {
    background:
      var(--twl-sec-warning);

    box-shadow:
      0
      0
      11px
      rgba(199, 165, 106, 0.28);
  }


  /* -------------------------------------------------------
     VERIFICATION
     ------------------------------------------------------- */

  .twl-svc-sec-risk-node--verify {
    border-color:
      rgba(151, 160, 255, 0.28);
  }


  /* -------------------------------------------------------
     CONNECTIONS
     ------------------------------------------------------- */

  .twl-svc-sec-risk-map
  .twl-svc-sec-map__link--primary {
    stroke-width: 1.6;

    stroke:
      rgba(164, 154, 255, 0.86);

    filter:
      drop-shadow(
        0
        0
        5px
        rgba(119, 104, 255, 0.12)
      );
  }


  /* -------------------------------------------------------
     STATUS
     ------------------------------------------------------- */

  .twl-svc-sec-risk-map
  .twl-svc-sec-map__status {
    left: 3%;
    right: auto;

    top: auto;
    bottom: 5%;
  }


  /* -------------------------------------------------------
     RISK LEVEL LEGEND

     Центрируем независимо от размеров карты.
     ------------------------------------------------------- */

  .twl-svc-sec-risk-levels {
    left: 50%;
    right: auto;

    bottom: 5%;

    transform:
      translateX(-50%);

    gap: 15px;

    padding:
      10px
      14px;
  }

}

/* =========================================================
   INFORMATION SECURITY
   RISK MAP — FINAL DESKTOP TUNE
   ========================================================= */

@media (min-width: 1025px) {

  /* -------------------------------------------------------
     Slightly tighten the zig-zag vertically
     ------------------------------------------------------- */

  .twl-svc-sec-risk-node--asset {
    top: 41%;
  }


  .twl-svc-sec-risk-node--vulnerability {
    top: 18%;
  }


  .twl-svc-sec-risk-node--likelihood {
    top: 41%;
  }


  .twl-svc-sec-risk-node--impact {
    top: 18%;
  }


  .twl-svc-sec-risk-node--priority {
    top: 41%;
  }


  .twl-svc-sec-risk-node--fix {
    left: 78%;
    top: 18%;
  }


  .twl-svc-sec-risk-node--verify {
    right: 4%;
    top: 41%;
  }


  /* -------------------------------------------------------
     Risk legend
     ------------------------------------------------------- */

  .twl-svc-sec-risk-levels {
    bottom: 4%;

    gap: 13px;

    padding:
      9px
      13px;
  }


  /* -------------------------------------------------------
     Verification status
     ------------------------------------------------------- */

  .twl-svc-sec-risk-map
  .twl-svc-sec-map__status {
    left: 3%;

    bottom: 4%;
  }

}
/* =========================================================
   INFORMATION SECURITY
   RISK MAP — COMPOSITION REBUILD
   ========================================================= */

@media (min-width: 1025px) {

  /* -------------------------------------------------------
     CANVAS
     ------------------------------------------------------- */

  .twl-svc--security
  .twl-svc-sec-risk-map {
    height: 380px;
    min-height: 380px;
  }


  /* -------------------------------------------------------
     TOP / BOTTOM ROUTE

     02 Vulnerability       04 Impact          06 Fix
            ↓                  ↓                 ↓

     01 Asset → 03 Likelihood → 05 Priority → 07 Verify

     Более выраженный zig-zag.
     ------------------------------------------------------- */


  /* 01 — Актив */

  .twl-svc--security
  .twl-svc-sec-risk-map
  .twl-svc-sec-risk-node--asset {
    left: 3%;
    right: auto;

    top: 46%;
    bottom: auto;
  }


  /* 02 — Уязвимость */

  .twl-svc--security
  .twl-svc-sec-risk-map
  .twl-svc-sec-risk-node--vulnerability {
    left: 17.5%;
    right: auto;

    top: 12%;
    bottom: auto;
  }


  /* 03 — Вероятность эксплуатации */

  .twl-svc--security
  .twl-svc-sec-risk-map
  .twl-svc-sec-risk-node--likelihood {
    left: 33%;
    right: auto;

    top: 46%;
    bottom: auto;
  }


  /* 04 — Потенциальное влияние */

  .twl-svc--security
  .twl-svc-sec-risk-map
  .twl-svc-sec-risk-node--impact {
    left: 49.5%;
    right: auto;

    top: 12%;
    bottom: auto;
  }


  /* 05 — Приоритет */

  .twl-svc--security
  .twl-svc-sec-risk-map
  .twl-svc-sec-risk-node--priority {
    left: 65.5%;
    right: auto;

    top: 46%;
    bottom: auto;
  }


  /* 06 — Исправление */

  .twl-svc--security
  .twl-svc-sec-risk-map
  .twl-svc-sec-risk-node--fix {
    left: 81%;
    right: auto;

    top: 12%;
    bottom: auto;
  }


  /* 07 — Повторная проверка */

  .twl-svc--security
  .twl-svc-sec-risk-map
  .twl-svc-sec-risk-node--verify {
    left: auto;
    right: 2.5%;

    top: 46%;
    bottom: auto;
  }


  /* -------------------------------------------------------
     SERVICE META
     ------------------------------------------------------- */

  .twl-svc--security
  .twl-svc-sec-risk-map
  .twl-svc-sec-map__status {
    left: 3%;
    right: auto;

    top: auto;
    bottom: 4%;
  }


  .twl-svc--security
  .twl-svc-sec-risk-levels {
    left: 50%;
    right: auto;

    top: auto;
    bottom: 4%;

    transform: translateX(-50%);
  }

}

/* =========================================================
   SERVICE — SEO & ADVERTISING
   Template: service-seo-advertising.php
   ========================================================= */


/* =========================================================
   MAP COMMON
   ========================================================= */

.twl-svc-seo-hero-map,
.twl-svc-seo-flow-map {
  position: relative;

  overflow: hidden;
  overflow-anchor: none;
}


.twl-svc-seo-hero-map {
  width: 100%;
  min-height: 550px;

  margin-left: 0;
}


.twl-svc-seo-map__frame {
  position: absolute;

  inset: 5% 4%;

  border:
    1px solid
    rgba(151, 160, 255, 0.17);

  border-radius: 27px;

  background:
    radial-gradient(
      circle at 53% 48%,
      rgba(119, 104, 255, 0.085),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(10, 13, 29, 0.98),
      rgba(5, 7, 17, 0.99)
    );
}


.twl-svc-seo-map__grid {
  position: absolute;

  inset: 0;

  opacity: 0.16;

  background-image:
    linear-gradient(
      rgba(151, 160, 255, 0.042) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(151, 160, 255, 0.042) 1px,
      transparent 1px
    );

  background-size:
    48px
    48px;

  -webkit-mask-image:
    radial-gradient(
      circle at 53% 48%,
      #000,
      transparent 75%
    );

  mask-image:
    radial-gradient(
      circle at 53% 48%,
      #000,
      transparent 75%
    );

  pointer-events: none;
}


.twl-svc-seo-map__glow {
  position: absolute;

  left: 54%;
  top: 49%;

  width: 520px;
  height: 290px;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    rgba(119, 104, 255, 0.06);

  filter:
    blur(110px);

  pointer-events: none;
}


/* =========================================================
   CONNECTIONS
   ========================================================= */

.twl-svc-seo-map__links {
  position: absolute;

  inset: 0;

  z-index: 1;

  width: 100%;
  height: 100%;

  overflow: hidden;

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 180ms ease;
}


.twl-svc-seo-hero-map.is-links-ready
.twl-svc-seo-map__links,
.twl-svc-seo-flow-map.is-links-ready
.twl-svc-seo-map__links {
  opacity: 1;
}


.twl-svc-seo-map__link {
  fill: none;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect:
    non-scaling-stroke;
}


.twl-svc-seo-map__link--primary {
  stroke:
    rgba(164, 154, 255, 0.86);

  stroke-width: 1.5;

  filter:
    drop-shadow(
      0 0 5px rgba(119, 104, 255, 0.13)
    );
}


.twl-svc-seo-map__link--secondary {
  stroke:
    rgba(105, 116, 165, 0.46);

  stroke-width: 1.1;
}


/* =========================================================
   NODE
   ========================================================= */

.twl-svc-seo-node {
  position: absolute;

  z-index: 2;

  width: max-content;

  min-width: 138px;
  max-width: 188px;
  min-height: 66px;

  padding:
    10px
    12px;

  border:
    1px solid
    rgba(151, 160, 255, 0.18);

  border-radius: 12px;

  background:
    rgba(8, 11, 25, 0.98);
}


.twl-svc-seo-node::after {
  content: "";

  position: absolute;

  top: 10px;
  right: 10px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    rgba(100, 115, 255, 0.90);

  box-shadow:
    0 0 10px
    rgba(100, 115, 255, 0.30);
}


.twl-svc-seo-node span,
.twl-svc-seo-node small {
  display: block;

  color:
    var(--twl-svc-muted);

  font:
    500 7px/1.35
    "IBM Plex Mono",
    monospace;

  letter-spacing:
    0.08em;

  text-transform: uppercase;
}


.twl-svc-seo-node strong {
  display: block;

  margin:
    5px
    0
    3px;

  color:
    var(--twl-svc-text);

  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}


.twl-svc-seo-node.is-core {
  min-width: 158px;

  border-color:
    rgba(151, 140, 255, 0.58);

  background:
    linear-gradient(
      145deg,
      rgba(24, 27, 56, 0.99),
      rgba(9, 12, 28, 0.99)
    );
}


/* =========================================================
   STATUS
   ========================================================= */

.twl-svc-seo-map__status {
  position: absolute;

  z-index: 2;

  left: 7%;
  bottom: 7%;

  padding:
    10px
    12px;

  border:
    1px solid
    rgba(151, 160, 255, 0.11);

  border-radius: 9px;

  background:
    rgba(7, 9, 22, 0.94);
}


.twl-svc-seo-map__status span {
  display: block;

  color:
    var(--twl-svc-muted);

  font:
    500 8px/1.35
    "IBM Plex Mono",
    monospace;
}


.twl-svc-seo-map__status strong {
  color:
    var(--twl-svc-secondary);

  font-size: 10px;
  font-weight: 600;
}


.twl-svc-seo-map__status i {
  display: inline-block;

  width: 5px;
  height: 5px;

  margin-left: 5px;

  border-radius: 50%;

  background:
    var(--twl-svc-blue);
}


/* =========================================================
   HERO — DESKTOP
   ========================================================= */

@media (min-width: 1025px) {

  .twl-svc-seo-hero-node--source {
    left: 6%;
    top: 17%;
  }


  .twl-svc-seo-hero-node--creative {
    left: 38%;
    top: 17%;
  }


  .twl-svc-seo-hero-node--landing {
    right: 7%;
    top: 17%;
  }


  .twl-svc-seo-hero-node--action {
    right: 15%;
    bottom: 17%;
  }


  .twl-svc-seo-hero-node--analytics {
    left: 35%;
    bottom: 17%;
  }

}


/* =========================================================
   SCENARIOS
   ========================================================= */

.twl-svc-seo-scenario__code {
  display: block;

  margin-bottom: 7px;

  color:
    rgba(187, 194, 255, 0.44);

  font-size: 7px;

  letter-spacing:
    0.08em;

  text-transform: uppercase;
}


/* =========================================================
   WORK — 3 + 2
   ========================================================= */

.twl-svc-seo-work__grid {
  display: grid;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  gap:
    clamp(16px, 1.7vw, 22px);
}


.twl-svc-seo-work__card {
  grid-column: span 2;

  min-height: 220px;
}


.twl-svc-seo-work__card:nth-child(4),
.twl-svc-seo-work__card:nth-child(5) {
  grid-column: span 3;
}


.twl-svc-seo-work__meta {
  display: flex;

  justify-content: space-between;

  gap: 14px;

  margin-bottom: 38px;
}


.twl-svc-seo-work__meta span,
.twl-svc-seo-work__meta small {
  color:
    rgba(187, 194, 255, 0.48);

  font-size: 8px;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


/* =========================================================
   INCLUDED
   ========================================================= */

.twl-svc-seo-included__layout {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    clamp(36px, 6vw, 82px);
}


.twl-svc-seo-included__group {
  min-width: 0;
}


.twl-svc-seo-included__head {
  padding-bottom: 22px;

  border-bottom:
    1px solid
    var(--twl-svc-border-soft);
}


.twl-svc-seo-included__head span {
  color:
    rgba(187, 194, 255, 0.46);

  font-size: 8px;
}


.twl-svc-seo-included__head h3 {
  margin:
    8px
    0
    0;

  color:
    var(--twl-svc-text);

  font-size:
    clamp(20px, 1.8vw, 27px);

  font-weight: 600;
}


.twl-svc-seo-included__list {
  list-style: none;

  margin: 0;
  padding: 0;
}


.twl-svc-seo-included__list li {
  display: grid;

  grid-template-columns:
    34px
    minmax(0, 1fr);

  gap: 14px;

  align-items: center;

  min-height: 61px;

  border-bottom:
    1px solid
    var(--twl-svc-border-soft);
}


.twl-svc-seo-included__list li > span {
  color:
    rgba(187, 194, 255, 0.40);

  font-size: 8px;
}


.twl-svc-seo-included__list strong {
  color:
    var(--twl-svc-secondary);

  font-size: 14px;
  font-weight: 500;
}


/* =========================================================
   PROCESS — 4 + 4
   ========================================================= */

.twl-svc-seo-process
.twl-svc-process__list {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    52px
    clamp(30px, 5vw, 74px);
}


.twl-svc-seo-process
.twl-svc-process__list::before {
  display: none;
}


.twl-svc-seo-process
.twl-svc-process__step,
.twl-svc-seo-process
.twl-svc-process__step:nth-child(n) {
  min-height: 145px;

  margin: 0;

  padding-top: 22px;

  transform: none;

  border-top:
    1px solid
    rgba(151, 160, 255, 0.16);
}


.twl-svc-seo-process
.twl-svc-process__step::before {
  content: "";

  position: absolute;

  left: 0;
  top: -4px;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--twl-svc-violet);

  box-shadow:
    0 0 12px
    rgba(119, 104, 255, 0.24);
}


/* =========================================================
   METRICS
   ========================================================= */

.twl-svc-seo-metric__label {
  display: block;

  margin-bottom: 12px;

  color:
    rgba(187, 194, 255, 0.42);

  font-size: 7px;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.twl-svc-seo-metric:nth-child(2) strong,
.twl-svc-seo-metric:nth-child(3) strong,
.twl-svc-seo-metric:nth-child(4) strong {
  font-size:
    clamp(27px, 3vw, 44px);
}


/* =========================================================
   ACQUISITION FLOW
   ========================================================= */

.twl-svc-seo-flow-map {
  height: 440px;
  min-height: 440px;

  border:
    1px solid
    var(--twl-svc-border);

  border-radius: 28px;

  background:
    radial-gradient(
      circle at 52% 48%,
      rgba(119, 104, 255, 0.08),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      rgba(10, 13, 28, 0.98),
      rgba(5, 7, 17, 0.99)
    );
}


@media (min-width: 1025px) {

  .twl-svc-seo-flow-node--source {
    left: 3%;
    top: 38%;
  }


  .twl-svc-seo-flow-node--creative {
    left: 19%;
    top: 17%;
  }


  .twl-svc-seo-flow-node--landing {
    left: 36%;
    top: 38%;
  }


  .twl-svc-seo-flow-node--action {
    left: 53%;
    top: 17%;
  }


  .twl-svc-seo-flow-node--analytics {
    left: 70%;
    top: 38%;
  }


  .twl-svc-seo-flow-node--result {
    right: 3%;
    top: 17%;
  }


  .twl-svc-seo-flow-map
  .twl-svc-seo-map__status {
    left: 3%;
    bottom: 6%;
  }

}


/* =========================================================
   TECHNOLOGIES
   ========================================================= */

.twl-svc-seo-tech {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;
}


.twl-svc-seo-tech > span {
  display: inline-flex;

  align-items: center;

  min-height: 43px;

  padding:
    0
    16px;

  border:
    1px solid
    rgba(151, 160, 255, 0.14);

  border-radius: 11px;

  color:
    var(--twl-svc-secondary);

  background:
    rgba(10, 13, 29, 0.68);

  font-size: 12px;

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease;
}


.twl-svc-seo-tech > span:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(151, 140, 255, 0.44);

  color:
    var(--twl-svc-text);

  background:
    rgba(20, 23, 48, 0.82);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

  .twl-svc-seo-work__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .twl-svc-seo-work__card,
  .twl-svc-seo-work__card:nth-child(4),
  .twl-svc-seo-work__card:nth-child(5) {
    grid-column: auto;
  }


  .twl-svc-seo-process
  .twl-svc-process__list {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .twl-svc-seo-hero-map,
  .twl-svc-seo-flow-map {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr);

    justify-items: center;

    width:
      min(100%, 620px);

    height: auto;
    min-height: 0;

    margin:
      26px
      auto
      0;

    padding:
      42px
      34px;

    row-gap: 38px;
  }


  .twl-svc-seo-hero-map
  .twl-svc-seo-map__frame {
    inset: 0;
  }


  .twl-svc-seo-node,
  .twl-svc-seo-node.is-core {
    position: relative !important;

    inset: auto !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;

    margin: 0;

    justify-self: center;
  }


  .twl-svc-seo-map__status {
    display: none;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .twl-svc-seo-work__grid,
  .twl-svc-seo-included__layout,
  .twl-svc-seo-process
  .twl-svc-process__list {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .twl-svc-seo-hero-map,
  .twl-svc-seo-flow-map {
    width: 100%;

    padding:
      32px
      18px;

    row-gap: 32px;

    border-radius: 20px;
  }


  .twl-svc-seo-node,
  .twl-svc-seo-node.is-core {
    min-width: 116px;
    max-width: 168px;

    min-height: 56px;

    padding:
      9px
      11px;
  }


  .twl-svc-seo-process
  .twl-svc-process__step {
    min-height: 0;

    padding:
      22px
      0;
  }

}
/* =========================================================
   SERVICE — COMPLEX PROJECTS
   Template: service-complex-projects.php
   ========================================================= */


/* =========================================================
   HERO — LARGER THAN STANDARD SERVICE PAGE
   ========================================================= */

.twl-svc-complex-hero {
  padding-top:
    clamp(92px, 8vw, 132px);

  padding-bottom:
    clamp(120px, 10vw, 162px);
}


.twl-svc-complex-hero__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 0.84fr)
    minmax(620px, 1.16fr);

  gap:
    clamp(48px, 6vw, 92px);

  align-items: center;
}


.twl-svc-complex-hero__title {
  max-width: 720px;
}


.twl-svc-complex-hero__lead {
  max-width: 650px;
}


/* =========================================================
   MAP COMMON
   ========================================================= */

.twl-svc-complex-hero-map,
.twl-svc-complex-architecture {
  position: relative;

  overflow: hidden;
  overflow-anchor: none;
}


.twl-svc-complex-hero-map {
  min-height: 610px;
}


.twl-svc-complex-map__frame {
  position: absolute;

  inset: 3%;

  border:
    1px solid
    rgba(151, 160, 255, 0.18);

  border-radius: 30px;

  background:
    radial-gradient(
      circle at 52% 48%,
      rgba(119, 104, 255, 0.11),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(11, 14, 31, 0.98),
      rgba(5, 7, 17, 0.99)
    );
}


.twl-svc-complex-map__grid {
  position: absolute;

  inset: 0;

  opacity: 0.17;

  background-image:
    linear-gradient(
      rgba(151, 160, 255, 0.04) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(151, 160, 255, 0.04) 1px,
      transparent 1px
    );

  background-size:
    50px
    50px;

  -webkit-mask-image:
    radial-gradient(
      circle at 52% 50%,
      #000,
      transparent 78%
    );

  mask-image:
    radial-gradient(
      circle at 52% 50%,
      #000,
      transparent 78%
    );

  pointer-events: none;
}


.twl-svc-complex-map__glow {
  position: absolute;

  left: 52%;
  top: 49%;

  width: 650px;
  height: 420px;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    rgba(119, 104, 255, 0.075);

  filter:
    blur(130px);

  pointer-events: none;
}


/* =========================================================
   CONNECTIONS
   ========================================================= */

.twl-svc-complex-map__links {
  position: absolute;

  inset: 0;

  z-index: 1;

  width: 100%;
  height: 100%;

  overflow: hidden;

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 180ms ease;
}


.twl-svc-complex-hero-map.is-links-ready
.twl-svc-complex-map__links,
.twl-svc-complex-architecture.is-links-ready
.twl-svc-complex-map__links {
  opacity: 1;
}


.twl-svc-complex-map__link {
  fill: none;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect:
    non-scaling-stroke;
}


.twl-svc-complex-map__link--primary {
  stroke:
    rgba(164, 154, 255, 0.88);

  stroke-width: 1.55;

  filter:
    drop-shadow(
      0 0 5px
      rgba(119, 104, 255, 0.13)
    );
}


.twl-svc-complex-map__link--secondary {
  stroke:
    rgba(105, 116, 165, 0.50);

  stroke-width: 1.1;
}


/* =========================================================
   HERO CORE
   ========================================================= */

.twl-svc-complex-core {
  position: absolute;

  z-index: 3;

  left: 50%;
  top: 50%;

  width: 190px;
  min-height: 112px;

  padding:
    20px
    22px;

  transform:
    translate(-50%, -50%);

  border:
    1px solid
    rgba(151, 140, 255, 0.60);

  border-radius: 20px;

  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(119, 104, 255, 0.14),
      transparent 62%
    ),
    linear-gradient(
      145deg,
      rgba(26, 29, 61, 0.99),
      rgba(10, 13, 30, 0.99)
    );

  box-shadow:
    0 24px 80px
    rgba(63, 55, 153, 0.17);
}


.twl-svc-complex-core span,
.twl-svc-complex-core small {
  display: block;

  color:
    var(--twl-svc-muted);

  font:
    500 8px/1.35
    "IBM Plex Mono",
    monospace;
}


.twl-svc-complex-core strong {
  display: block;

  margin:
    10px
    0
    7px;

  color:
    var(--twl-svc-text);

  font-size: 18px;
  font-weight: 600;
}


/* =========================================================
   HERO NODES
   ========================================================= */

.twl-svc-complex-node,
.twl-svc-complex-architecture-node {
  position: absolute;

  z-index: 2;

  width: max-content;

  min-width: 134px;
  max-width: 190px;
  min-height: 66px;

  padding:
    10px
    12px;

  border:
    1px solid
    rgba(151, 160, 255, 0.18);

  border-radius: 12px;

  background:
    rgba(7, 10, 23, 0.98);
}


.twl-svc-complex-node span,
.twl-svc-complex-node small,
.twl-svc-complex-architecture-node span,
.twl-svc-complex-architecture-node small {
  display: block;

  color:
    var(--twl-svc-muted);

  font:
    500 7px/1.35
    "IBM Plex Mono",
    monospace;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.twl-svc-complex-node strong,
.twl-svc-complex-architecture-node strong {
  display: block;

  margin:
    5px
    0
    3px;

  color:
    var(--twl-svc-text);

  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}


.twl-svc-complex-node::after,
.twl-svc-complex-architecture-node::after {
  content: "";

  position: absolute;

  top: 10px;
  right: 10px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--twl-svc-blue);

  box-shadow:
    0 0 10px
    rgba(100, 115, 255, 0.32);
}


/* =========================================================
   HERO POSITIONS
   ========================================================= */

@media (min-width: 1025px) {

  .twl-svc-complex-hero-node--web {
    left: 7%;
    top: 12%;
  }


  .twl-svc-complex-hero-node--crm {
    left: 40%;
    top: 8%;
  }


  .twl-svc-complex-hero-node--api {
    right: 7%;
    top: 16%;
  }


  .twl-svc-complex-hero-node--telephony {
    right: 5%;
    top: 54%;
  }


  .twl-svc-complex-hero-node--infrastructure {
    right: 18%;
    bottom: 8%;
  }


  .twl-svc-complex-hero-node--analytics {
    left: 32%;
    bottom: 8%;
  }


  .twl-svc-complex-hero-node--security {
    left: 5%;
    top: 58%;
  }

}


/* =========================================================
   STATUS
   ========================================================= */

.twl-svc-complex-map__status {
  position: absolute;

  z-index: 2;

  left: 5%;
  bottom: 5%;

  padding:
    10px
    12px;

  border:
    1px solid
    rgba(151, 160, 255, 0.11);

  border-radius: 9px;

  background:
    rgba(7, 9, 22, 0.94);
}


.twl-svc-complex-map__status span {
  display: block;

  color:
    var(--twl-svc-muted);

  font:
    500 8px/1.35
    "IBM Plex Mono",
    monospace;
}


.twl-svc-complex-map__status strong {
  color:
    var(--twl-svc-secondary);

  font-size: 10px;
  font-weight: 600;
}


.twl-svc-complex-map__status i {
  display: inline-block;

  width: 5px;
  height: 5px;

  margin-left: 5px;

  border-radius: 50%;

  background:
    var(--twl-svc-blue);
}


/* =========================================================
   SCENARIOS — NARRATIVE, NOT CARD WALL
   ========================================================= */

.twl-svc-complex-scenarios__heading {
  max-width: 760px;

  margin-bottom:
    clamp(64px, 7vw, 104px);
}


.twl-svc-complex-scenarios__list {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    0
    clamp(70px, 9vw, 140px);
}


.twl-svc-complex-scenario {
  position: relative;

  min-height: 260px;

  padding:
    32px
    0
    54px;

  border-top:
    1px solid
    rgba(151, 160, 255, 0.16);
}


.twl-svc-complex-scenario:nth-child(even) {
  transform:
    translateY(58px);
}


.twl-svc-complex-scenario__meta {
  display: flex;

  justify-content: space-between;

  margin-bottom: 52px;
}


.twl-svc-complex-scenario__meta span,
.twl-svc-complex-scenario__meta small {
  color:
    rgba(187, 194, 255, 0.48);

  font-size: 8px;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.twl-svc-complex-scenario h3 {
  max-width: 560px;

  margin:
    0
    0
    18px;

  color:
    var(--twl-svc-text);

  font-size:
    clamp(24px, 2.3vw, 36px);

  font-weight: 600;

  line-height: 1.16;

  letter-spacing: -0.035em;
}


.twl-svc-complex-scenario p {
  max-width: 570px;

  margin: 0;

  color:
    var(--twl-svc-secondary);

  font-size: 14px;
  line-height: 1.75;
}


/* =========================================================
   DIRECTIONS SCENE
   ========================================================= */

.twl-svc-complex-directions__scene {
  position: relative;

  min-height: 650px;

  padding:
    44px;

  border:
    1px solid
    rgba(151, 160, 255, 0.14);

  border-radius: 30px;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(119, 104, 255, 0.09),
      transparent 36%
    ),
    rgba(7, 9, 21, 0.64);
}


.twl-svc-complex-directions__core {
  position: absolute;

  z-index: 2;

  left: 50%;
  top: 50%;

  width: 210px;

  padding:
    24px;

  transform:
    translate(-50%, -50%);

  border:
    1px solid
    rgba(151, 140, 255, 0.50);

  border-radius: 20px;

  background:
    rgba(16, 18, 40, 0.97);

  text-align: center;
}


.twl-svc-complex-directions__core span,
.twl-svc-complex-directions__core small {
  display: block;

  color:
    var(--twl-svc-muted);

  font-size: 8px;
}


.twl-svc-complex-directions__core strong {
  display: block;

  margin:
    10px
    0;

  color:
    var(--twl-svc-text);

  font-size: 18px;
}


.twl-svc-complex-directions__grid {
  position: relative;

  width: 100%;
  height: 560px;
}


.twl-svc-complex-direction {
  position: absolute;

  width:
    min(260px, 22%);

  min-height: 150px;

  padding:
    20px;

  border-top:
    1px solid
    rgba(151, 160, 255, 0.20);
}


.twl-svc-complex-direction--development {
  left: 3%;
  top: 5%;
}


.twl-svc-complex-direction--crm {
  left: 39%;
  top: 0;
}


.twl-svc-complex-direction--api {
  right: 3%;
  top: 8%;
}


.twl-svc-complex-direction--design {
  left: 3%;
  top: 43%;
}


.twl-svc-complex-direction--telephony {
  right: 3%;
  top: 43%;
}


.twl-svc-complex-direction--infrastructure {
  left: 18%;
  bottom: 0;
}


.twl-svc-complex-direction--analytics {
  right: 18%;
  bottom: 0;
}


.twl-svc-complex-direction__meta {
  display: flex;

  justify-content: space-between;

  margin-bottom: 24px;
}


.twl-svc-complex-direction__meta span,
.twl-svc-complex-direction__meta small {
  color:
    rgba(187, 194, 255, 0.44);

  font-size: 7px;

  text-transform: uppercase;
}


.twl-svc-complex-direction h3 {
  margin:
    0
    0
    10px;

  color:
    var(--twl-svc-text);

  font-size: 17px;
  font-weight: 600;
}


.twl-svc-complex-direction p {
  margin: 0;

  color:
    var(--twl-svc-muted);

  font-size: 12px;
  line-height: 1.6;
}


/* =========================================================
   INCLUDED
   ========================================================= */

.twl-svc-complex-included__layout {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    18px;
}


.twl-svc-complex-included__group {
  min-width: 0;

  padding:
    26px;

  border:
    1px solid
    rgba(151, 160, 255, 0.13);

  border-radius: 22px;

  background:
    rgba(8, 11, 25, 0.58);
}


.twl-svc-complex-included__head {
  display: flex;

  gap: 16px;

  min-height: 82px;

  padding-bottom: 20px;

  border-bottom:
    1px solid
    var(--twl-svc-border-soft);
}


.twl-svc-complex-included__head > span {
  color:
    var(--twl-svc-lavender);

  font-size: 9px;
}


.twl-svc-complex-included__head small {
  display: block;

  color:
    var(--twl-svc-muted);

  font-size: 7px;

  text-transform: uppercase;
}


.twl-svc-complex-included__head h3 {
  margin:
    8px
    0
    0;

  color:
    var(--twl-svc-text);

  font-size: 20px;
  font-weight: 600;
}


.twl-svc-complex-included__list {
  list-style: none;

  margin: 0;
  padding: 0;
}


.twl-svc-complex-included__list li {
  padding:
    16px
    0;

  border-bottom:
    1px solid
    var(--twl-svc-border-soft);

  color:
    var(--twl-svc-secondary);

  font-size: 12px;
  line-height: 1.5;
}


.twl-svc-complex-included__list li:last-child {
  border-bottom: 0;
}


/* =========================================================
   PROCESS — LARGE 6 STEP SCENE
   ========================================================= */

.twl-svc-complex-process__list {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    24px;

  list-style: none;

  margin: 0;
  padding: 0;
}


.twl-svc-complex-process__step {
  position: relative;

  min-height: 210px;

  padding:
    28px;

  overflow: hidden;

  border:
    1px solid
    rgba(151, 160, 255, 0.13);

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(10, 13, 29, 0.86),
      rgba(6, 8, 18, 0.72)
    );
}


.twl-svc-complex-process__step:nth-child(2),
.twl-svc-complex-process__step:nth-child(5) {
  transform:
    translateY(26px);
}


.twl-svc-complex-process__step > span {
  display: block;

  color:
    rgba(187, 194, 255, 0.54);

  font-size: 10px;
}


.twl-svc-complex-process__step strong {
  display: block;

  max-width: 280px;

  margin-top: 76px;

  color:
    var(--twl-svc-text);

  font-size:
    clamp(21px, 1.7vw, 27px);

  font-weight: 600;

  line-height: 1.25;
}


/* =========================================================
   METRICS
   ========================================================= */

.twl-svc-complex-metric__label {
  display: block;

  margin-bottom: 12px;

  color:
    rgba(187, 194, 255, 0.42);

  font-size: 7px;

  text-transform: uppercase;
}


.twl-svc-complex-metric:nth-child(2) strong,
.twl-svc-complex-metric:nth-child(4) strong {
  font-size:
    clamp(26px, 3vw, 44px);
}


/* =========================================================
   MAIN ARCHITECTURE
   ========================================================= */

.twl-svc-complex-architecture {
  height: 620px;
  min-height: 620px;

  border:
    1px solid
    var(--twl-svc-border);

  border-radius: 32px;

  background:
    radial-gradient(
      circle at 52% 50%,
      rgba(119, 104, 255, 0.10),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(11, 14, 30, 0.99),
      rgba(5, 7, 17, 1)
    );
}


.twl-svc-complex-architecture-node.is-core {
  min-width: 180px;

  border-color:
    rgba(151, 140, 255, 0.62);

  background:
    linear-gradient(
      145deg,
      rgba(26, 29, 60, 0.99),
      rgba(9, 12, 28, 0.99)
    );
}


.twl-svc-complex-architecture-node.is-business {
  min-width: 176px;

  border-color:
    rgba(187, 194, 255, 0.38);
}


@media (min-width: 1025px) {

  .twl-svc-complex-architecture-node--user {
    left: 4%;
    top: 43%;
  }


  .twl-svc-complex-architecture-node--interface {
    left: 19%;
    top: 18%;
  }


  .twl-svc-complex-architecture-node--crm {
    left: 38%;
    top: 12%;
  }


  .twl-svc-complex-architecture-node--api {
    left: 38%;
    top: 43%;
  }


  .twl-svc-complex-architecture-node--telephony {
    left: 38%;
    bottom: 13%;
  }


  .twl-svc-complex-architecture-node--analytics {
    left: 59%;
    top: 43%;
  }


  .twl-svc-complex-architecture-node--infrastructure {
    left: 76%;
    top: 22%;
  }


  .twl-svc-complex-architecture-node--business {
    right: 4%;
    bottom: 13%;
  }


  .twl-svc-complex-architecture
  .twl-svc-complex-map__status {
    left: 4%;
    bottom: 5%;
  }

}


/* =========================================================
   STACK
   ========================================================= */

.twl-svc-complex-stack {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;
}


.twl-svc-complex-stack > span {
  display: inline-flex;

  align-items: center;

  min-height: 40px;

  padding:
    0
    14px;

  border:
    1px solid
    rgba(151, 160, 255, 0.13);

  border-radius: 10px;

  color:
    var(--twl-svc-secondary);

  background:
    rgba(9, 12, 27, 0.60);

  font-size: 11px;

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease;
}


.twl-svc-complex-stack > span:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(151, 140, 255, 0.40);

  color:
    var(--twl-svc-text);

  background:
    rgba(20, 23, 48, 0.78);
}


/* =========================================================
   SERVICE ECOSYSTEM NAVIGATION
   ========================================================= */

.twl-svc-complex-navigation__scene {
  position: relative;

  padding:
    50px;

  border:
    1px solid
    rgba(151, 160, 255, 0.14);

  border-radius: 30px;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(119, 104, 255, 0.07),
      transparent 42%
    ),
    rgba(7, 9, 21, 0.58);
}


.twl-svc-complex-navigation__core {
  max-width: 420px;

  margin:
    0
    auto
    52px;

  text-align: center;
}


.twl-svc-complex-navigation__core span,
.twl-svc-complex-navigation__core small {
  display: block;

  color:
    var(--twl-svc-muted);

  font-size: 8px;
}


.twl-svc-complex-navigation__core strong {
  display: block;

  margin:
    10px
    0;

  color:
    var(--twl-svc-text);

  font-size:
    clamp(24px, 2.3vw, 34px);

  font-weight: 600;
}


.twl-svc-complex-navigation__grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 14px;
}


.twl-svc-complex-navigation__item {
  position: relative;

  display: grid;

  grid-template-columns:
    34px
    minmax(0, 1fr)
    auto;

  gap: 12px;

  align-items: center;

  min-height: 84px;

  padding:
    18px;

  border:
    1px solid
    rgba(151, 160, 255, 0.13);

  border-radius: 15px;

  color:
    var(--twl-svc-text);

  background:
    rgba(9, 12, 27, 0.68);

  text-decoration: none;

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}


.twl-svc-complex-navigation__item:hover,
.twl-svc-complex-navigation__item:focus-visible {
  transform:
    translateY(-2px);

  border-color:
    rgba(151, 140, 255, 0.42);

  background:
    rgba(18, 21, 44, 0.82);
}


.twl-svc-complex-navigation__item > span {
  color:
    rgba(187, 194, 255, 0.46);

  font-size: 8px;
}


.twl-svc-complex-navigation__item strong {
  font-size: 12px;
  font-weight: 600;
}


.twl-svc-complex-navigation__item i {
  color:
    var(--twl-svc-lavender);

  font-size: 13px;
  font-style: normal;
}


/* =========================================================
   CTA
   ========================================================= */

.twl-svc-complex-cta__box {
  min-height:
    clamp(360px, 35vw, 500px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1200px) {

  .twl-svc-complex-hero__layout {
    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(500px, 1.1fr);
  }


  .twl-svc-complex-navigation__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 1024px) {

  .twl-svc-complex-hero__layout {
    display: block;
  }


  .twl-svc-complex-hero-map,
  .twl-svc-complex-architecture {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr);

    justify-items: center;

    width:
      min(100%, 660px);

    height: auto;
    min-height: 0;

    margin:
      48px
      auto
      0;

    padding:
      44px
      34px;

    row-gap: 34px;
  }


  .twl-svc-complex-map__frame {
    inset: 0;
  }


  .twl-svc-complex-core,
  .twl-svc-complex-node,
  .twl-svc-complex-architecture-node {
    position: relative !important;

    inset: auto !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;

    margin: 0;

    justify-self: center;
  }


  .twl-svc-complex-map__status {
    display: none;
  }


  .twl-svc-complex-scenarios__list {
    gap:
      0
      50px;
  }


  .twl-svc-complex-scenario:nth-child(even) {
    transform: none;
  }


  .twl-svc-complex-directions__scene {
    min-height: 0;

    padding:
      34px;
  }


  .twl-svc-complex-directions__core {
    position: relative;

    left: auto;
    top: auto;

    transform: none;

    margin:
      0
      auto
      42px;
  }


  .twl-svc-complex-directions__grid {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 18px;

    height: auto;
  }


  .twl-svc-complex-direction {
    position: relative;

    inset: auto;

    width: auto;

    min-height: 170px;
  }


  .twl-svc-complex-included__layout {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .twl-svc-complex-process__list {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .twl-svc-complex-process__step:nth-child(2),
  .twl-svc-complex-process__step:nth-child(5) {
    transform: none;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .twl-svc-complex-scenarios__list,
  .twl-svc-complex-directions__grid,
  .twl-svc-complex-included__layout,
  .twl-svc-complex-process__list,
  .twl-svc-complex-navigation__grid {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .twl-svc-complex-scenario {
    min-height: 0;
  }


  .twl-svc-complex-scenario__meta {
    margin-bottom: 28px;
  }


  .twl-svc-complex-hero-map,
  .twl-svc-complex-architecture {
    width: 100%;

    padding:
      34px
      18px;

    row-gap: 30px;

    border-radius: 20px;
  }


  .twl-svc-complex-core {
    width:
      min(100%, 190px);
  }


  .twl-svc-complex-node,
  .twl-svc-complex-architecture-node {
    min-width: 116px;
    max-width: 180px;

    min-height: 56px;
  }


  .twl-svc-complex-directions__scene,
  .twl-svc-complex-navigation__scene {
    padding:
      24px
      18px;

    border-radius: 22px;
  }


  .twl-svc-complex-process__step {
    min-height: 170px;
  }


  .twl-svc-complex-process__step strong {
    margin-top: 48px;
  }

}
/* =========================================================
   COMPLEX PROJECTS
   "WHAT CAN BE COMBINED" — SYSTEM MAP REBUILD
   ========================================================= */


/* =========================================================
   SCENE
   ========================================================= */

.twl-svc--complex
.twl-svc-complex-directions__scene {
  position: relative;

  overflow: hidden;
  overflow-anchor: none;

  width: 100%;
  height: 590px;
  min-height: 590px;

  padding: 0;

  border:
    1px solid
    rgba(151, 160, 255, 0.16);

  border-radius: 30px;

  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(119, 104, 255, 0.105),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(10, 13, 29, 0.98),
      rgba(5, 7, 17, 0.99)
    );
}


/*
 * Старый grid-wrapper превращаем
 * в абсолютный слой карты.
 */

.twl-svc--complex
.twl-svc-complex-directions__grid {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;
}


/* =========================================================
   LINKS
   ========================================================= */

.twl-svc-complex-directions__links {
  position: absolute;

  inset: 0;

  z-index: 1;

  width: 100%;
  height: 100%;

  overflow: hidden;

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 180ms ease;
}


.twl-svc-complex-directions__scene.is-links-ready
.twl-svc-complex-directions__links {
  opacity: 1;
}


.twl-svc-complex-directions__link {
  fill: none;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect:
    non-scaling-stroke;
}


.twl-svc-complex-directions__link--primary {
  stroke:
    rgba(164, 154, 255, 0.76);

  stroke-width: 1.4;

  filter:
    drop-shadow(
      0
      0
      5px
      rgba(119, 104, 255, 0.11)
    );
}


.twl-svc-complex-directions__link--secondary {
  stroke:
    rgba(105, 116, 165, 0.44);

  stroke-width: 1.05;
}


/* =========================================================
   CORE
   ========================================================= */

.twl-svc--complex
.twl-svc-complex-directions__core {
  position: absolute;

  z-index: 4;

  left: 50%;
  top: 49%;

  width: 226px;
  min-height: 138px;

  margin: 0;

  padding:
    24px
    26px;

  /*
   * НЕ используем transform.
   *
   * Reveal использует transform для анимации,
   * поэтому центрирование делаем через translate.
   */
  transform: none;

  translate:
    -50%
    -50%;

  border:
    1px solid
    rgba(151, 140, 255, 0.62);

  border-radius: 22px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(119, 104, 255, 0.17),
      transparent 62%
    ),
    linear-gradient(
      145deg,
      rgba(27, 29, 61, 0.99),
      rgba(10, 13, 30, 0.99)
    );

  box-shadow:
    0
    22px
    70px
    rgba(61, 53, 151, 0.16);

  text-align: center;
}


.twl-svc--complex
.twl-svc-complex-directions__core > span {
  display: block;

  color:
    rgba(187, 194, 255, 0.48);

  font-size: 8px;

  letter-spacing: 0.08em;
}


.twl-svc--complex
.twl-svc-complex-directions__core > strong {
  display: block;

  margin:
    13px
    0
    9px;

  color:
    var(--twl-svc-text);

  font-size: 20px;

  font-weight: 600;

  line-height: 1.2;
}


.twl-svc--complex
.twl-svc-complex-directions__core > small {
  display: block;

  color:
    var(--twl-svc-muted);

  font-size: 9px;

  line-height: 1.45;
}


/* =========================================================
   DIRECTION NODES
   ========================================================= */

.twl-svc--complex
.twl-svc-complex-direction {
  position: absolute;

  z-index: 3;

  width: 230px;
  min-height: 130px;

  padding:
    18px
    20px;

  border:
    1px solid
    rgba(151, 160, 255, 0.15);

  border-radius: 17px;

  background:
    linear-gradient(
      145deg,
      rgba(11, 14, 31, 0.92),
      rgba(7, 9, 21, 0.92)
    );

  box-shadow:
    0
    16px
    38px
    rgba(0, 0, 0, 0.08);

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}


.twl-svc--complex
.twl-svc-complex-direction:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(151, 140, 255, 0.36);

  background:
    linear-gradient(
      145deg,
      rgba(17, 20, 42, 0.96),
      rgba(8, 10, 24, 0.96)
    );
}


.twl-svc--complex
.twl-svc-complex-direction__meta {
  display: flex;

  justify-content: space-between;

  gap: 14px;

  margin: 0 0 22px;
}


.twl-svc--complex
.twl-svc-complex-direction__meta span,
.twl-svc--complex
.twl-svc-complex-direction__meta small {
  color:
    rgba(187, 194, 255, 0.42);

  font-size: 7px;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.twl-svc--complex
.twl-svc-complex-direction h3 {
  margin:
    0
    0
    9px;

  color:
    var(--twl-svc-text);

  font-size: 16px;

  font-weight: 600;

  line-height: 1.25;
}


.twl-svc--complex
.twl-svc-complex-direction p {
  margin: 0;

  color:
    var(--twl-svc-muted);

  font-size: 11px;

  line-height: 1.55;
}


/* =========================================================
   DESKTOP POSITIONS
   ========================================================= */

@media (min-width: 1025px) {

  /*
   * Верхний ряд
   */

  .twl-svc--complex
  .twl-svc-complex-direction--development {
    left: 5%;
    right: auto;

    top: 10%;
    bottom: auto;
  }


  .twl-svc--complex
  .twl-svc-complex-direction--crm {
    left: 50%;
    right: auto;

    top: 6%;
    bottom: auto;

    translate:
      -50%
      0;
  }


  .twl-svc--complex
  .twl-svc-complex-direction--api {
    left: auto;
    right: 5%;

    top: 10%;
    bottom: auto;
  }


  /*
   * Средний ряд
   */

  .twl-svc--complex
  .twl-svc-complex-direction--design {
    left: 5%;
    right: auto;

    top: 48%;
    bottom: auto;
  }


  .twl-svc--complex
  .twl-svc-complex-direction--telephony {
    left: auto;
    right: 5%;

    top: 48%;
    bottom: auto;
  }


  /*
   * Нижний ряд
   */

  .twl-svc--complex
  .twl-svc-complex-direction--infrastructure {
    left: 22%;
    right: auto;

    top: auto;
    bottom: 3%;
  }


  .twl-svc--complex
  .twl-svc-complex-direction--analytics {
    left: auto;
    right: 22%;

    top: auto;
    bottom: 3%;
  }

}


/* =========================================================
   STATUS
   ========================================================= */

.twl-svc-complex-directions__status {
  position: absolute;

  z-index: 3;

  left: 50%;
  bottom: 5%;

  translate:
    -50%
    0;

  display: flex;

  align-items: center;

  gap: 8px;

  padding:
    8px
    11px;

  border:
    1px solid
    rgba(151, 160, 255, 0.10);

  border-radius: 9px;

  background:
    rgba(7, 9, 22, 0.90);
}


.twl-svc-complex-directions__status span {
  color:
    var(--twl-svc-muted);

  font-size: 7px;
}


.twl-svc-complex-directions__status strong {
  color:
    var(--twl-svc-secondary);

  font-size: 9px;

  font-weight: 600;
}


.twl-svc-complex-directions__status i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--twl-svc-blue);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

  .twl-svc--complex
  .twl-svc-complex-directions__scene {
    height: auto;
    min-height: 0;

    padding:
      32px;
  }


  .twl-svc-complex-directions__links {
    display: none;
  }


  .twl-svc--complex
  .twl-svc-complex-directions__core {
    position: relative;

    left: auto;
    top: auto;

    translate: none;

    width:
      min(100%, 240px);

    margin:
      0
      auto
      40px;
  }


  .twl-svc--complex
  .twl-svc-complex-directions__grid {
    position: relative;

    inset: auto;

    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 16px;

    height: auto;
  }


  .twl-svc--complex
  .twl-svc-complex-direction,
  .twl-svc--complex
  .twl-svc-complex-direction:nth-child(n) {
    position: relative;

    inset: auto;

    left: auto;
    right: auto;
    top: auto;
    bottom: auto;

    translate: none;

    width: auto;

    min-height: 150px;
  }


  .twl-svc-complex-directions__status {
    display: none;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .twl-svc--complex
  .twl-svc-complex-directions__scene {
    padding:
      22px
      16px;

    border-radius: 22px;
  }


  .twl-svc--complex
  .twl-svc-complex-directions__core {
    min-height: 120px;

    padding:
      20px;

    margin-bottom: 28px;
  }


  .twl-svc--complex
  .twl-svc-complex-directions__grid {
    grid-template-columns:
      minmax(0, 1fr);

    gap: 12px;
  }


  .twl-svc--complex
  .twl-svc-complex-direction {
    min-height: 0;

    padding:
      18px;
  }


  .twl-svc--complex
  .twl-svc-complex-direction__meta {
    margin-bottom: 18px;
  }

}

/* =========================================================
   COMPLEX PROJECTS
   HERO MOBILE FLOW FIX
   ========================================================= */

@media (max-width: 1024px) {

  .twl-svc-complex-hero-map {
    row-gap: 42px;
  }


  .twl-svc-complex-core {
    margin-bottom: 4px;
  }


  .twl-svc-complex-node {
    margin:
      0
      auto;
  }

}


@media (max-width: 767px) {

  .twl-svc-complex-hero-map {
    row-gap: 36px;

    padding-top: 32px;
    padding-bottom: 36px;
  }

}
/* =========================================================
   COMPLEX PROJECTS
   PROCESS GRID — REFINEMENT
   ========================================================= */


/* =========================================================
   DESKTOP
   3 × 2 process grid
   ========================================================= */

@media (min-width: 1025px) {

  /* -------------------------------------------------------
     Heading -> grid rhythm
     ------------------------------------------------------- */

  .twl-svc--complex
  .twl-svc-complex-process
  .twl-svc__section-head {
    margin-bottom: 64px;
  }


  /* -------------------------------------------------------
     GRID
     ------------------------------------------------------- */

  .twl-svc--complex
  .twl-svc-complex-process__list {
    display: grid;

    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap: 24px;

    margin: 0;
    padding: 0;

    list-style: none;
  }


  /* -------------------------------------------------------
     CARD
     ------------------------------------------------------- */

  .twl-svc--complex
  .twl-svc-complex-process__step,
  .twl-svc--complex
  .twl-svc-complex-process__step:nth-child(n) {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 214px;

    margin: 0;

    padding:
      30px
      30px
      28px;

    transform: none;

    overflow: hidden;

    border:
      1px solid
      rgba(151, 160, 255, 0.18);

    border-radius: 22px;

    background:
      rgba(8, 11, 25, 0.54);

    transition:
      transform 180ms ease,
      border-color 180ms ease,
      background 180ms ease;
  }


  /* -------------------------------------------------------
     NUMBER + PROCESS MARKER
     ------------------------------------------------------- */

  .twl-svc--complex
  .twl-svc-complex-process__step > span {
    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

    margin: 0;

    color:
      rgba(187, 194, 255, 0.66);

    font-size: 13px;
    font-weight: 500;
    line-height: 1;

    letter-spacing: 0.06em;
  }


  /*
   * Маленькая точка процесса.
   */

  .twl-svc--complex
  .twl-svc-complex-process__step > span::before {
    content: "";

    flex: 0 0 auto;

    width: 5px;
    height: 5px;

    margin-left: 14px;
    margin-right: 8px;

    border-radius: 50%;

    background:
      rgba(119, 104, 255, 0.58);

    box-shadow:
      0 0 0
      rgba(119, 104, 255, 0);

    transition:
      background 180ms ease,
      box-shadow 180ms ease;
  }


  /*
   * Короткая линия.
   * Не соединяем карточки между собой —
   * marker живёт только внутри каждой карточки.
   */

  .twl-svc--complex
  .twl-svc-complex-process__step > span::after {
    content: "";

    display: block;

    width: 54px;
    height: 1px;

    background:
      rgba(151, 160, 255, 0.15);

    transition:
      width 180ms ease,
      background 180ms ease;
  }


  /* -------------------------------------------------------
     TITLE
     ------------------------------------------------------- */

  .twl-svc--complex
  .twl-svc-complex-process__step strong {
    display: block;

    max-width: 360px;

    margin-top: auto;

    color:
      var(--twl-svc-text);

    font-size:
      clamp(27px, 1.75vw, 31px);

    font-weight: 600;

    line-height: 1.12;

    letter-spacing: -0.025em;
  }


  /*
   * Карточка 01 получает чуть больше
   * допустимой ширины текста, чтобы
   * заголовок по возможности занимал 2 строки,
   * а не 3.
   */

  .twl-svc--complex
  .twl-svc-complex-process__step:first-child strong {
    max-width: 390px;
  }


  /* -------------------------------------------------------
     HOVER
     ------------------------------------------------------- */

  .twl-svc--complex
  .twl-svc-complex-process__step:hover {
    transform:
      translateY(-2px);

    border-color:
      rgba(151, 140, 255, 0.34);

    background:
      rgba(15, 17, 36, 0.72);
  }


  .twl-svc--complex
  .twl-svc-complex-process__step:hover > span {
    color:
      rgba(199, 202, 255, 0.90);
  }


  .twl-svc--complex
  .twl-svc-complex-process__step:hover > span::before {
    background:
      rgba(137, 123, 255, 0.95);

    box-shadow:
      0 0 10px
      rgba(119, 104, 255, 0.20);
  }


  .twl-svc--complex
  .twl-svc-complex-process__step:hover > span::after {
    width: 64px;

    background:
      rgba(151, 140, 255, 0.34);
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

  .twl-svc--complex
  .twl-svc-complex-process
  .twl-svc__section-head {
    margin-bottom: 54px;
  }


  .twl-svc--complex
  .twl-svc-complex-process__list {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 18px;

    margin: 0;
    padding: 0;

    list-style: none;
  }


  .twl-svc--complex
  .twl-svc-complex-process__step,
  .twl-svc--complex
  .twl-svc-complex-process__step:nth-child(n) {
    display: flex;
    flex-direction: column;

    min-height: 190px;

    margin: 0;

    padding: 26px;

    transform: none;

    border:
      1px solid
      rgba(151, 160, 255, 0.18);

    border-radius: 20px;

    background:
      rgba(8, 11, 25, 0.54);
  }


  .twl-svc--complex
  .twl-svc-complex-process__step > span {
    display: flex;

    align-items: center;

    color:
      rgba(187, 194, 255, 0.64);

    font-size: 12px;
  }


  .twl-svc--complex
  .twl-svc-complex-process__step > span::before {
    content: "";

    width: 5px;
    height: 5px;

    margin-left: 12px;
    margin-right: 7px;

    border-radius: 50%;

    background:
      rgba(119, 104, 255, 0.65);
  }


  .twl-svc--complex
  .twl-svc-complex-process__step > span::after {
    content: "";

    width: 46px;
    height: 1px;

    background:
      rgba(151, 160, 255, 0.16);
  }


  .twl-svc--complex
  .twl-svc-complex-process__step strong {
    max-width: 320px;

    margin-top: auto;

    font-size: 25px;

    line-height: 1.14;

    letter-spacing: -0.02em;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .twl-svc--complex
  .twl-svc-complex-process
  .twl-svc__section-head {
    margin-bottom: 38px;
  }


  .twl-svc--complex
  .twl-svc-complex-process__list {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr);

    gap: 14px;

    margin: 0;
    padding: 0;

    list-style: none;
  }


  .twl-svc--complex
  .twl-svc-complex-process__step,
  .twl-svc--complex
  .twl-svc-complex-process__step:nth-child(n) {
    display: flex;
    flex-direction: column;

    min-height: 158px;

    margin: 0;

    padding:
      22px
      22px
      24px;

    transform: none;

    border:
      1px solid
      rgba(151, 160, 255, 0.18);

    border-radius: 18px;

    background:
      rgba(8, 11, 25, 0.54);
  }


  .twl-svc--complex
  .twl-svc-complex-process__step > span {
    display: flex;

    align-items: center;

    width: 100%;

    color:
      rgba(187, 194, 255, 0.66);

    font-size: 11px;

    line-height: 1;
  }


  .twl-svc--complex
  .twl-svc-complex-process__step > span::before {
    content: "";

    flex:
      0
      0
      auto;

    width: 4px;
    height: 4px;

    margin-left: 10px;
    margin-right: 7px;

    border-radius: 50%;

    background:
      rgba(119, 104, 255, 0.72);
  }


  .twl-svc--complex
  .twl-svc-complex-process__step > span::after {
    content: "";

    display: block;

    width: 38px;
    height: 1px;

    background:
      rgba(151, 160, 255, 0.16);
  }


  .twl-svc--complex
  .twl-svc-complex-process__step strong {
    max-width: 290px;

    margin-top: auto;

    font-size:
      clamp(20px, 6.2vw, 24px);

    line-height: 1.15;

    letter-spacing: -0.02em;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .twl-svc--complex
  .twl-svc-complex-process__step,

  .twl-svc--complex
  .twl-svc-complex-process__step > span::before,

  .twl-svc--complex
  .twl-svc-complex-process__step > span::after {
    transition: none;
  }


  .twl-svc--complex
  .twl-svc-complex-process__step:hover {
    transform: none;
  }

}

/* =========================================================
   SERVICES HUB
   Template: services-main.php
   ========================================================= */

.twl-services-hub {
  --twl-hub-surface:
    rgba(9, 12, 27, 0.72);

  --twl-hub-surface-strong:
    rgba(13, 16, 34, 0.92);

  --twl-hub-border:
    rgba(151, 160, 255, 0.14);

  --twl-hub-border-active:
    rgba(151, 140, 255, 0.38);

  position: relative;

  overflow: clip;

  background:
    #050711;
}


/* =========================================================
   GENERIC
   ========================================================= */

.twl-services-hub
.twl-hub-section {
  position: relative;

  padding:
    clamp(112px, 9vw, 148px)
    0;
}


.twl-services-hub
.twl-hub-section--cta {
  padding-top:
    clamp(132px, 10vw, 170px);

  padding-bottom:
    clamp(86px, 7vw, 112px);
}


.twl-services-hub
.twl-hub-section__header {
  max-width: 830px;

  margin-bottom:
    clamp(52px, 6vw, 82px);
}


.twl-services-hub
.twl-hub__title {
  max-width: 900px;

  margin:
    0;

  color:
    var(--twl-svc-text);

  font-size:
    clamp(38px, 4vw, 62px);

  font-weight: 600;

  line-height: 1.03;

  letter-spacing:
    -0.045em;

  text-wrap:
    balance;
}


.twl-services-hub
.twl-hub__lead {
  max-width: 760px;

  margin:
    24px
    0
    0;

  color:
    var(--twl-svc-secondary);

  font-size:
    clamp(15px, 1.25vw, 18px);

  line-height:
    1.75;
}


.twl-services-hub
#directions {
  scroll-margin-top:
    100px;
}


/* =========================================================
   HERO
   ========================================================= */

.twl-hub-hero {
  position: relative;

  overflow: hidden;

  padding:
    clamp(92px, 8vw, 132px)
    0
    clamp(116px, 9vw, 154px);

  background:
    radial-gradient(
      circle at 88% 22%,
      rgba(91, 86, 212, 0.16),
      transparent 35%
    ),
    linear-gradient(
      180deg,
      #070916,
      #050711
    );
}


.twl-hub-hero__ambient {
  position: absolute;

  right: -10%;
  top: -18%;

  width: 56vw;
  height: 56vw;

  border-radius: 50%;

  background:
    rgba(119, 104, 255, 0.08);

  filter:
    blur(160px);

  pointer-events: none;
}


.twl-hub-hero__layout {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 0.88fr)
    minmax(560px, 1.12fr);

  align-items:
    center;

  gap:
    clamp(52px, 6vw, 94px);
}


.twl-hub-hero__title {
  max-width: 710px;

  margin:
    0;

  color:
    var(--twl-svc-text);

  font-size:
    clamp(48px, 5vw, 78px);

  font-weight: 600;

  line-height: 1.01;

  letter-spacing:
    -0.055em;

  text-wrap:
    balance;
}


.twl-hub-hero__lead {
  max-width: 690px;

  margin:
    32px
    0
    0;

  color:
    var(--twl-svc-secondary);

  font-size:
    clamp(16px, 1.35vw, 20px);

  line-height:
    1.72;
}


.twl-hub-hero__actions {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap:
    24px;

  margin-top:
    34px;
}


.twl-hub-hero__secondary {
  display: inline-flex;

  align-items: center;

  gap:
    8px;

  min-height:
    46px;

  color:
    var(--twl-svc-secondary);

  font-size:
    14px;

  font-weight:
    600;

  text-decoration:
    none;

  transition:
    color 180ms ease;
}


.twl-hub-hero__secondary span {
  transition:
    transform 180ms ease;
}


.twl-hub-hero__secondary:hover,
.twl-hub-hero__secondary:focus-visible {
  color:
    var(--twl-svc-text);
}


.twl-hub-hero__secondary:hover span,
.twl-hub-hero__secondary:focus-visible span {
  transform:
    translate(3px, -2px);
}


.twl-hub-hero__microcopy {
  max-width: 580px;

  margin:
    22px
    0
    0;

  color:
    var(--twl-svc-muted);

  font-size:
    12px;

  line-height:
    1.6;
}


/* =========================================================
   HERO CONSTELLATION
   ========================================================= */

.twl-hub-hero-map {
  position: relative;

  min-height:
    570px;

  overflow:
    hidden;

  overflow-anchor:
    none;

  border:
    1px solid
    rgba(151, 160, 255, 0.17);

  border-radius:
    30px;

  background:
    radial-gradient(
      circle at 50% 49%,
      rgba(119, 104, 255, 0.10),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(11, 14, 31, 0.98),
      rgba(6, 8, 18, 0.99)
    );
}


.twl-hub-hero-map__grid,
.twl-hub-complex-map__grid {
  position: absolute;

  inset: 0;

  opacity: 0.16;

  background-image:
    linear-gradient(
      rgba(151, 160, 255, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(151, 160, 255, 0.045) 1px,
      transparent 1px
    );

  background-size:
    48px 48px;

  -webkit-mask-image:
    radial-gradient(
      circle at center,
      #000,
      transparent 77%
    );

  mask-image:
    radial-gradient(
      circle at center,
      #000,
      transparent 77%
    );

  pointer-events:
    none;
}


.twl-hub-hero-map__glow,
.twl-hub-complex-map__glow {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 470px;
  height: 330px;

  transform:
    translate(-50%, -50%);

  border-radius:
    50%;

  background:
    rgba(119, 104, 255, 0.07);

  filter:
    blur(105px);

  pointer-events:
    none;
}


.twl-hub-hero-map__links,
.twl-hub-complex-map__links {
  position: absolute;

  inset: 0;

  z-index: 1;

  width: 100%;
  height: 100%;

  opacity: 0;

  overflow: hidden;

  pointer-events:
    none;

  transition:
    opacity 180ms ease;
}


.twl-hub-hero-map.is-links-ready
.twl-hub-hero-map__links,
.twl-hub-complex-map.is-links-ready
.twl-hub-complex-map__links {
  opacity: 1;
}


.twl-hub-hero-map__link,
.twl-hub-complex-map__link {
  fill: none;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  vector-effect:
    non-scaling-stroke;
}


.twl-hub-hero-map__link--primary,
.twl-hub-complex-map__link--primary {
  stroke:
    rgba(164, 154, 255, 0.88);

  stroke-width:
    1.5;

  filter:
    drop-shadow(
      0 0 5px
      rgba(119, 104, 255, 0.12)
    );
}


.twl-hub-hero-map__link--secondary,
.twl-hub-complex-map__link--secondary {
  stroke:
    rgba(105, 116, 165, 0.46);

  stroke-width:
    1.05;
}


.twl-hub-hero-map__core {
  position: absolute;

  z-index: 3;

  left: 50%;
  top: 49%;

  width: 180px;
  min-height: 110px;

  padding:
    20px;

  translate:
    -50%
    -50%;

  border:
    1px solid
    rgba(151, 140, 255, 0.58);

  border-radius:
    20px;

  background:
    linear-gradient(
      145deg,
      rgba(27, 29, 62, 0.99),
      rgba(10, 13, 30, 0.99)
    );

  box-shadow:
    0 20px 68px
    rgba(62, 53, 152, 0.17);

  text-align:
    center;
}


.twl-hub-hero-map__core span,
.twl-hub-hero-map__core small {
  display: block;

  color:
    var(--twl-svc-muted);

  font-size:
    8px;
}


.twl-hub-hero-map__core strong {
  display: block;

  margin:
    10px 0 6px;

  color:
    var(--twl-svc-text);

  font-size:
    20px;

  font-weight:
    600;
}


.twl-hub-hero-map__node,
.twl-hub-complex-map__node {
  position: absolute;

  z-index: 2;

  width:
    max-content;

  min-width:
    124px;

  max-width:
    174px;

  min-height:
    60px;

  padding:
    10px 12px;

  border:
    1px solid
    rgba(151, 160, 255, 0.17);

  border-radius:
    11px;

  background:
    rgba(7, 10, 23, 0.97);
}


.twl-hub-hero-map__node::after,
.twl-hub-complex-map__node::after {
  content: "";

  position: absolute;

  top: 10px;
  right: 10px;

  width: 5px;
  height: 5px;

  border-radius:
    50%;

  background:
    var(--twl-svc-blue);
}


.twl-hub-hero-map__node span,
.twl-hub-complex-map__node span,
.twl-hub-complex-map__node small {
  display: block;

  color:
    var(--twl-svc-muted);

  font:
    500 7px/1.35
    "IBM Plex Mono",
    monospace;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;
}


.twl-hub-hero-map__node strong,
.twl-hub-complex-map__node strong {
  display: block;

  margin-top:
    5px;

  color:
    var(--twl-svc-text);

  font-size:
    11px;

  font-weight:
    600;

  line-height:
    1.25;
}


.twl-hub-hero-map__node--design {
  left: 5%;
  top: 14%;
}


.twl-hub-hero-map__node--web {
  left: 35%;
  top: 7%;
}


.twl-hub-hero-map__node--seo {
  right: 5%;
  top: 15%;
}


.twl-hub-hero-map__node--crm {
  right: 4%;
  top: 44%;
}


.twl-hub-hero-map__node--api {
  right: 18%;
  bottom: 8%;
}


.twl-hub-hero-map__node--telephony {
  left: 45%;
  bottom: 5%;
}


.twl-hub-hero-map__node--infrastructure {
  left: 16%;
  bottom: 9%;
}


.twl-hub-hero-map__node--security {
  left: 4%;
  top: 52%;
}


.twl-hub-hero-map__status,
.twl-hub-complex-map__status {
  position: absolute;

  z-index: 2;

  left: 5%;
  bottom: 5%;

  padding:
    9px 11px;

  border:
    1px solid
    rgba(151, 160, 255, 0.10);

  border-radius:
    9px;

  background:
    rgba(7, 9, 22, 0.92);
}


.twl-hub-hero-map__status span,
.twl-hub-complex-map__status span {
  display: block;

  color:
    var(--twl-svc-muted);

  font-size:
    7px;
}


.twl-hub-hero-map__status strong,
.twl-hub-complex-map__status strong {
  color:
    var(--twl-svc-secondary);

  font-size:
    9px;

  font-weight:
    600;
}


.twl-hub-hero-map__status i,
.twl-hub-complex-map__status i {
  display: inline-block;

  width: 5px;
  height: 5px;

  margin-left:
    5px;

  border-radius:
    50%;

  background:
    var(--twl-svc-blue);
}


/* =========================================================
   DIGITAL SYSTEM
   ========================================================= */

.twl-hub-system__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 0.78fr)
    minmax(0, 1.22fr);

  align-items:
    start;

  gap:
    clamp(64px, 8vw, 124px);
}


.twl-hub-system__content {
  position: sticky;

  top: 120px;
}


.twl-hub-system__statement {
  max-width: 620px;

  margin:
    42px 0 0;

  padding-top:
    24px;

  border-top:
    1px solid
    var(--twl-hub-border);

  color:
    var(--twl-svc-text);

  font-size:
    clamp(17px, 1.45vw, 21px);

  font-weight:
    500;

  line-height:
    1.55;
}


.twl-hub-system-map {
  display: grid;

  gap:
    18px;
}


.twl-hub-system-layer {
  position: relative;

  padding:
    26px 28px;

  border:
    1px solid
    var(--twl-hub-border);

  border-radius:
    22px;

  background:
    linear-gradient(
      145deg,
      rgba(11, 14, 30, 0.78),
      rgba(7, 9, 20, 0.64)
    );

  transition:
    border-color 180ms ease,
    background 180ms ease;
}


.twl-hub-system-layer:not(:last-child)::after {
  content: "↓";

  position: absolute;

  left: 50%;
  bottom: -19px;

  z-index: 3;

  translate:
    -50%
    50%;

  color:
    rgba(164, 154, 255, 0.55);

  font-size:
    13px;
}


.twl-hub-system-layer:hover {
  border-color:
    rgba(151, 140, 255, 0.30);

  background:
    rgba(14, 17, 36, 0.76);
}


.twl-hub-system-layer__header > div {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;
}


.twl-hub-system-layer__header span,
.twl-hub-system-layer__header small {
  color:
    rgba(187, 194, 255, 0.46);

  font-size:
    7px;

  text-transform:
    uppercase;
}


.twl-hub-system-layer h3 {
  margin:
    18px 0 0;

  color:
    var(--twl-svc-text);

  font-size:
    clamp(22px, 2vw, 30px);

  font-weight:
    600;

  line-height:
    1.15;
}


.twl-hub-system-layer p {
  max-width: 690px;

  margin:
    13px 0 0;

  color:
    var(--twl-svc-muted);

  font-size:
    13px;

  line-height:
    1.65;
}


.twl-hub-system-layer__nodes {
  display: flex;

  flex-wrap: wrap;

  gap:
    8px;

  margin-top:
    24px;
}


.twl-hub-system-layer__nodes span {
  display: inline-flex;

  align-items: center;

  min-height:
    34px;

  padding:
    0 12px;

  border:
    1px solid
    rgba(151, 160, 255, 0.12);

  border-radius:
    9px;

  color:
    var(--twl-svc-secondary);

  background:
    rgba(6, 8, 19, 0.70);

  font-size:
    10px;
}


/* =========================================================
   DIRECTIONS
   ========================================================= */

.twl-hub-directions::before {
  content: "";

  position: absolute;

  inset:
    8%
    -15%
    4%;

  background:
    radial-gradient(
      circle at 55% 44%,
      rgba(119, 104, 255, 0.055),
      transparent 48%
    );

  pointer-events:
    none;
}


.twl-hub-directions__groups {
  position: relative;

  z-index: 2;

  display: grid;

  gap:
    clamp(64px, 6vw, 92px);
}


.twl-hub-service-group__label {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

  margin-bottom:
    20px;

  padding-bottom:
    14px;

  border-bottom:
    1px solid
    rgba(151, 160, 255, 0.12);
}


.twl-hub-service-group__label span {
  color:
    rgba(187, 194, 255, 0.43);

  font-size:
    8px;

  text-transform:
    uppercase;
}


.twl-hub-service-group__label p {
  margin: 0;

  color:
    var(--twl-svc-muted);

  font-size:
    11px;
}


.twl-hub-service-grid {
  display: grid;

  grid-template-columns:
    repeat(12, minmax(0, 1fr));

  gap:
    18px;
}


.twl-hub-service-card {
  position: relative;

  display: flex;

  flex-direction:
    column;

  min-width: 0;

  min-height:
    350px;

  padding:
    26px;

  overflow: hidden;

  border:
    1px solid
    var(--twl-hub-border);

  border-radius:
    24px;

  color:
    inherit;

  background:
    linear-gradient(
      145deg,
      rgba(12, 15, 32, 0.86),
      rgba(7, 9, 20, 0.82)
    );

  text-decoration:
    none;

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}


.twl-hub-service-card:hover,
.twl-hub-service-card:focus-visible {
  transform:
    translateY(-2px);

  border-color:
    var(--twl-hub-border-active);

  background:
    linear-gradient(
      145deg,
      rgba(18, 21, 45, 0.94),
      rgba(8, 10, 24, 0.90)
    );

  outline:
    none;
}


.twl-hub-service-card--web {
  grid-column:
    span 6;
}


.twl-hub-service-card--design,
.twl-hub-service-card--seo {
  grid-column:
    span 3;
}


.twl-hub-service-card--crm {
  grid-column:
    span 5;
}


.twl-hub-service-card--api {
  grid-column:
    span 4;
}


.twl-hub-service-card--telephony {
  grid-column:
    span 3;
}


.twl-hub-service-card--infrastructure,
.twl-hub-service-card--security {
  grid-column:
    span 6;
}


.twl-hub-service-card__top {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 20px;
}


.twl-hub-service-card__number {
  color:
    rgba(187, 194, 255, 0.52);

  font-size:
    9px;
}


.twl-hub-service-card h3 {
  max-width:
    460px;

  margin:
    48px
    0
    0;

  color:
    var(--twl-svc-text);

  font-size:
    clamp(24px, 2vw, 34px);

  font-weight:
    600;

  line-height:
    1.1;

  letter-spacing:
    -0.035em;
}


.twl-hub-service-card__description {
  max-width:
    620px;

  margin:
    16px
    0
    0;

  color:
    var(--twl-svc-muted);

  font-size:
    13px;

  line-height:
    1.68;
}


.twl-hub-service-card__tags {
  display: flex;

  flex-wrap: wrap;

  gap:
    7px;

  margin-top:
    24px;
}


.twl-hub-service-card__tags span {
  display: inline-flex;

  align-items: center;

  min-height:
    30px;

  padding:
    0 9px;

  border:
    1px solid
    rgba(151, 160, 255, 0.11);

  border-radius:
    8px;

  color:
    rgba(183, 189, 216, 0.74);

  background:
    rgba(5, 7, 17, 0.40);

  font-size:
    9px;
}


.twl-hub-service-card__link {
  display: flex;

  align-items: center;

  gap:
    8px;

  margin-top:
    auto;

  padding-top:
    28px;

  color:
    var(--twl-svc-lavender);

  font-size:
    12px;

  font-weight:
    600;
}


.twl-hub-service-card__link i {
  font-style: normal;

  transition:
    transform 180ms ease;
}


.twl-hub-service-card:hover
.twl-hub-service-card__link i,
.twl-hub-service-card:focus-visible
.twl-hub-service-card__link i {
  transform:
    translateX(4px);
}
/* =========================================================
   SERVICES HUB
   TECHNICAL SVG GLYPHS
   ========================================================= */


/* =========================================================
   CONTAINER
   ========================================================= */

.twl-services-hub
.twl-hub-service-card__glyph {
  display: block;

  flex:
    0
    0
    auto;

  width: 76px;
  height: 50px;

  color:
    rgba(137, 129, 225, 0.58);

  opacity: 1;
}


/*
 * Featured service получает
 * немного большую площадь glyph,
 * но тот же viewBox и визуальную систему.
 */

.twl-services-hub
.twl-hub-service-card.is-featured
.twl-hub-service-card__glyph {
  width: 84px;
  height: 56px;
}


/* =========================================================
   SVG
   ========================================================= */

.twl-services-hub
.twl-hub-service-glyph {
  display: block;

  width: 100%;
  height: 100%;

  overflow: visible;

  color: inherit;
}


/* =========================================================
   COMMON GEOMETRY
   ========================================================= */

.twl-services-hub
.twl-hub-service-glyph
.icon-secondary,

.twl-services-hub
.twl-hub-service-glyph
.icon-primary {
  fill: none;

  stroke:
    currentColor;

  stroke-width:
    1;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.twl-services-hub
.twl-hub-service-glyph
.icon-secondary > *,

.twl-services-hub
.twl-hub-service-glyph
.icon-primary > * {
  vector-effect:
    non-scaling-stroke;
}


/* =========================================================
   LEVEL 1 — SECONDARY
   ========================================================= */

.twl-services-hub
.twl-hub-service-glyph
.icon-secondary {
  color:
    rgba(137, 129, 225, 0.36);

  opacity:
    0.32;

  transition:
    color 200ms ease,
    opacity 200ms ease;
}


/* =========================================================
   LEVEL 2 — PRIMARY
   ========================================================= */

.twl-services-hub
.twl-hub-service-glyph
.icon-primary {
  color:
    rgba(150, 143, 237, 0.76);

  opacity:
    0.58;

  transition:
    color 200ms ease,
    opacity 200ms ease;
}


/* =========================================================
   LEVEL 3 — ACCENT MICRO NODE
   ========================================================= */

.twl-services-hub
.twl-hub-service-glyph
.icon-accent {
  fill:
    currentColor;

  stroke:
    none;

  color:
    rgba(128, 105, 255, 0.98);

  opacity:
    0.88;

  transform-box:
    fill-box;

  transform-origin:
    center;

  transition:
    color 200ms ease,
    opacity 200ms ease;
}


/* =========================================================
   CARD HOVER / KEYBOARD FOCUS
   ========================================================= */

.twl-services-hub
.twl-hub-service-card:hover
.twl-hub-service-glyph
.icon-secondary,

.twl-services-hub
.twl-hub-service-card:focus-visible
.twl-hub-service-glyph
.icon-secondary {
  color:
    rgba(150, 143, 237, 0.52);

  opacity:
    0.40;
}


.twl-services-hub
.twl-hub-service-card:hover
.twl-hub-service-glyph
.icon-primary,

.twl-services-hub
.twl-hub-service-card:focus-visible
.twl-hub-service-glyph
.icon-primary {
  color:
    rgba(165, 158, 255, 0.94);

  opacity:
    0.80;
}


.twl-services-hub
.twl-hub-service-card:hover
.twl-hub-service-glyph
.icon-accent,

.twl-services-hub
.twl-hub-service-card:focus-visible
.twl-hub-service-glyph
.icon-accent {
  color:
    rgba(139, 116, 255, 1);

  opacity:
    1;
}


/*
 * Геометрию SVG на hover не двигаем.
 * Иконка остаётся technical glyph,
 * а не animated UI icon.
 */

.twl-services-hub
.twl-hub-service-card:hover
.twl-hub-service-card__glyph,

.twl-services-hub
.twl-hub-service-card:focus-visible
.twl-hub-service-card__glyph {
  opacity: 1;

  transform: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .twl-services-hub
  .twl-hub-service-card__glyph {
    width: 60px;
    height: 40px;

    transform: none;
  }


  .twl-services-hub
  .twl-hub-service-card.is-featured
  .twl-hub-service-card__glyph {
    width: 64px;
    height: 43px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .twl-services-hub
  .twl-hub-service-glyph
  .icon-secondary,

  .twl-services-hub
  .twl-hub-service-glyph
  .icon-primary,

  .twl-services-hub
  .twl-hub-service-glyph
  .icon-accent {
    transition: none;
  }

}


/* =========================================================
   COMPLEX PROJECTS
   ========================================================= */

.twl-hub-complex {
  padding-top:
    clamp(144px, 11vw, 180px) !important;
}


.twl-hub-complex__panel {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 0.78fr)
    minmax(560px, 1.22fr);

  gap:
    clamp(54px, 6vw, 92px);

  align-items:
    center;

  padding:
    clamp(42px, 5vw, 72px);

  overflow: hidden;

  border:
    1px solid
    rgba(151, 160, 255, 0.17);

  border-radius:
    32px;

  background:
    radial-gradient(
      circle at 75% 42%,
      rgba(119, 104, 255, 0.13),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(15, 18, 39, 0.92),
      rgba(7, 9, 20, 0.96)
    );
}


.twl-hub-complex__content {
  position: relative;

  z-index: 2;
}


.twl-hub-complex__text {
  max-width: 640px;

  margin:
    22px 0 32px;

  color:
    var(--twl-svc-muted);

  font-size:
    14px;

  line-height:
    1.75;
}


.twl-hub-complex__caption {
  grid-column:
    2;

  max-width:
    670px;

  margin:
    -26px 0 0;

  color:
    var(--twl-svc-muted);

  font-size:
    10px;

  line-height:
    1.6;
}


/* =========================================================
   COMPLEX MAP
   ========================================================= */

.twl-hub-complex-map {
  position: relative;

  min-height:
    520px;

  overflow:
    hidden;

  overflow-anchor:
    none;

  border:
    1px solid
    rgba(151, 160, 255, 0.13);

  border-radius:
    26px;

  background:
    rgba(6, 8, 19, 0.60);
}


.twl-hub-complex-map__core {
  position: absolute;

  z-index: 3;

  left: 50%;
  top: 49%;

  width: 184px;

  padding:
    20px;

  translate:
    -50%
    -50%;

  border:
    1px solid
    rgba(151, 140, 255, 0.58);

  border-radius:
    19px;

  background:
    linear-gradient(
      145deg,
      rgba(27, 29, 60, 0.99),
      rgba(10, 13, 30, 0.99)
    );

  text-align:
    center;
}


.twl-hub-complex-map__core span,
.twl-hub-complex-map__core small {
  display: block;

  color:
    var(--twl-svc-muted);

  font-size:
    8px;
}


.twl-hub-complex-map__core strong {
  display: block;

  margin:
    10px 0 6px;

  color:
    var(--twl-svc-text);

  font-size:
    17px;

  font-weight:
    600;
}


.twl-hub-complex-map__node--site {
  left: 5%;
  top: 14%;
}


.twl-hub-complex-map__node--crm {
  left: 38%;
  top: 7%;
}


.twl-hub-complex-map__node--api {
  right: 6%;
  top: 14%;
}


.twl-hub-complex-map__node--telephony {
  right: 4%;
  top: 49%;
}


.twl-hub-complex-map__node--analytics {
  right: 18%;
  bottom: 7%;
}


.twl-hub-complex-map__node--infrastructure {
  left: 31%;
  bottom: 6%;
}


.twl-hub-complex-map__node--security {
  left: 4%;
  top: 57%;
}


/* =========================================================
   USE CASES
   ========================================================= */

.twl-hub-usecases__grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  column-gap:
    clamp(50px, 7vw, 104px);

  row-gap:
    28px;
}


.twl-hub-usecase {
  position: relative;

  min-width: 0;

  padding:
    30px
    0
    38px;

  border-top:
    1px solid
    rgba(151, 160, 255, 0.16);
}


.twl-hub-usecase__number {
  color:
    rgba(187, 194, 255, 0.48);

  font-size:
    9px;
}


.twl-hub-usecase h3 {
  max-width: 560px;

  margin:
    25px 0 0;

  color:
    var(--twl-svc-text);

  font-size:
    clamp(23px, 2vw, 31px);

  font-weight:
    600;

  line-height:
    1.16;

  letter-spacing:
    -0.03em;
}


.twl-hub-usecase__text {
  max-width: 620px;

  margin:
    16px 0 0;

  color:
    var(--twl-svc-muted);

  font-size:
    13px;

  line-height:
    1.68;
}


.twl-hub-usecase__flow {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap:
    8px;

  margin-top:
    26px;
}


.twl-hub-usecase__node {
  display: inline-flex;

  align-items: center;

  min-height:
    34px;

  padding:
    0 11px;

  border:
    1px solid
    rgba(151, 160, 255, 0.15);

  border-radius:
    9px;

  color:
    var(--twl-svc-secondary);

  background:
    rgba(9, 12, 27, 0.62);

  font-size:
    10px;
}


.twl-hub-usecase__arrow::before {
  content: "→";

  color:
    rgba(164, 154, 255, 0.68);

  font-size:
    12px;
}


.twl-hub-usecase__flow.is-bidirectional
.twl-hub-usecase__arrow::before {
  content: "↔";
}


.twl-hub-usecase__result {
  max-width: 620px;

  margin:
    24px 0 0;

  color:
    var(--twl-svc-secondary);

  font-size:
    12px;

  font-weight:
    500;

  line-height:
    1.55;
}


.twl-hub-usecases__closing {
  max-width: 830px;

  margin:
    66px 0 0;

  padding-top:
    28px;

  border-top:
    1px solid
    rgba(151, 160, 255, 0.12);

  color:
    var(--twl-svc-text);

  font-size:
    clamp(17px, 1.5vw, 21px);

  font-weight:
    500;

  line-height:
    1.55;
}


/* =========================================================
   CASES
   ========================================================= */

.twl-services-hub
.twl-hub-cases {
  background:
    transparent;
}


.twl-hub-cases__header {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: end;

  gap:
    40px;

  max-width:
    none !important;
}


.twl-hub-cases__header > div {
  max-width:
    820px;
}


.twl-hub-cases__archive {
  display: inline-flex;

  align-items: center;

  gap:
    8px;

  min-height:
    44px;

  color:
    var(--twl-svc-lavender);

  font-size:
    12px;

  font-weight:
    600;

  text-decoration:
    none;
}


.twl-hub-cases__archive span {
  transition:
    transform 180ms ease;
}


.twl-hub-cases__archive:hover span,
.twl-hub-cases__archive:focus-visible span {
  transform:
    translateX(4px);
}


.twl-hub-cases__grid {
  display: grid;

  grid-template-columns:
    minmax(0, 880px);

  align-items:
    stretch;
}


.twl-hub-cases__grid
.case-card {
  width: 100%;
}


/* =========================================================
   CTA
   ========================================================= */

.twl-hub-cta__box {
  min-height:
    clamp(360px, 34vw, 480px);
}


.twl-hub-cta__microcopy {
  max-width:
    620px;

  margin:
    22px 0 0;

  color:
    var(--twl-svc-muted);

  font-size:
    11px;

  line-height:
    1.6;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1200px) {

  .twl-hub-hero__layout {
    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(490px, 1.1fr);

    gap:
      44px;
  }


  .twl-hub-service-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .twl-hub-service-card,
  .twl-hub-service-card:nth-child(n) {
    grid-column:
      auto;
  }


  .twl-hub-complex__panel {
    grid-template-columns:
      minmax(0, 0.86fr)
      minmax(470px, 1.14fr);

    gap:
      42px;
  }

}


@media (max-width: 1024px) {

  .twl-services-hub
  .twl-hub-section {
    padding:
      96px 0;
  }


  /* -------------------------------------------------------
     HERO
     ------------------------------------------------------- */

  .twl-hub-hero__layout {
    display: block;
  }


  .twl-hub-hero__content {
    max-width:
      760px;
  }


  .twl-hub-hero-map {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      14px;

    width:
      min(100%, 700px);

    min-height:
      0;

    margin:
      56px auto 0;

    padding:
      34px;
  }


  .twl-hub-hero-map__links {
    display:
      none;
  }


  .twl-hub-hero-map__core,
  .twl-hub-hero-map__node {
    position: relative;

    inset: auto;

    left: auto;
    right: auto;
    top: auto;
    bottom: auto;

    translate: none;
  }


  .twl-hub-hero-map__core {
    grid-column:
      1 / -1;

    justify-self:
      center;

    margin-bottom:
      18px;
  }


  .twl-hub-hero-map__node {
    width: 100%;

    max-width: none;
  }


  .twl-hub-hero-map__status {
    display: none;
  }


  /* -------------------------------------------------------
     SYSTEM
     ------------------------------------------------------- */

  .twl-hub-system__layout {
    grid-template-columns:
      1fr;

    gap:
      54px;
  }


  .twl-hub-system__content {
    position: static;

    max-width:
      800px;
  }


  /* -------------------------------------------------------
     COMPLEX
     ------------------------------------------------------- */

  .twl-hub-complex__panel {
    display: block;

    padding:
      38px;
  }


  .twl-hub-complex__content {
    max-width:
      800px;
  }


  .twl-hub-complex-map {
    display: grid;

    grid-template-columns:
      1fr;

    justify-items:
      center;

    width:
      min(100%, 620px);

    min-height:
      0;

    margin:
      52px auto 0;

    padding:
      40px 30px;

    row-gap:
      36px;
  }


  .twl-hub-complex-map__core,
  .twl-hub-complex-map__node {
    position: relative;

    inset: auto;

    left: auto;
    right: auto;
    top: auto;
    bottom: auto;

    translate: none;

    justify-self:
      center;
  }


  .twl-hub-complex__caption {
    max-width:
      620px;

    margin:
      26px auto 0;

    text-align:
      center;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .twl-services-hub
  .twl-hub-section {
    padding:
      76px 0;
  }


  .twl-hub-hero {
    padding:
      70px 0 84px;
  }


  .twl-hub-hero__title {
    font-size:
      clamp(39px, 11vw, 54px);
  }


  .twl-hub-hero__lead {
    margin-top:
      24px;

    font-size:
      15px;
  }


  .twl-hub-hero__actions {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      13px;
  }


  .twl-hub-hero-map {
    padding:
      22px;

    gap:
      10px;

    border-radius:
      22px;
  }


  .twl-hub-hero-map__core {
    width:
      min(100%, 190px);
  }


  .twl-hub-hero-map__node {
    min-width: 0;

    min-height:
      56px;

    padding:
      9px 10px;
  }


  .twl-hub-hero-map__node strong {
    font-size:
      10px;
  }


  .twl-hub__title {
    font-size:
      clamp(34px, 9.2vw, 46px);
  }


  /* -------------------------------------------------------
     SYSTEM
     ------------------------------------------------------- */

  .twl-hub-system-map {
    gap:
      22px;
  }


  .twl-hub-system-layer {
    padding:
      22px 19px;
  }


  .twl-hub-system-layer__nodes {
    display: grid;

    grid-template-columns:
      1fr;

    gap:
      7px;
  }


  .twl-hub-system-layer__nodes span {
    justify-content:
      center;
  }


  /* -------------------------------------------------------
     SERVICES
     ------------------------------------------------------- */

  .twl-hub-service-grid {
    grid-template-columns:
      1fr;

    gap:
      12px;
  }


  .twl-hub-service-card {
    min-height:
      0;

    padding:
      22px;

    border-radius:
      19px;
  }


  .twl-hub-service-card h3 {
    margin-top:
      34px;

    font-size:
      26px;
  }


  .twl-hub-service-card__description {
    font-size:
      12px;
  }


  .twl-hub-service-card__glyph {
    width:
      66px;

    transform:
      scale(0.88);

    transform-origin:
      top right;
  }


  /* -------------------------------------------------------
     COMPLEX
     ------------------------------------------------------- */

  .twl-hub-complex {
    padding-top:
      92px !important;
  }


  .twl-hub-complex__panel {
    padding:
      26px 18px;

    border-radius:
      22px;
  }


  .twl-hub-complex-map {
    width: 100%;

    padding:
      30px 18px;

    row-gap:
      32px;

    border-radius:
      20px;
  }


  .twl-hub-complex-map__core {
    width:
      min(100%, 190px);
  }


  .twl-hub-complex-map__node {
    min-width:
      132px;

    max-width:
      180px;
  }


  /* -------------------------------------------------------
     USE CASES
     ------------------------------------------------------- */

  .twl-hub-usecases__grid {
    grid-template-columns:
      1fr;

    row-gap:
      8px;
  }


  .twl-hub-usecase {
    padding:
      26px 0 34px;
  }


  .twl-hub-usecase__flow {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      6px;
  }


  .twl-hub-usecase__arrow::before {
    content: "↓";
  }


  .twl-hub-usecase__flow.is-bidirectional
  .twl-hub-usecase__arrow::before {
    content: "↕";
  }


  /* -------------------------------------------------------
     CASE
     ------------------------------------------------------- */

  .twl-hub-cases__header {
    grid-template-columns:
      1fr;

    gap:
      26px;
  }


  .twl-hub-cases__grid {
    grid-template-columns:
      1fr;
  }


  /* -------------------------------------------------------
     CTA
     ------------------------------------------------------- */

  .twl-hub-cta__box {
    min-height: 0;
  }

}


/* =========================================================
   FOCUS
   ========================================================= */

.twl-hub-service-card:focus-visible,
.twl-hub-hero__secondary:focus-visible,
.twl-hub-cases__archive:focus-visible {
  outline:
    2px solid
    rgba(164, 154, 255, 0.70);

  outline-offset:
    3px;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .twl-hub-service-card,
  .twl-hub-service-card__link i,
  .twl-hub-hero__secondary span,
  .twl-hub-cases__archive span {
    transition: none;
  }


  .twl-hub-service-card:hover,
  .twl-hub-service-card:focus-visible {
    transform: none;
  }

}