:root{
  --bg:#070807;
  --bg-soft:#0b0d0b;
  --card:#101310;
  --card-2:#141814;

  --line:rgba(255,255,255,.08);
  --line-green:rgba(118,185,0,.28);

  --text:#f3f5f2;
  --muted:#979d97;

  --green:#76b900;
  --green-bright:#8bd600;

  --container:min(92vw,1240px);

  --ease:cubic-bezier(.22,1,.36,1);

  --radius:22px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  background:var(--bg);
}

body{
  margin:0;

  background:
    radial-gradient(
      circle at 80% 4%,
      rgba(118,185,0,.055),
      transparent 28%
    ),
    var(--bg);

  color:var(--text);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;

  -webkit-font-smoothing:
    antialiased;

  overflow-x:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

button{
  font:inherit;
}

img{
  max-width:100%;
}

.container{
  width:var(--container);
  margin:0 auto;
}

.section{
  position:relative;

  padding:
    clamp(58px,7vw,105px)
    0;
}


/* =========================================================
   HEADER
========================================================= */

header{
  position:fixed;

  top:0;
  left:0;

  z-index:100;

  width:100%;

  background:
    rgba(7,8,7,.78);

  backdrop-filter:
    blur(20px)
    saturate(140%);

  -webkit-backdrop-filter:
    blur(20px)
    saturate(140%);

  border-bottom:
    1px solid
    rgba(255,255,255,.05);
}

.nav{
  width:var(--container);

  height:58px;

  margin:auto;

  display:grid;

  grid-template-columns:
    auto 1fr auto;

  align-items:center;

  gap:20px;
}

.brand{
  display:flex;

  align-items:center;

  gap:9px;

  font-size:12px;

  font-weight:800;

  letter-spacing:.13em;
}

.brand-mark{
  position:relative;

  width:26px;
  height:26px;

  border:
    1px solid
    rgba(118,185,0,.55);

  border-radius:8px;

  background:
    rgba(118,185,0,.06);
}

.brand-mark::before{
  content:"";

  position:absolute;

  left:7px;
  top:7px;

  width:10px;
  height:10px;

  border:
    2px solid
    var(--green);

  transform:
    skewX(-12deg);
}

.desktop-nav{
  justify-self:center;

  display:flex;

  gap:
    clamp(16px,2.5vw,30px);
}

.desktop-nav a{
  color:#b9beb9;

  font-size:12px;

  transition:.25s;
}

.desktop-nav a:hover{
  color:var(--green-bright);
}

.nav-cta{
  min-height:36px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:0 14px;

  border:
    1px solid
    var(--line-green);

  border-radius:8px;

  background:
    rgba(118,185,0,.11);

  color:
    var(--green-bright);

  font-size:11px;

  font-weight:750;
}


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

.eyebrow{
  display:inline-flex;

  align-items:center;

  gap:8px;

  margin-bottom:14px;

  color:var(--green);

  font-size:10px;

  font-weight:800;

  letter-spacing:.16em;

  text-transform:uppercase;
}

.eyebrow::before{
  content:"";

  width:18px;
  height:1px;

  background:var(--green);
}

.hero h1,
.section-heading h2,
.pc-copy h2,
.cta-card h2{
  margin:0;

  line-height:.98;

  letter-spacing:-.045em;
}

.hero h1{
  font-size:
    clamp(
      38px,
      4.7vw,
      64px
    );
}

.section-heading h2,
.pc-copy h2,
.cta-card h2{
  font-size:
    clamp(
      30px,
      3.7vw,
      48px
    );
}

.hero h1 span,
.section-heading h2 span,
.pc-copy h2 span{
  color:#7c827c;
}


/* =========================================================
   BUTTONS
========================================================= */

.actions{
  display:flex;

  flex-wrap:wrap;

  gap:9px;

  margin-top:24px;
}

.button{
  position:relative;

  isolation:isolate;

  overflow:hidden;

  min-height:44px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:7px;

  padding:0 18px;

  border-radius:8px;

  font-size:12px;

  font-weight:750;

  transition:
    transform .3s var(--ease),
    box-shadow .3s,
    border-color .3s;
}

.button:hover{
  transform:
    translateY(-2px);
}

.button-primary{
  color:#071000;

  background:
    linear-gradient(
      180deg,
      var(--green-bright),
      var(--green)
    );

  border:
    1px solid
    #8ad300;

  animation:
    ctaPulse
    2.6s
    ease-in-out
    infinite;
}

.button-primary::before{
  content:"";

  position:absolute;

  z-index:-1;

  inset:-3px;

  border:
    1px solid
    rgba(118,185,0,.42);

  border-radius:inherit;

  opacity:0;

  animation:
    ctaRing
    2.6s
    ease-out
    infinite;
}

.button-primary::after{
  content:"";

  position:absolute;

  top:-60%;
  left:-45%;

  width:24%;
  height:220%;

  transform:
    rotate(20deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.35),
      transparent
    );

  animation:
    ctaShine
    3.8s
    ease-in-out
    infinite;
}

.button-secondary{
  color:#e5e7e5;

  background:
    rgba(255,255,255,.025);

  border:
    1px solid
    var(--line);
}


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

.hero{
  min-height:
    88svh;

  display:flex;

  align-items:center;

  padding-top:88px;

  overflow:hidden;
}

.hero::before{
  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:

    linear-gradient(
      90deg,
      rgba(255,255,255,.014) 1px,
      transparent 1px
    ),

    linear-gradient(
      rgba(255,255,255,.014) 1px,
      transparent 1px
    );

  background-size:
    46px 46px;
}

.hero-grid{
  position:relative;

  z-index:2;

  display:grid;

  grid-template-columns:
    1.02fr .98fr;

  align-items:center;

  gap:
    clamp(36px,5vw,70px);
}

.hero-text{
  max-width:640px;

  margin:18px 0 0;

  color:var(--muted);

  font-size:
    clamp(
      16px,
      1.4vw,
      20px
    );

  line-height:1.55;
}

.hero-proof{
  display:grid;

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

  gap:8px;

  margin-top:30px;
}

.hero-proof div{
  padding-top:12px;

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

.hero-proof strong{
  display:block;

  font-size:15px;
}

.hero-proof span{
  display:block;

  margin-top:3px;

  color:#777d77;

  font-size:10px;

  line-height:1.4;
}


/* HERO VISUAL */

.visual{
  position:relative;

  aspect-ratio:1/1.02;

  overflow:hidden;

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius);

  background:

    radial-gradient(
      circle at 50% 42%,
      rgba(118,185,0,.13),
      transparent 34%
    ),

    linear-gradient(
      145deg,
      #141814,
      #090b09
    );

  box-shadow:
    0 45px 100px
    rgba(0,0,0,.36);
}

.visual::before{
  content:"";

  position:absolute;

  inset:0;

  background:

    linear-gradient(
      90deg,
      rgba(118,185,0,.03) 1px,
      transparent 1px
    ),

    linear-gradient(
      rgba(118,185,0,.03) 1px,
      transparent 1px
    );

  background-size:
    36px 36px;
}

.visual-glow{
  position:absolute;

  left:31%;
  top:28%;

  width:38%;

  aspect-ratio:1;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(118,185,0,.27),
      transparent 70%
    );

  filter:blur(18px);

  animation:
    visualGlow
    5s
    ease-in-out
    infinite;
}

.tech-card{
  position:absolute;

  z-index:3;

  width:44%;

  padding:13px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:13px;

  background:
    rgba(15,18,15,.72);

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

  box-shadow:
    0 14px 34px
    rgba(0,0,0,.26);

  animation:
    cardFloat
    7s
    ease-in-out
    infinite;
}

.tech-card small{
  display:block;

  margin-bottom:6px;

  color:var(--green);

  font-size:8px;

  letter-spacing:.14em;
}

.tech-card strong{
  display:block;

  margin-bottom:3px;

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

.tech-card span{
  color:#808680;

  font-size:
    clamp(
      8px,
      .72vw,
      10px
    );
}

.t1{
  left:5%;
  top:12%;
}

.t2{
  right:5%;
  top:33%;

  animation-delay:-2s;
}

.t3{
  left:7%;
  bottom:18%;

  animation-delay:-4s;
}

.t4{
  right:7%;
  bottom:5%;

  animation-delay:-6s;
}


/* =========================================================
   MARQUEE
========================================================= */

.tech-marquee{
  overflow:hidden;

  padding:12px 0;

  border-top:
    1px solid
    rgba(118,185,0,.10);

  border-bottom:
    1px solid
    rgba(118,185,0,.10);

  background:#080a08;
}

.tech-marquee-track{
  width:max-content;

  display:flex;

  animation:
    ticker
    30s
    linear
    infinite;
}

.tech-marquee-set{
  display:flex;

  align-items:center;

  flex:0 0 auto;

  gap:22px;

  padding-right:22px;
}

.tech-marquee span{
  color:#666d66;

  font-size:9px;

  font-weight:750;

  letter-spacing:.17em;

  white-space:nowrap;
}

.tech-marquee i{
  width:5px;
  height:5px;

  border-radius:1px;

  background:var(--green);

  transform:rotate(45deg);

  box-shadow:
    0 0 10px
    rgba(118,185,0,.55);
}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.section-heading{
  max-width:850px;

  margin-bottom:
    clamp(28px,4vw,48px);
}


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

.services{
  background:#0a0c0a;
}

.services-grid{
  display:grid;

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

  gap:12px;
}

.service-card{
  position:relative;

  min-height:330px;

  display:flex;

  flex-direction:column;

  padding:
    clamp(20px,2.4vw,30px);

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius);

  background:
    linear-gradient(
      145deg,
      #121512,
      #0e100e
    );

  overflow:hidden;

  transition:
    transform .35s var(--ease),
    border-color .35s;
}

.service-card:hover{
  transform:
    translateY(-3px);

  border-color:
    rgba(118,185,0,.28);
}

.service-top{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  margin-bottom:24px;
}

.service-code{
  color:var(--green);

  font-size:9px;

  letter-spacing:.15em;
}

.service-icon{
  width:38px;
  height:38px;

  display:grid;

  place-items:center;

  border:
    1px solid
    var(--line-green);

  border-radius:11px;

  background:
    rgba(118,185,0,.06);

  color:
    var(--green);

  font-size:10px;

  font-weight:800;
}

.service-card h3{
  margin:
    0 0 8px;

  font-size:
    clamp(
      22px,
      2.2vw,
      31px
    );

  letter-spacing:-.04em;
}

.service-card p{
  margin:0;

  color:#8a908a;

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

  line-height:1.55;
}

.service-result{
  margin-top:auto;

  padding-top:24px;
}

.service-result span{
  display:inline-flex;

  padding:
    7px 9px;

  border:
    1px solid
    var(--line);

  border-radius:999px;

  color:#aeb4ae;

  font-size:10px;
}


/* =========================================================
   PROBLEMS / CASES
========================================================= */

.problems{
  background:#070807;
}

.problem-grid{
  display:grid;

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

  gap:9px;
}

.problem-card{
  position:relative;

  min-height:210px;

  display:flex;

  flex-direction:column;

  padding:18px;

  border:
    1px solid
    var(--line);

  border-radius:17px;

  background:#0f120f;

  overflow:hidden;

  transition:
    transform .3s var(--ease),
    border-color .3s;
}

.problem-card:hover{
  transform:
    translateY(-3px);

  border-color:
    rgba(118,185,0,.3);
}

.problem-card::after{
  content:"→";

  position:absolute;

  right:16px;
  top:15px;

  color:#596059;

  font-size:16px;
}

.problem-tag{
  margin-bottom:30px;

  color:var(--green);

  font-size:8px;

  letter-spacing:.14em;
}

.problem-card strong{
  display:block;

  margin-bottom:8px;

  font-size:17px;

  letter-spacing:-.02em;
}

.problem-card p{
  margin:0;

  color:#828882;

  font-size:13px;

  line-height:1.5;
}

.problem-action{
  margin-top:auto;

  padding-top:18px;

  color:#bcc2bc;

  font-size:11px;
}


/* =========================================================
   PC BUILD
========================================================= */

.pc-build{
  background:#0a0c0a;
}

.pc-grid{
  display:grid;

  grid-template-columns:
    .95fr 1.05fr;

  gap:
    clamp(32px,5vw,70px);

  align-items:center;
}

.pc-image{
  position:relative;

  overflow:hidden;

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius);

  background:#090b09;
}

.pc-image img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform
    .9s
    var(--ease);
}

.pc-image:hover img{
  transform:
    scale(1.035);
}

.pc-copy > p{
  max-width:650px;

  margin:16px 0 0;

  color:#898f89;

  font-size:15px;

  line-height:1.55;
}

.pc-types{
  display:grid;

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

  gap:7px;

  margin-top:22px;
}

.pc-types article{
  min-height:145px;

  display:flex;

  flex-direction:column;

  padding:14px;

  border:
    1px solid
    var(--line);

  border-radius:13px;

  background:#101310;
}

.pc-types small{
  color:var(--green);

  font-size:8px;

  letter-spacing:.14em;
}

.pc-types strong{
  margin-top:12px;

  font-size:13px;
}

.pc-types span{
  margin-top:auto;

  padding-top:8px;

  color:#777d77;

  font-size:10px;

  line-height:1.45;
}


/* =========================================================
   HOW IT WORKS
========================================================= */

.process{
  background:#070807;
}

.steps{
  display:grid;

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

  gap:9px;
}

.step{
  min-height:190px;

  display:flex;

  flex-direction:column;

  padding:18px;

  border:
    1px solid
    var(--line);

  border-radius:17px;

  background:#101310;
}

.step span{
  color:var(--green);

  font-size:9px;
}

.step h3{
  margin:auto 0 7px;

  font-size:19px;

  letter-spacing:-.03em;
}

.step p{
  margin:0;

  color:#858b85;

  font-size:13px;

  line-height:1.5;
}


/* =========================================================
   MINI CASES
========================================================= */

.case-section{
  background:#0a0c0a;
}

.case-grid{
  display:grid;

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

  gap:10px;
}

.case-card{
  padding:20px;

  border:
    1px solid
    var(--line);

  border-radius:18px;

  background:#101310;
}

.case-label{
  margin-bottom:17px;

  color:#707770;

  font-size:9px;

  letter-spacing:.14em;
}

.case-card strong{
  display:block;

  margin-bottom:12px;

  font-size:18px;
}

.case-flow{
  display:grid;

  grid-template-columns:
    1fr auto 1fr auto 1fr;

  align-items:center;

  gap:7px;
}

.case-flow span{
  min-height:54px;

  display:flex;

  align-items:center;

  padding:10px;

  border:
    1px solid
    var(--line);

  border-radius:10px;

  background:#0c0f0c;

  color:#a6aca6;

  font-size:11px;

  line-height:1.4;
}

.case-flow i{
  color:var(--green);

  font-style:normal;
}


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

.contact{
  background:#070807;
}

.cta-card{
  position:relative;

  overflow:hidden;

  padding:
    clamp(48px,6vw,78px)
    clamp(20px,5vw,65px);

  border:
    1px solid
    rgba(118,185,0,.25);

  border-radius:
    var(--radius);

  background:

    radial-gradient(
      circle at 80% 20%,
      rgba(118,185,0,.15),
      transparent 28%
    ),

    linear-gradient(
      145deg,
      #121612,
      #0b0d0b
    );

  text-align:center;
}

.cta-card p{
  max-width:620px;

  margin:
    16px auto 0;

  color:#8c928c;

  font-size:15px;

  line-height:1.55;
}

.cta-card .actions{
  justify-content:center;
}


/* =========================================================
   FOOTER
========================================================= */

footer{
  padding:
    26px 0 34px;

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

.footer{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;
}

.footer small{
  color:#626862;

  font-size:10px;
}


/* =========================================================
   ANIMATIONS
========================================================= */

.reveal{
  opacity:0;

  transform:
    translateY(20px);

  transition:
    opacity .7s var(--ease),
    transform .7s var(--ease);
}

.reveal.visible{
  opacity:1;
  transform:none;
}

@keyframes cardFloat{
  0%,
  100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-7px);
  }
}

@keyframes visualGlow{
  0%,
  100%{
    transform:scale(.9);
    opacity:.5;
  }

  50%{
    transform:scale(1.15);
    opacity:1;
  }
}

@keyframes ticker{
  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }
}

@keyframes ctaPulse{
  0%,
  100%{
    transform:scale(1);

    box-shadow:
      0 0 10px
      rgba(118,185,0,.08);
  }

  50%{
    transform:scale(1.018);

    box-shadow:
      0 0 24px
      rgba(118,185,0,.20);
  }
}

@keyframes ctaRing{
  0%{
    opacity:.5;

    transform:
      scale(.98);
  }

  60%,
  100%{
    opacity:0;

    transform:
      scale(1.12);
  }
}

@keyframes ctaShine{
  0%,
  64%{
    left:-45%;
    opacity:0;
  }

  70%{
    opacity:1;
  }

  84%{
    left:125%;
    opacity:.8;
  }

  100%{
    left:125%;
    opacity:0;
  }
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:980px){

  .desktop-nav,
  .nav-cta{
    display:none;
  }

  .nav{
    grid-template-columns:
      1fr;
  }

  .hero-grid{
    grid-template-columns:
      1fr;

    gap:36px;
  }

  .visual{
    width:
      min(
        88vw,
        620px
      );

    justify-self:center;
  }

  .problem-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .steps{
    grid-template-columns:
      repeat(3,1fr);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

  :root{
    --container:min(92vw,600px);
  }

  .section{
    padding:
      48px 0;
  }

  .nav{
    height:54px;
  }

  .hero{
    min-height:auto;

    padding-top:74px;
    padding-bottom:44px;
  }

  .hero h1{
    font-size:
      clamp(
        34px,
        9.5vw,
        44px
      );
  }

  .section-heading h2,
  .pc-copy h2,
  .cta-card h2{
    font-size:
      clamp(
        27px,
        7.6vw,
        35px
      );
  }

  .hero-text{
    font-size:15px;
  }

  .actions{
    display:grid;

    grid-template-columns:
      1fr 1fr;

    gap:7px;
  }

  .button{
    min-height:41px;

    padding:0 10px;

    font-size:11px;
  }

  .hero-proof{
    grid-template-columns:
      1fr;
  }

  .hero-proof div{
    display:grid;

    grid-template-columns:
      110px 1fr;

    gap:8px;

    align-items:center;

    padding:9px 0;
  }

  .hero-proof strong{
    font-size:13px;
  }

  .hero-proof span{
    margin:0;

    font-size:11px;
  }

  .visual{
    border-radius:18px;
  }

  .tech-card{
    padding:9px;

    border-radius:10px;
  }

  .tech-card small{
    font-size:6px;
  }

  .tech-card strong{
    font-size:9.5px;
  }

  .tech-card span{
    font-size:6.5px;
  }


  /* SERVICES */

  .services-grid{
    grid-template-columns:
      1fr;
  }

  .service-card{
    min-height:250px;

    padding:17px;

    border-radius:17px;
  }

  .service-card h3{
    font-size:21px;
  }

  .service-card p{
    font-size:13.5px;
  }

  .service-result span{
    font-size:9px;
  }


  /* PROBLEMS */

  .problem-grid{
    grid-template-columns:
      1fr 1fr;

    gap:7px;
  }

  .problem-card{
    min-height:180px;

    padding:14px;

    border-radius:14px;
  }

  .problem-tag{
    margin-bottom:24px;

    font-size:7px;
  }

  .problem-card strong{
    font-size:14px;
  }

  .problem-card p{
    font-size:11.5px;
  }

  .problem-action{
    font-size:10px;
  }


  /* PC */

  .pc-grid{
    grid-template-columns:
      1fr;
  }

  .pc-types{
    grid-template-columns:
      1fr;
  }

  .pc-types article{
    min-height:115px;
  }

  .pc-copy > p{
    font-size:13.5px;
  }

  .pc-types strong{
    font-size:13px;
  }

  .pc-types span{
    font-size:10.5px;
  }


  /* STEPS */

  .steps{
    grid-template-columns:
      1fr;
  }

  .step{
    min-height:155px;

    padding:16px;
  }

  .step h3{
    font-size:17px;
  }

  .step p{
    font-size:12.5px;
  }


  /* CASES */

  .case-grid{
    grid-template-columns:
      1fr;
  }

  .case-card{
    padding:16px;
  }

  .case-flow{
    grid-template-columns:
      1fr;
  }

  .case-flow i{
    transform:rotate(90deg);

    justify-self:center;
  }

  .case-flow span{
    min-height:46px;

    font-size:11px;
  }


  .cta-card p{
    font-size:13.5px;
  }

  .footer{
    flex-direction:column;

    align-items:flex-start;
  }

}


/* SMALL PHONE */

@media(max-width:390px){

  .actions{
    grid-template-columns:
      1fr;
  }

  .problem-grid{
    grid-template-columns:
      1fr;
  }

  .hero-proof div{
    grid-template-columns:
      1fr;

    gap:3px;
  }

}


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

  *{
    animation:none !important;
    transition:none !important;
  }

  .reveal{
    opacity:1;
    transform:none;
  }

}



/* =========================================================
   SERVICE IMAGES
========================================================= */

.service-card{

  min-height:
    510px;

}


.service-media{

  position:relative;

  flex:
    1 1 auto;

  min-height:
    190px;

  margin:
    20px 0 52px;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.065);

  border-radius:
    15px;

  background:
    #090b09;

}


.service-media::after{

  content:"";

  position:absolute;

  z-index:4;

  left:0;
  right:0;
  bottom:0;

  height:38%;

  pointer-events:none;

  background:
    linear-gradient(
      transparent,
      rgba(7,8,7,.22)
    );

}


.service-media img{

  position:relative;

  z-index:2;

  display:block;

  width:100%;

  height:100%;

  min-height:
    190px;

  object-fit:
    cover;

  transition:
    transform
    .9s
    var(--ease),
    filter
    .9s
    var(--ease);

}


.service-card:hover
.service-media img{

  transform:
    scale(1.04);

  filter:
    brightness(1.06);

}


.service-media-glow{

  position:absolute;

  z-index:1;

  left:30%;
  top:28%;

  width:40%;

  aspect-ratio:1;

  border-radius:50%;

  background:
    rgba(118,185,0,.17);

  filter:
    blur(50px);

  animation:
    serviceMediaGlow
    5s
    ease-in-out
    infinite;

}


@keyframes serviceMediaGlow{

  0%,
  100%{

    transform:
      scale(.85);

    opacity:.35;

  }

  50%{

    transform:
      scale(1.18);

    opacity:.75;

  }

}


/* =========================================================
   DESKTOP SERVICES
========================================================= */

@media(min-width:981px){

  .services-grid{

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

    align-items:
      stretch;

  }


  .service-card{

    height:
      100%;

  }


  .service-media{

    aspect-ratio:
      16 / 7.5;

  }

}


/* =========================================================
   TABLET
========================================================= */

@media(
  min-width:701px
)
and
(
  max-width:980px
){

  .services-grid{

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

  }


  .service-card{

    min-height:
      470px;

  }


  .service-media{

    min-height:
      160px;

    margin-top:
      18px;

  }


  .service-media img{

    min-height:
      160px;

  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

  .service-card{

    min-height:
      0;

  }


  .service-media{

    flex:none;

    width:100%;

    min-height:
      0;

    aspect-ratio:
      16 / 9;

    margin:
      16px 0 46px;

    border-radius:
      12px;

  }


  .service-media img{

    height:
      100%;

    min-height:
      0;

    object-fit:
      cover;

  }

}


/* SMALL PHONE */

@media(max-width:390px){

  .service-media{

    aspect-ratio:
      3 / 2;

  }

}




/* =========================================================
   MOBILE MENU
========================================================= */

.mobile-menu-button{

  display:none;

  width:38px;
  height:38px;

  padding:0;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:10px;

  background:
    rgba(255,255,255,.025);

  position:relative;

  cursor:pointer;

}


.mobile-menu-button span{

  position:absolute;

  left:10px;

  width:16px;

  height:1.5px;

  border-radius:2px;

  background:
    #e9ece9;

  transition:
    transform .32s var(--ease),
    top .32s var(--ease);

}


.mobile-menu-button span:first-child{

  top:14px;

}


.mobile-menu-button span:last-child{

  top:22px;

}


.mobile-menu-button.open span:first-child{

  top:18px;

  transform:
    rotate(45deg);

}


.mobile-menu-button.open span:last-child{

  top:18px;

  transform:
    rotate(-45deg);

}


/* OVERLAY */

.mobile-menu-overlay{

  position:fixed;

  inset:0;

  z-index:108;

  background:
    rgba(0,0,0,.56);

  backdrop-filter:
    blur(4px);

  -webkit-backdrop-filter:
    blur(4px);

  opacity:0;

  visibility:hidden;

  transition:
    opacity .35s ease,
    visibility .35s;

}


/* PANEL */

.mobile-menu{

  position:fixed;

  z-index:109;

  top:0;
  right:0;

  width:
    min(86vw,360px);

  height:
    100dvh;

  padding:
    max(
      14px,
      env(safe-area-inset-top)
    )
    14px
    max(
      16px,
      env(safe-area-inset-bottom)
    );

  background:
    linear-gradient(
      180deg,
      #101310,
      #090b09
    );

  border-left:
    1px solid
    rgba(118,185,0,.18);

  transform:
    translateX(102%);

  transition:
    transform
    .42s
    var(--ease);

  box-shadow:
    -24px 0 70px
    rgba(0,0,0,.45);

}


.mobile-menu.open{

  transform:
    translateX(0);

}


.mobile-menu-overlay.open{

  opacity:1;

  visibility:visible;

}


.mobile-menu-inner{

  height:100%;

  display:flex;

  flex-direction:column;

}


/* TOP */

.mobile-menu-top{

  min-height:46px;

  display:flex;

  align-items:center;

  justify-content:
    space-between;

  padding:
    0 4px 10px;

  border-bottom:
    1px solid
    var(--line);

}


.mobile-menu-top > span{

  color:
    #6f766f;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .15em;

  text-transform:
    uppercase;

}


.mobile-menu-close{

  width:34px;
  height:34px;

  display:grid;

  place-items:center;

  padding:0;

  border:
    1px solid
    var(--line);

  border-radius:9px;

  background:
    rgba(255,255,255,.025);

  color:
    #c8cdc8;

  font-size:
    20px;

  line-height:1;

}


/* NAV */

.mobile-menu-nav{

  display:flex !important;

  flex-direction:column;

  gap:0 !important;

  width:100%;

  padding-top:14px;

}


.mobile-menu-nav a{

  min-height:62px;

  display:grid;

  grid-template-columns:
    34px 1fr auto;

  align-items:center;

  gap:8px;

  padding:
    0 10px;

  border-bottom:
    1px solid
    rgba(255,255,255,.065);

  color:
    #edf0ed;

  font-size:
    16px;

  font-weight:
    650;

  letter-spacing:
    -.02em;

  transition:
    color .25s,
    background .25s;

}


.mobile-menu-nav a::after{

  content:"→";

  color:
    #525952;

  font-size:
    15px;

  transition:
    transform .25s,
    color .25s;

}


.mobile-menu-nav a > span{

  color:
    var(--green);

  font-size:
    8px;

  letter-spacing:
    .12em;

}


.mobile-menu-nav a:active{

  background:
    rgba(118,185,0,.07);

  color:
    var(--green-bright);

}


.mobile-menu-nav a:active::after{

  transform:
    translateX(3px);

  color:
    var(--green);

}


/* BOTTOM */

.mobile-menu-bottom{

  margin-top:auto;

  padding-top:18px;

}


.mobile-menu-note{

  margin-bottom:12px;

  color:
    #656c65;

  font-size:
    10px;

  line-height:
    1.5;

}


.mobile-menu-cta{

  width:100%;

  min-height:44px !important;

}


/* LOCK BODY */

body.mobile-menu-open{

  overflow:hidden;

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:980px){

  .desktop-nav,
  .nav-cta{

    display:none !important;

  }


  .nav{

    grid-template-columns:
      1fr auto !important;

  }


  .mobile-menu-button{

    display:block;

  }

}


@media(max-width:390px){

  .mobile-menu{

    width:
      min(90vw,330px);

  }


  .mobile-menu-nav a{

    min-height:
      56px;

    font-size:
      15px;

  }

}




/* =========================================================
   SERVICES SALES V2
========================================================= */

.services-sales{
  position:relative;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(118,185,0,.08),
      transparent 25%
    ),
    #090b09;
}


.services-sales::before{
  content:"";

  position:absolute;

  left:0;
  right:0;
  top:0;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(118,185,0,.55),
      transparent
    );
}


.services-shell{
  position:relative;

  padding:
    clamp(24px,3.2vw,42px);

  border:
    1px solid
    rgba(118,185,0,.16);

  border-radius:
    28px;

  background:
    rgba(12,15,12,.76);

  box-shadow:
    0 30px 90px
    rgba(0,0,0,.28);
}


.services-shell::before{
  content:"";

  position:absolute;

  inset:0;

  border-radius:inherit;

  pointer-events:none;

  background:
    linear-gradient(
      135deg,
      rgba(118,185,0,.045),
      transparent 25%
    );
}


/* INTRO */

.services-intro{
  position:relative;

  z-index:2;

  display:grid;

  grid-template-columns:
    minmax(0,1.25fr)
    minmax(260px,.75fr);

  align-items:end;

  gap:
    36px;

  margin-bottom:
    26px;
}


.services-intro h2{
  max-width:
    700px;

  margin:0;

  font-size:
    clamp(
      29px,
      3.7vw,
      47px
    );

  line-height:
    1;

  letter-spacing:
    -.045em;
}


.services-intro h2 span{
  display:block;

  color:
    #7d847d;
}


.services-intro-text{
  padding:
    18px;

  border:
    1px solid
    var(--line);

  border-radius:
    15px;

  background:
    rgba(255,255,255,.022);
}


.services-intro-text strong{
  display:block;

  color:
    #e5e9e5;

  font-size:
    15px;
}


.services-intro-text p{
  margin:
    6px 0 12px;

  color:
    #899089;

  font-size:
    13px;

  line-height:
    1.5;
}


.services-top-link{
  color:
    var(--green);

  font-size:
    12px;

  font-weight:
    700;
}


/* THREE BENEFITS */

.services-benefits{
  position:relative;

  z-index:2;

  display:grid;

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

  gap:
    8px;

  margin-bottom:
    14px;
}


.services-benefits span{
  min-height:
    44px;

  display:flex;

  align-items:center;

  gap:
    9px;

  padding:
    10px 12px;

  border:
    1px solid
    rgba(118,185,0,.12);

  border-radius:
    11px;

  background:
    rgba(118,185,0,.035);

  color:
    #a9afa9;

  font-size:
    11px;
}


.services-benefits i{
  width:
    7px;

  height:
    7px;

  flex:
    0 0 7px;

  border-radius:
    50%;

  background:
    var(--green);

  box-shadow:
    0 0 12px
    rgba(118,185,0,.55);
}


/* GRID */

.sales-grid{
  position:relative;

  z-index:2;

  display:grid !important;

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

  gap:
    10px !important;

  align-items:
    stretch;
}


.sales-card{
  position:relative;

  min-height:
    620px !important;

  height:
    100%;

  display:flex;

  flex-direction:
    column;

  padding:
    16px !important;

  border:
    1px solid
    rgba(255,255,255,.075)
    !important;

  border-radius:
    18px !important;

  background:
    linear-gradient(
      160deg,
      #121512,
      #0d100d
    ) !important;

  transition:
    transform .35s var(--ease),
    border-color .35s,
    box-shadow .35s;
}


.sales-card:hover{
  transform:
    translateY(-5px);

  border-color:
    rgba(118,185,0,.34)
    !important;

  box-shadow:
    0 20px 50px
    rgba(0,0,0,.28),
    0 0 30px
    rgba(118,185,0,.035);
}


/* FEATURED CARD */

.service-featured{
  border-color:
    rgba(118,185,0,.34)
    !important;

  background:
    radial-gradient(
      circle at 90% 5%,
      rgba(118,185,0,.13),
      transparent 25%
    ),
    linear-gradient(
      160deg,
      #151a15,
      #0d100d
    )
    !important;
}


.service-consult{
  background:
    radial-gradient(
      circle at 50% 25%,
      rgba(118,185,0,.08),
      transparent 35%
    ),
    #101310
    !important;
}


/* TOP */

.service-sale-top{
  display:flex;

  align-items:center;

  justify-content:
    space-between;

  gap:
    10px;

  margin-bottom:
    12px;
}


.service-code{
  color:
    var(--green);

  font-size:
    9px;

  letter-spacing:
    .14em;
}


.service-badge,
.service-mini-status{
  padding:
    5px 7px;

  border-radius:
    999px;

  font-size:
    8px;

  font-weight:
    750;
}


.service-badge{
  color:
    #101700;

  background:
    var(--green);
}


.service-mini-status{
  color:
    #8f978f;

  border:
    1px solid
    var(--line);

  background:
    rgba(255,255,255,.025);
}


/* MEDIA */

.sales-card .service-media{
  position:relative;

  flex:none;

  width:100%;

  aspect-ratio:
    16 / 8;

  min-height:0;

  margin:
    0 0 18px !important;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.06);

  border-radius:
    13px;

  background:
    #090b09;
}


.sales-card
.service-media img{
  width:100%;

  height:100%;

  min-height:0;

  object-fit:
    cover;

  transition:
    transform
    .8s
    var(--ease),
    filter
    .8s;
}


.sales-card:hover
.service-media img{
  transform:
    scale(1.04);

  filter:
    brightness(1.08);
}


/* TITLE + DESCRIPTION */

.sales-card h3{
  margin:
    0 0 8px;

  font-size:
    clamp(
      20px,
      1.9vw,
      27px
    ) !important;
}


.service-description{
  min-height:
    74px;

  margin:
    0 !important;

  color:
    #909690
    !important;

  font-size:
    13.5px !important;

  line-height:
    1.52 !important;
}


/* SALES POINTS */

.sales-points{
  display:grid;

  gap:
    6px;

  margin-top:
    17px;
}


.sales-points span{
  position:relative;

  min-height:
    32px;

  display:flex;

  align-items:center;

  padding:
    7px 8px
    7px 26px;

  border:
    1px solid
    rgba(255,255,255,.055);

  border-radius:
    9px;

  background:
    rgba(255,255,255,.018);

  color:
    #b0b6b0;

  font-size:
    11px;

  line-height:
    1.35;
}


.sales-points span::before{
  content:"";

  position:absolute;

  left:9px;

  width:
    7px;

  height:
    4px;

  border-left:
    1.5px solid
    var(--green);

  border-bottom:
    1.5px solid
    var(--green);

  transform:
    rotate(-45deg)
    translateY(-1px);
}


/* RESULT */

.sales-result{
  margin-top:auto;

  padding:
    17px 0 13px;
}


.sales-result small{
  display:block;

  margin-bottom:
    3px;

  color:
    #626962;

  font-size:
    8px;

  text-transform:
    uppercase;

  letter-spacing:
    .12em;
}


.sales-result strong{
  color:
    #e2e6e2;

  font-size:
    12px;

  font-weight:
    650;
}


/* CTA */

.service-cta{
  width:100%;

  min-height:
    40px;

  display:flex;

  align-items:center;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    0 12px;

  border:
    1px solid
    rgba(118,185,0,.24);

  border-radius:
    9px;

  background:
    rgba(118,185,0,.065);

  color:
    var(--green-bright);

  font-size:
    11px;

  font-weight:
    750;

  transition:
    background .3s,
    border-color .3s,
    transform .3s;
}


.service-cta span{
  font-size:
    15px;

  transition:
    transform .3s
    var(--ease);
}


.service-cta:hover{
  transform:
    translateY(-1px);

  border-color:
    rgba(118,185,0,.55);

  background:
    rgba(118,185,0,.11);
}


.service-cta:hover span{
  transform:
    translateX(4px);
}


.service-cta-green{
  color:
    #0a1100;

  background:
    linear-gradient(
      180deg,
      var(--green-bright),
      var(--green)
    );

  border-color:
    #86cc00;
}


/* =========================================================
   SALES RESPONSIVE
========================================================= */

@media(
  min-width:701px
)
and
(
  max-width:1080px
){

  .sales-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr))
      !important;
  }


  .services-intro{
    grid-template-columns:
      1fr .7fr;
  }

}


@media(max-width:700px){

  .services-sales{
    padding-top:
      48px !important;
  }


  .services-shell{
    width:
      calc(100% + 8px);

    margin-left:
      -4px;

    padding:
      16px;

    border-radius:
      20px;
  }


  .services-intro{
    grid-template-columns:
      1fr;

    gap:
      16px;

    margin-bottom:
      16px;
  }


  .services-intro h2{
    font-size:
      clamp(
        27px,
        7.6vw,
        34px
      );
  }


  .services-intro-text{
    padding:
      13px;
  }


  .services-intro-text strong{
    font-size:
      13px;
  }


  .services-intro-text p{
    font-size:
      12.5px;
  }


  .services-top-link{
    font-size:
      11px;
  }


  .services-benefits{
    grid-template-columns:
      1fr;

    gap:
      5px;
  }


  .services-benefits span{
    min-height:
      38px;

    padding:
      8px 10px;

    font-size:
      10.5px;
  }


  .sales-grid{
    grid-template-columns:
      1fr !important;

    gap:
      8px !important;
  }


  .sales-card{
    min-height:
      0 !important;

    padding:
      14px !important;

    border-radius:
      16px !important;
  }


  .sales-card
  .service-media{
    aspect-ratio:
      16 / 7.7;

    margin-bottom:
      15px !important;
  }


  .sales-card h3{
    font-size:
      21px !important;
  }


  .service-description{
    min-height:
      auto;

    font-size:
      13.5px !important;
  }


  .sales-points{
    margin-top:
      13px;
  }


  .sales-points span{
    min-height:
      30px;

    font-size:
      11px;
  }


  .sales-result{
    margin-top:
      14px;

    padding:
      11px 0;
  }


  .sales-result strong{
    font-size:
      11.5px;
  }


  .service-cta{
    min-height:
      39px;

    font-size:
      11px;
  }

}


@media(max-width:390px){

  .services-shell{
    padding:
      13px;
  }


  .sales-card
  .service-media{
    aspect-ratio:
      3 / 1.65;
  }

}




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

.faq-section{
  background:
    linear-gradient(
      180deg,
      #070807,
      #090b09
    );
}


.faq-list{
  display:grid;

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

  gap:
    8px;
}


.faq-item{
  overflow:hidden;

  border:
    1px solid
    var(--line);

  border-radius:
    15px;

  background:
    #101310;

  transition:
    border-color .3s,
    background .3s,
    transform .3s var(--ease);
}


.faq-item:hover{
  border-color:
    rgba(118,185,0,.26);
}


.faq-item.open{
  border-color:
    rgba(118,185,0,.36);

  background:
    #121612;
}


/* QUESTION */

.faq-question{
  width:100%;

  min-height:
    74px;

  display:grid;

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

  align-items:center;

  gap:
    12px;

  padding:
    14px 16px;

  border:0;

  background:transparent;

  color:
    var(--text);

  text-align:left;

  cursor:pointer;
}


.faq-tag{
  color:
    var(--green);

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .13em;
}


.faq-question strong{
  font-size:
    15px;

  font-weight:
    650;

  letter-spacing:
    -.015em;
}


/* PLUS */

.faq-plus{
  position:relative;

  width:30px;

  height:30px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:
    9px;

  background:
    rgba(255,255,255,.02);

  transition:
    background .3s,
    border-color .3s;
}


.faq-plus::before,
.faq-plus::after{
  content:"";

  position:absolute;

  left:50%;
  top:50%;

  width:
    12px;

  height:
    1.5px;

  border-radius:
    2px;

  background:
    #8f968f;

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

  transition:
    transform .35s
    var(--ease),
    background .3s;
}


.faq-plus::after{
  transform:
    translate(-50%,-50%)
    rotate(90deg);
}


.faq-item.open
.faq-plus{
  border-color:
    rgba(118,185,0,.35);

  background:
    rgba(118,185,0,.08);
}


.faq-item.open
.faq-plus::before,
.faq-item.open
.faq-plus::after{
  background:
    var(--green);
}


.faq-item.open
.faq-plus::after{
  transform:
    translate(-50%,-50%)
    rotate(0deg);
}


/* ANSWER */

.faq-answer{
  display:grid;

  grid-template-rows:
    0fr;

  opacity:0;

  transition:
    grid-template-rows
    .42s
    var(--ease),
    opacity
    .35s
    ease;
}


.faq-item.open
.faq-answer{
  grid-template-rows:
    1fr;

  opacity:1;
}


.faq-answer-inner{
  overflow:hidden;

  padding:
    0 16px;
}


.faq-item.open
.faq-answer-inner{
  padding-bottom:
    16px;
}


.faq-answer-inner::before{
  content:"";

  display:block;

  height:1px;

  margin-bottom:
    14px;

  background:
    linear-gradient(
      90deg,
      rgba(118,185,0,.28),
      rgba(255,255,255,.05),
      transparent
    );
}


.faq-answer p{
  margin:
    0;

  color:
    #8b928b;

  font-size:
    13px;

  line-height:
    1.55;
}


.faq-result{
  margin-top:
    11px;

  padding:
    10px 11px;

  border:
    1px solid
    rgba(118,185,0,.16);

  border-radius:
    9px;

  background:
    rgba(118,185,0,.05);

  color:
    #c8cec8;

  font-size:
    12px;

  font-weight:
    600;
}


.faq-result::before{
  content:"→";

  margin-right:
    7px;

  color:
    var(--green);
}


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

@media(max-width:700px){

  .faq-list{
    grid-template-columns:
      1fr;

    gap:
      6px;
  }


  .faq-question{
    min-height:
      62px;

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

    gap:
      9px;

    padding:
      11px 12px;
  }


  .faq-tag{
    font-size:
      7px;
  }


  .faq-question strong{
    font-size:
      13.5px;
  }


  .faq-plus{
    width:
      28px;

    height:
      28px;

    border-radius:
      8px;
  }


  .faq-answer-inner{
    padding:
      0 12px;
  }


  .faq-item.open
  .faq-answer-inner{
    padding-bottom:
      12px;
  }


  .faq-answer-inner::before{
    margin-bottom:
      11px;
  }


  .faq-answer p{
    font-size:
      12.5px;
  }


  .faq-result{
    margin-top:
      9px;

    padding:
      9px 10px;

    font-size:
      11.5px;
  }

}


@media(max-width:390px){

  .faq-question{
    grid-template-columns:
      1fr
      30px;

    row-gap:
      3px;
  }


  .faq-tag{
    grid-column:
      1;

    grid-row:
      1;
  }


  .faq-question strong{
    grid-column:
      1;

    grid-row:
      2;
  }


  .faq-plus{
    grid-column:
      2;

    grid-row:
      1 / 3;
  }

}




/* =========================================================
   ITRUMAK SNAKE
========================================================= */

.snake-section{

  position:relative;

  padding:
    clamp(55px,7vw,100px)
    0;

  overflow:hidden;

  background:
    #050705;

  border-top:
    1px solid
    rgba(118,185,0,.10);

}


.snake-section::before{

  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:

    radial-gradient(
      circle at 50% 65%,
      rgba(118,185,0,.07),
      transparent 34%
    ),

    linear-gradient(
      90deg,
      rgba(118,185,0,.018) 1px,
      transparent 1px
    ),

    linear-gradient(
      rgba(118,185,0,.018) 1px,
      transparent 1px
    );

  background-size:
    auto,
    32px 32px,
    32px 32px;

}


.snake-shell{

  position:relative;

  z-index:2;

  max-width:
    920px;

  margin:
    0 auto;

  padding:
    clamp(18px,3vw,30px);

  border:
    1px solid
    rgba(118,185,0,.18);

  border-radius:
    24px;

  background:
    linear-gradient(
      145deg,
      #101310,
      #090b09
    );

  box-shadow:
    0 35px 90px
    rgba(0,0,0,.34);

}


/* HEADER */

.snake-info{

  display:grid;

  grid-template-columns:
    1fr auto;

  align-items:end;

  gap:
    25px;

  margin-bottom:
    18px;

}


.snake-info h2{

  margin:0;

  font-size:
    clamp(
      27px,
      3.2vw,
      42px
    );

  line-height:1;

  letter-spacing:
    -.04em;

}


.snake-info h2 span{

  color:
    var(--green);

}


.snake-description{

  text-align:right;

}


.snake-description p{

  max-width:
    320px;

  margin:
    0 0 12px;

  color:
    #838a83;

  font-size:
    12px;

  line-height:
    1.45;

}


.snake-stats{

  display:flex;

  justify-content:flex-end;

  gap:
    7px;

}


.snake-stats div{

  min-width:
    80px;

  padding:
    8px 10px;

  border:
    1px solid
    var(--line);

  border-radius:
    9px;

  background:
    rgba(255,255,255,.02);

  text-align:center;

}


.snake-stats small{

  display:block;

  margin-bottom:
    2px;

  color:
    #656c65;

  font-size:
    7px;

  letter-spacing:
    .14em;

}


.snake-stats strong{

  color:
    var(--green-bright);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  font-size:
    18px;

}


/* GAME */

.snake-game-wrap{

  width:
    min(100%,620px);

  margin:
    0 auto;

}


.snake-screen{

  position:relative;

  width:
    100%;

  aspect-ratio:
    1;

  overflow:hidden;

  border:
    1px solid
    rgba(118,185,0,.30);

  border-radius:
    14px;

  background:
    #050705;

  box-shadow:

    inset
    0 0 40px
    rgba(0,0,0,.65),

    0 0 40px
    rgba(118,185,0,.04);

}


#snakeCanvas{

  display:block;

  width:100%;

  height:100%;

  image-rendering:
    pixelated;

  touch-action:
    none;

}


/* OVERLAY */

.snake-overlay{

  position:absolute;

  z-index:10;

  inset:0;

  display:grid;

  place-items:center;

  padding:20px;

  background:
    rgba(5,7,5,.78);

  backdrop-filter:
    blur(7px);

  -webkit-backdrop-filter:
    blur(7px);

  transition:
    opacity .3s,
    visibility .3s;

}


.snake-overlay.hidden{

  opacity:0;

  visibility:hidden;

  pointer-events:none;

}


.snake-overlay-content{

  max-width:
    340px;

  text-align:center;

}


.snake-mini-logo{

  display:inline-block;

  margin-bottom:
    10px;

  color:
    var(--green);

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .18em;

}


.snake-overlay strong{

  display:block;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  color:
    #ecf2e8;

  font-size:
    clamp(
      28px,
      5vw,
      50px
    );

  letter-spacing:
    -.04em;

}


.snake-overlay p{

  margin:
    10px auto 18px;

  color:
    #858c85;

  font-size:
    12px;

  line-height:
    1.5;

}


.snake-start{

  min-width:
    130px;

  min-height:
    42px;

  padding:
    0 20px;

  border:
    1px solid
    #8bd600;

  border-radius:
    8px;

  background:
    linear-gradient(
      #8bd600,
      #76b900
    );

  color:
    #071000;

  font-weight:
    800;

  font-size:
    11px;

  cursor:pointer;

  animation:
    snakeStartPulse
    2.3s
    ease-in-out
    infinite;

}


/* CONTROLS */

.snake-controls{

  display:none;

  width:
    174px;

  margin:
    14px auto 0;

  grid-template-columns:
    1fr;

  justify-items:center;

  gap:
    6px;

}


.snake-control-row{

  display:grid;

  grid-template-columns:
    repeat(3,52px);

  gap:
    6px;

}


.snake-controls button{

  width:
    52px;

  height:
    46px;

  display:grid;

  place-items:center;

  padding:0;

  border:
    1px solid
    rgba(118,185,0,.23);

  border-radius:
    10px;

  background:
    #111511;

  color:
    #b9c0b9;

  font-size:
    20px;

  user-select:none;

  -webkit-user-select:none;

  touch-action:
    manipulation;

}


.snake-controls button:active{

  transform:
    scale(.94);

  background:
    rgba(118,185,0,.14);

  color:
    var(--green-bright);

}


.snake-controls .snake-pause{

  color:
    #6f766f;

  font-size:
    12px;

  font-weight:
    800;

}


.snake-help{

  display:flex;

  justify-content:
    center;

  gap:
    18px;

  margin-top:
    12px;

  color:
    #5f665f;

  font-size:
    9px;

}


/* MOBILE */

@media(max-width:700px){

  .snake-section{

    padding:
      48px 0;

  }


  .snake-shell{

    width:
      calc(100% + 4px);

    margin-left:
      -2px;

    padding:
      14px;

    border-radius:
      19px;

  }


  .snake-info{

    grid-template-columns:
      1fr;

    align-items:start;

    gap:
      12px;

  }


  .snake-description{

    display:flex;

    align-items:center;

    justify-content:
      space-between;

    gap:
      10px;

    text-align:left;

  }


  .snake-description p{

    margin:0;

    font-size:
      11px;

  }


  .snake-stats{

    flex:
      0 0 auto;

  }


  .snake-stats div{

    min-width:
      57px;

    padding:
      6px;

  }


  .snake-stats strong{

    font-size:
      15px;

  }


  .snake-screen{

    border-radius:
      11px;

  }


  .snake-controls{

    display:grid;

  }


  .snake-help{

    flex-direction:
      column;

    align-items:center;

    gap:
      3px;

    font-size:
      8px;

  }

}


@media(max-width:390px){

  .snake-description{

    align-items:
      flex-end;

  }


  .snake-description p{

    max-width:
      150px;

    font-size:
      10px;

  }


  .snake-control-row{

    grid-template-columns:
      repeat(3,48px);

  }


  .snake-controls button{

    width:
      48px;

    height:
      43px;

  }

}


@keyframes snakeStartPulse{

  0%,
  100%{

    box-shadow:
      0 0 10px
      rgba(118,185,0,.10);

  }

  50%{

    box-shadow:
      0 0 28px
      rgba(118,185,0,.30);

  }

}




/* =========================================================
   SERVER CASE
========================================================= */

.case-card-server{

  grid-column:
    1 / -1;

  display:grid;

  grid-template-columns:
    minmax(0,1.05fr)
    minmax(320px,.95fr);

  gap:
    clamp(24px,4vw,55px);

  align-items:center;

  padding:
    clamp(20px,3vw,34px);

  overflow:hidden;

  border-color:
    rgba(118,185,0,.18);

  background:

    radial-gradient(
      circle at 80% 40%,
      rgba(118,185,0,.08),
      transparent 32%
    ),

    linear-gradient(
      145deg,
      #111511,
      #0b0e0b
    );

}


.server-case-content{

  min-width:0;

}


.server-case-title{

  display:block;

  margin-bottom:
    12px !important;

  font-size:
    clamp(
      23px,
      2.5vw,
      34px
    ) !important;

  letter-spacing:
    -.035em;

}


.server-case-description{

  max-width:
    660px;

  margin:
    0;

  color:
    #919791;

  font-size:
    14px;

  line-height:
    1.6;

}


/* STEPS */

.server-case-flow{

  margin-top:
    22px;

}


.server-case-flow span{

  min-height:
    66px;

  flex-direction:
    column;

  align-items:
    flex-start;

  justify-content:
    center;

  gap:
    4px;

}


.server-case-flow small{

  display:block;

  color:
    var(--green);

  font-size:
    7px;

  font-weight:
    800;

  letter-spacing:
    .15em;

}


/* FEATURES */

.server-case-features{

  display:flex;

  flex-wrap:wrap;

  gap:
    6px;

  margin-top:
    16px;

}


.server-case-features span{

  padding:
    7px 9px;

  border:
    1px solid
    rgba(255,255,255,.065);

  border-radius:
    999px;

  background:
    rgba(255,255,255,.02);

  color:
    #9fa69f;

  font-size:
    10px;

}


/* CTA */

.server-case-cta{

  width:
    fit-content;

  min-height:
    39px;

  display:inline-flex;

  align-items:center;

  gap:
    18px;

  margin-top:
    18px;

  padding:
    0 13px;

  border:
    1px solid
    rgba(118,185,0,.3);

  border-radius:
    9px;

  background:
    rgba(118,185,0,.07);

  color:
    var(--green-bright);

  font-size:
    11px;

  font-weight:
    750;

  transition:
    transform .3s var(--ease),
    background .3s,
    border-color .3s;

}


.server-case-cta span{

  font-size:
    15px;

  transition:
    transform
    .3s
    var(--ease);

}


.server-case-cta:hover{

  transform:
    translateY(-2px);

  background:
    rgba(118,185,0,.12);

  border-color:
    rgba(118,185,0,.55);

}


.server-case-cta:hover span{

  transform:
    translateX(4px);

}


/* VISUAL */

.server-case-visual{

  position:relative;

  width:100%;

  aspect-ratio:
    4 / 3;

  overflow:hidden;

  border:
    1px solid
    rgba(118,185,0,.16);

  border-radius:
    17px;

  background:
    #080a08;

}


.server-case-visual img{

  position:relative;

  z-index:2;

  display:block;

  width:100%;

  height:100%;

  object-fit:
    cover;

  transition:
    transform
    1s
    var(--ease),
    filter
    1s
    var(--ease);

}


.case-card-server:hover
.server-case-visual img{

  transform:
    scale(1.035);

  filter:
    brightness(1.07);

}


.server-case-glow{

  position:absolute;

  z-index:1;

  left:25%;
  top:20%;

  width:50%;

  aspect-ratio:1;

  border-radius:50%;

  background:
    rgba(118,185,0,.17);

  filter:
    blur(60px);

  animation:
    serverCaseGlow
    5s
    ease-in-out
    infinite;

}


/* SERVER READY */

.server-online{

  position:absolute;

  z-index:5;

  left:12px;
  bottom:12px;

  display:flex;

  align-items:center;

  gap:
    7px;

  padding:
    7px 9px;

  border:
    1px solid
    rgba(118,185,0,.25);

  border-radius:
    8px;

  background:
    rgba(7,9,7,.78);

  backdrop-filter:
    blur(10px);

  color:
    #838b83;

  font-size:
    7px;

  letter-spacing:
    .13em;

}


.server-online i{

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--green);

  box-shadow:
    0 0 12px
    rgba(118,185,0,.8);

  animation:
    serverLed
    1.6s
    ease-in-out
    infinite;

}


@keyframes serverCaseGlow{

  0%,
  100%{

    transform:
      scale(.85);

    opacity:
      .4;

  }

  50%{

    transform:
      scale(1.15);

    opacity:
      .85;

  }

}


@keyframes serverLed{

  0%,
  100%{
    opacity:.35;
  }

  50%{
    opacity:1;
  }

}


/* =========================================================
   SERVER CASE TABLET
========================================================= */

@media(max-width:900px){

  .case-card-server{

    grid-template-columns:
      1fr 1fr;

    gap:
      20px;

  }


  .server-case-description{

    font-size:
      13px;

  }


  .server-case-flow{

    grid-template-columns:
      1fr;

  }


  .server-case-flow i{

    display:none;

  }

}


/* =========================================================
   SERVER CASE MOBILE
========================================================= */

@media(max-width:700px){

  .case-card-server{

    grid-template-columns:
      1fr;

    gap:
      20px;

    padding:
      16px;

  }


  .server-case-title{

    font-size:
      22px !important;

  }


  .server-case-description{

    font-size:
      13px;

    line-height:
      1.55;

  }


  .server-case-flow{

    display:grid;

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

    gap:
      5px;

  }


  .server-case-flow span{

    min-height:
      62px;

    padding:
      8px;

    font-size:
      9px;

  }


  .server-case-flow i{

    display:none;

  }


  .server-case-features{

    margin-top:
      12px;

  }


  .server-case-features span{

    padding:
      6px 8px;

    font-size:
      9px;

  }


  .server-case-cta{

    width:100%;

    justify-content:
      space-between;

  }


  .server-case-visual{

    order:-1;

    aspect-ratio:
      16 / 10;

    border-radius:
      13px;

  }

}


/* VERY SMALL PHONE */

@media(max-width:390px){

  .server-case-flow{

    grid-template-columns:
      1fr;

  }


  .server-case-flow span{

    min-height:
      48px;

  }

}




/* =========================================================
   UPGRADE CASE
========================================================= */

.case-card-upgrade{

  grid-column:
    1 / -1;

  display:grid;

  grid-template-columns:
    minmax(320px,.92fr)
    minmax(0,1.08fr);

  gap:
    clamp(24px,4vw,55px);

  align-items:center;

  padding:
    clamp(20px,3vw,34px);

  overflow:hidden;

  border-color:
    rgba(118,185,0,.18);

  background:

    radial-gradient(
      circle at 20% 45%,
      rgba(118,185,0,.08),
      transparent 30%
    ),

    linear-gradient(
      145deg,
      #111511,
      #0b0e0b
    );

}


/* =========================================================
   IMAGE
========================================================= */

.upgrade-case-visual{

  position:relative;

  width:100%;

  aspect-ratio:
    4 / 3;

  overflow:hidden;

  border:
    1px solid
    rgba(118,185,0,.16);

  border-radius:
    17px;

  background:
    #080a08;

}


.upgrade-case-visual img{

  position:relative;

  z-index:2;

  display:block;

  width:100%;

  height:100%;

  object-fit:
    cover;

  transition:
    transform 1s var(--ease),
    filter 1s var(--ease);

}


.case-card-upgrade:hover
.upgrade-case-visual img{

  transform:
    scale(1.04);

  filter:
    brightness(1.08);

}


.upgrade-case-glow{

  position:absolute;

  z-index:1;

  left:24%;
  top:18%;

  width:52%;

  aspect-ratio:1;

  border-radius:50%;

  background:
    rgba(118,185,0,.18);

  filter:
    blur(65px);

  animation:
    upgradeGlow
    5s
    ease-in-out
    infinite;

}


/* =========================================================
   STATUS
========================================================= */

.upgrade-status{

  position:absolute;

  z-index:5;

  left:12px;
  bottom:12px;

  display:flex;

  align-items:center;

  gap:7px;

  padding:
    7px 9px;

  border:
    1px solid
    rgba(118,185,0,.25);

  border-radius:
    8px;

  background:
    rgba(7,9,7,.80);

  backdrop-filter:
    blur(10px);

  color:
    #858c85;

  font-size:
    7px;

  letter-spacing:
    .13em;

}


.upgrade-status i{

  width:6px;

  height:6px;

  border-radius:50%;

  background:
    var(--green);

  box-shadow:
    0 0 12px
    rgba(118,185,0,.8);

  animation:
    upgradeLed
    1.7s
    ease-in-out
    infinite;

}


/* =========================================================
   CONTENT
========================================================= */

.upgrade-case-content{

  min-width:0;

}


.upgrade-case-title{

  display:block;

  margin-bottom:
    12px !important;

  font-size:
    clamp(
      23px,
      2.5vw,
      34px
    ) !important;

  letter-spacing:
    -.035em;

}


.upgrade-case-description{

  max-width:
    680px;

  margin:0;

  color:
    #919791;

  font-size:
    14px;

  line-height:
    1.62;

}


/* MAIN SALES MESSAGE */

.upgrade-case-highlight{

  margin-top:
    16px;

  padding:
    11px 13px;

  border-left:
    2px solid
    var(--green);

  border-radius:
    0 9px 9px 0;

  background:
    rgba(118,185,0,.055);

  color:
    #d8ddd8;

  font-size:
    13px;

  font-weight:
    650;

}


/* =========================================================
   FLOW
========================================================= */

.upgrade-case-flow{

  margin-top:
    20px;

}


.upgrade-case-flow span{

  min-height:
    68px;

  flex-direction:
    column;

  align-items:
    flex-start;

  justify-content:
    center;

  gap:
    4px;

}


.upgrade-case-flow small{

  color:
    var(--green);

  font-size:
    7px;

  font-weight:
    800;

  letter-spacing:
    .14em;

}


/* =========================================================
   FEATURES
========================================================= */

.upgrade-case-features{

  display:flex;

  flex-wrap:wrap;

  gap:
    6px;

  margin-top:
    15px;

}


.upgrade-case-features span{

  padding:
    7px 9px;

  border:
    1px solid
    rgba(255,255,255,.065);

  border-radius:
    999px;

  background:
    rgba(255,255,255,.02);

  color:
    #9da49d;

  font-size:
    10px;

}


/* =========================================================
   RESULT
========================================================= */

.upgrade-case-result{

  margin-top:
    17px;

  padding-top:
    14px;

  border-top:
    1px solid
    var(--line);

}


.upgrade-case-result small{

  display:block;

  margin-bottom:
    5px;

  color:
    var(--green);

  font-size:
    7px;

  font-weight:
    800;

  letter-spacing:
    .15em;

}


.upgrade-case-result strong{

  display:block;

  max-width:
    620px;

  color:
    #d4d9d4;

  font-size:
    12px;

  font-weight:
    600;

  line-height:
    1.5;

}


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

.upgrade-case-cta{

  width:
    fit-content;

  min-height:
    40px;

  display:inline-flex;

  align-items:center;

  gap:
    18px;

  margin-top:
    17px;

  padding:
    0 13px;

  border:
    1px solid
    rgba(118,185,0,.30);

  border-radius:
    9px;

  background:
    rgba(118,185,0,.07);

  color:
    var(--green-bright);

  font-size:
    11px;

  font-weight:
    750;

  transition:
    transform .3s var(--ease),
    background .3s,
    border-color .3s;

}


.upgrade-case-cta span{

  font-size:
    15px;

  transition:
    transform .3s var(--ease);

}


.upgrade-case-cta:hover{

  transform:
    translateY(-2px);

  background:
    rgba(118,185,0,.12);

  border-color:
    rgba(118,185,0,.55);

}


.upgrade-case-cta:hover span{

  transform:
    translateX(4px);

}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes upgradeGlow{

  0%,
  100%{

    transform:
      scale(.85);

    opacity:.4;

  }


  50%{

    transform:
      scale(1.18);

    opacity:.8;

  }

}


@keyframes upgradeLed{

  0%,
  100%{
    opacity:.35;
  }


  50%{
    opacity:1;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px){

  .case-card-upgrade{

    grid-template-columns:
      .9fr 1.1fr;

    gap:
      20px;

  }


  .upgrade-case-description{

    font-size:
      13px;

  }


  .upgrade-case-flow{

    grid-template-columns:
      1fr;

  }


  .upgrade-case-flow i{

    display:none;

  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

  .case-card-upgrade{

    grid-template-columns:
      1fr;

    gap:
      18px;

    padding:
      16px;

  }


  .upgrade-case-visual{

    aspect-ratio:
      16 / 10;

    border-radius:
      13px;

  }


  .upgrade-case-title{

    font-size:
      22px !important;

  }


  .upgrade-case-description{

    font-size:
      13px;

    line-height:
      1.55;

  }


  .upgrade-case-highlight{

    margin-top:
      12px;

    padding:
      9px 10px;

    font-size:
      12px;

  }


  .upgrade-case-flow{

    display:grid;

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

    gap:
      5px;

  }


  .upgrade-case-flow span{

    min-height:
      62px;

    padding:
      8px;

    font-size:
      9px;

  }


  .upgrade-case-flow i{

    display:none;

  }


  .upgrade-case-features{

    margin-top:
      12px;

  }


  .upgrade-case-features span{

    padding:
      6px 8px;

    font-size:
      9px;

  }


  .upgrade-case-result strong{

    font-size:
      11.5px;

  }


  .upgrade-case-cta{

    width:100%;

    justify-content:
      space-between;

  }

}


@media(max-width:390px){

  .upgrade-case-flow{

    grid-template-columns:
      1fr;

  }


  .upgrade-case-flow span{

    min-height:
      47px;

  }

}




/* =========================================================
   EXTENDED CASE STORIES
   COMPUTER + WEBSITE
========================================================= */

.case-story{

  grid-column:
    1 / -1;

  display:grid;

  grid-template-columns:
    minmax(320px,.92fr)
    minmax(0,1.08fr);

  gap:
    clamp(24px,4vw,54px);

  align-items:center;

  padding:
    clamp(20px,3vw,34px);

  overflow:hidden;

  border-color:
    rgba(118,185,0,.17);

  background:

    radial-gradient(
      circle at 15% 40%,
      rgba(118,185,0,.065),
      transparent 28%
    ),

    linear-gradient(
      145deg,
      #111511,
      #0b0e0b
    );

}


/*
 * Сайт зеркальный:
 * текст слева, изображение справа.
 */

.case-story-website{

  grid-template-columns:
    minmax(0,1.08fr)
    minmax(320px,.92fr);

  background:

    radial-gradient(
      circle at 85% 40%,
      rgba(118,185,0,.065),
      transparent 28%
    ),

    linear-gradient(
      145deg,
      #111511,
      #0b0e0b
    );

}


/* =========================================================
   VISUAL
========================================================= */

.case-story-visual{

  position:relative;

  width:100%;

  aspect-ratio:
    4 / 3;

  overflow:hidden;

  border:
    1px solid
    rgba(118,185,0,.15);

  border-radius:
    17px;

  background:
    #080a08;

}


.case-story-visual::after{

  content:"";

  position:absolute;

  z-index:3;

  left:0;
  right:0;
  bottom:0;

  height:28%;

  pointer-events:none;

  background:
    linear-gradient(
      transparent,
      rgba(5,7,5,.32)
    );

}


.case-story-visual img{

  position:relative;

  z-index:2;

  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform
    1s
    var(--ease),
    filter
    1s
    var(--ease);

}


.case-story:hover
.case-story-visual img{

  transform:
    scale(1.04);

  filter:
    brightness(1.08);

}


.case-story-glow{

  position:absolute;

  z-index:1;

  left:25%;
  top:20%;

  width:50%;

  aspect-ratio:1;

  border-radius:50%;

  background:
    rgba(118,185,0,.17);

  filter:
    blur(60px);

  animation:
    caseStoryGlow
    5.5s
    ease-in-out
    infinite;

}


/* STATUS */

.case-story-status{

  position:absolute;

  z-index:5;

  left:12px;
  bottom:12px;

  display:flex;

  align-items:center;

  gap:7px;

  padding:
    7px 9px;

  border:
    1px solid
    rgba(118,185,0,.25);

  border-radius:
    8px;

  background:
    rgba(6,8,6,.82);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  color:
    #858d85;

  font-size:
    7px;

  letter-spacing:
    .13em;

}


.case-story-status i{

  width:6px;
  height:6px;

  border-radius:50%;

  background:
    var(--green);

  box-shadow:
    0 0 12px
    rgba(118,185,0,.8);

  animation:
    caseStoryLed
    1.7s
    ease-in-out
    infinite;

}


/* =========================================================
   CONTENT
========================================================= */

.case-story-content{

  min-width:0;

}


.case-story-title{

  display:block;

  margin-bottom:
    12px !important;

  font-size:
    clamp(
      23px,
      2.5vw,
      34px
    ) !important;

  letter-spacing:
    -.035em;

}


.case-story-description{

  max-width:
    680px;

  margin:0;

  color:
    #919791;

  font-size:
    14px;

  line-height:
    1.62;

}


/* SELLING MESSAGE */

.case-story-highlight{

  margin-top:
    15px;

  padding:
    10px 12px;

  border-left:
    2px solid
    var(--green);

  border-radius:
    0 9px 9px 0;

  background:
    rgba(118,185,0,.05);

  color:
    #d5dad5;

  font-size:
    12.5px;

  font-weight:
    650;

}


/* =========================================================
   FLOW
========================================================= */

.case-story-flow{

  margin-top:
    20px;

}


.case-story-flow span{

  min-height:
    66px;

  flex-direction:
    column;

  align-items:
    flex-start;

  justify-content:
    center;

  gap:
    4px;

}


.case-story-flow small{

  display:block;

  color:
    var(--green);

  font-size:
    7px;

  font-weight:
    800;

  letter-spacing:
    .14em;

}


/* =========================================================
   FEATURES
========================================================= */

.case-story-features{

  display:flex;

  flex-wrap:wrap;

  gap:
    6px;

  margin-top:
    15px;

}


.case-story-features span{

  padding:
    7px 9px;

  border:
    1px solid
    rgba(255,255,255,.065);

  border-radius:
    999px;

  background:
    rgba(255,255,255,.02);

  color:
    #9da49d;

  font-size:
    10px;

}


/* =========================================================
   RESULT
========================================================= */

.case-story-result{

  margin-top:
    17px;

  padding-top:
    14px;

  border-top:
    1px solid
    var(--line);

}


.case-story-result small{

  display:block;

  margin-bottom:
    5px;

  color:
    var(--green);

  font-size:
    7px;

  font-weight:
    800;

  letter-spacing:
    .15em;

}


.case-story-result strong{

  display:block;

  max-width:
    630px;

  color:
    #d5dad5;

  font-size:
    12px;

  font-weight:
    600;

  line-height:
    1.5;

}


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

.case-story-cta{

  width:
    fit-content;

  min-height:
    40px;

  display:inline-flex;

  align-items:center;

  gap:
    18px;

  margin-top:
    17px;

  padding:
    0 13px;

  border:
    1px solid
    rgba(118,185,0,.3);

  border-radius:
    9px;

  background:
    rgba(118,185,0,.07);

  color:
    var(--green-bright);

  font-size:
    11px;

  font-weight:
    750;

  transition:
    transform .3s var(--ease),
    background .3s,
    border-color .3s;

}


.case-story-cta span{

  font-size:
    15px;

  transition:
    transform
    .3s
    var(--ease);

}


.case-story-cta:hover{

  transform:
    translateY(-2px);

  border-color:
    rgba(118,185,0,.55);

  background:
    rgba(118,185,0,.12);

}


.case-story-cta:hover span{

  transform:
    translateX(4px);

}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes caseStoryGlow{

  0%,
  100%{
    transform:scale(.85);
    opacity:.35;
  }

  50%{
    transform:scale(1.18);
    opacity:.78;
  }

}


@keyframes caseStoryLed{

  0%,
  100%{
    opacity:.35;
  }

  50%{
    opacity:1;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px){

  .case-story,
  .case-story-website{

    grid-template-columns:
      1fr 1fr;

    gap:
      20px;

  }


  .case-story-description{

    font-size:
      13px;

  }


  .case-story-flow{

    grid-template-columns:
      1fr;

  }


  .case-story-flow i{

    display:none;

  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

  .case-story,
  .case-story-website{

    grid-template-columns:
      1fr;

    gap:
      18px;

    padding:
      16px;

  }


  /*
   * На телефоне изображение
   * всегда первым.
   */

  .case-story-website
  .case-story-visual{

    order:-1;

  }


  .case-story-visual{

    aspect-ratio:
      16 / 10;

    border-radius:
      13px;

  }


  .case-story-title{

    font-size:
      22px !important;

  }


  .case-story-description{

    font-size:
      13px;

    line-height:
      1.55;

  }


  .case-story-highlight{

    margin-top:
      12px;

    padding:
      9px 10px;

    font-size:
      12px;

  }


  .case-story-flow{

    display:grid;

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

    gap:
      5px;

  }


  .case-story-flow span{

    min-height:
      62px;

    padding:
      8px;

    font-size:
      9px;

  }


  .case-story-flow i{

    display:none;

  }


  .case-story-features{

    margin-top:
      12px;

  }


  .case-story-features span{

    padding:
      6px 8px;

    font-size:
      9px;

  }


  .case-story-result strong{

    font-size:
      11.5px;

  }


  .case-story-cta{

    width:100%;

    justify-content:
      space-between;

  }

}


@media(max-width:390px){

  .case-story-flow{

    grid-template-columns:
      1fr;

  }


  .case-story-flow span{

    min-height:
      47px;

  }

}




/* =========================================================
   ITRUMAK CLEAN UI
   меньше карточек-в-карточке
========================================================= */


/* =========================================================
   SERVICES — общий контейнер почти без рамки
========================================================= */

.services-shell{

  border:
    0 !important;

  background:
    rgba(12,15,12,.58) !important;

  box-shadow:
    none !important;

}


/*
 * Верхний информационный блок услуги
 * без отдельной карточки.
 */

.services-intro-text{

  border:
    0 !important;

  background:
    rgba(118,185,0,.035) !important;

  border-radius:
    12px !important;

}


/*
 * Три преимущества делаем просто строками.
 */

.services-benefits span{

  border:
    0 !important;

  background:
    transparent !important;

  padding-left:
    4px !important;

  padding-right:
    4px !important;

}


/* =========================================================
   SERVICE CARDS
========================================================= */

.sales-card{

  border:
    0 !important;

  background:
    #101310 !important;

  box-shadow:
    0 12px 35px
    rgba(0,0,0,.18) !important;

}


.sales-card:hover{

  border:
    0 !important;

  background:
    #121612 !important;

  box-shadow:
    0 18px 46px
    rgba(0,0,0,.27) !important;

}


/*
 * Только выделенная услуга получает
 * лёгкий зелёный акцент.
 */

.service-featured{

  background:

    radial-gradient(
      circle at 95% 0%,
      rgba(118,185,0,.10),
      transparent 30%
    ),

    #111511 !important;

}


/* Картинка без рамки */

.sales-card .service-media{

  border:
    0 !important;

  background:
    #0a0d0a !important;

  box-shadow:
    none !important;

}


/* Пункты услуги больше не отдельные карточки */

.sales-points{

  gap:
    3px !important;

}


.sales-points span{

  min-height:
    26px !important;

  padding:
    4px 4px
    4px 23px !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

}


.sales-points span::before{

  left:
    5px !important;

}


/* Результат отделяем только линией */

.sales-result{

  border-top:
    1px solid
    rgba(255,255,255,.065);

}


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

/*
 * Здесь рамка полезна,
 * потому что весь ряд кликабельный.
 * Но делаем её намного слабее.
 */

.faq-item{

  border-color:
    rgba(255,255,255,.045)
    !important;

  background:
    #0f120f !important;

}


.faq-item.open{

  border-color:
    rgba(118,185,0,.15)
    !important;

  background:
    #111511 !important;

}


/* кнопка плюс — без дополнительной карточки */

.faq-plus{

  border:
    0 !important;

  background:
    rgba(255,255,255,.035)
    !important;

}


/* Ответ без рамки */

.faq-result{

  border:
    0 !important;

  border-radius:
    0 !important;

  padding:
    7px 0 !important;

  background:
    transparent !important;

  color:
    #c5cbc5 !important;

}


/* =========================================================
   PC BUILD
========================================================= */

.pc-image{

  border:
    0 !important;

  box-shadow:
    0 18px 45px
    rgba(0,0,0,.24);

}


/* HOME / WORK / SERVER
   делаем одним визуальным блоком */

.pc-types{

  gap:
    0 !important;

  overflow:
    hidden;

  border-radius:
    14px;

  background:
    rgba(255,255,255,.035);

}


.pc-types article{

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

}


.pc-types article
+ article{

  border-left:
    1px solid
    rgba(255,255,255,.06)
    !important;

}


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

.steps{

  gap:
    0 !important;

  overflow:
    hidden;

  border-radius:
    17px;

  background:
    #101310;

}


.step{

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

}


.step + .step{

  border-left:
    1px solid
    rgba(255,255,255,.06)
    !important;

}


/* =========================================================
   CASES — УБИРАЕМ МАТРЁШКУ
========================================================= */

.case-card,
.case-story,
.case-card-upgrade,
.case-card-server{

  border:
    0 !important;

  box-shadow:
    none !important;

}


/*
 * Каждый большой кейс —
 * один цельный фон.
 */

.case-story,
.case-card-upgrade,
.case-card-server{

  border-radius:
    22px !important;

  background:

    linear-gradient(
      145deg,
      rgba(18,22,18,.95),
      rgba(11,14,11,.95)
    )

    !important;

}


/*
 * Главное изображение без рамки.
 */

.case-story-visual,
.upgrade-case-visual,
.server-case-visual{

  border:
    0 !important;

  box-shadow:
    0 16px 42px
    rgba(0,0,0,.24);

}


/* =========================================================
   CASE STEPS
========================================================= */

/*
 * Было 3 отдельных коробки.
 * Теперь одна цельная полоска.
 */

.case-story-flow,
.upgrade-case-flow,
.server-case-flow{

  gap:
    0 !important;

  overflow:
    hidden;

  border-radius:
    11px;

  background:
    rgba(255,255,255,.035);

}


.case-story-flow span,
.upgrade-case-flow span,
.server-case-flow span{

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

}


.case-story-flow span
+ span,
.upgrade-case-flow span
+ span,
.server-case-flow span
+ span{

  border-left:
    1px solid
    rgba(255,255,255,.06)
    !important;

}


/*
 * Стрелки теперь не заключены
 * ни во что и становятся мягче.
 */

.case-story-flow i,
.upgrade-case-flow i,
.server-case-flow i{

  color:
    rgba(118,185,0,.55)
    !important;

}


/* =========================================================
   CASE FEATURE TAGS
========================================================= */

/*
 * Вместо множества капсул —
 * обычные текстовые пункты.
 */

.case-story-features,
.upgrade-case-features,
.server-case-features{

  gap:
    6px 16px !important;

}


.case-story-features span,
.upgrade-case-features span,
.server-case-features span{

  position:relative;

  padding:
    3px 0
    3px 14px !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  color:
    #8f968f !important;

}


.case-story-features span::before,
.upgrade-case-features span::before,
.server-case-features span::before{

  content:"";

  position:absolute;

  left:0;
  top:50%;

  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

  background:
    var(--green);

  transform:
    translateY(-50%);

}


/* =========================================================
   CASE HIGHLIGHTS
========================================================= */

/*
 * Акцентная фраза —
 * только зелёная линия,
 * без ещё одной карточки.
 */

.case-story-highlight,
.upgrade-case-highlight{

  border:
    0 !important;

  border-left:
    2px solid
    var(--green)
    !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  padding:
    3px 0
    3px 12px !important;

}


/* RESULT */

.case-story-result,
.upgrade-case-result{

  border-top:
    1px solid
    rgba(255,255,255,.06)
    !important;

}


/* =========================================================
   STATUS OVER IMAGE
========================================================= */

/*
 * Эти элементы можно оставить:
 * они лежат прямо поверх картинки
 * и дают понятный визуальный акцент.
 */

.case-story-status,
.upgrade-status,
.server-online{

  border-color:
    rgba(118,185,0,.14)
    !important;

}


/* =========================================================
   SNAKE
========================================================= */

.snake-shell{

  border:
    0 !important;

  background:
    #0d100d !important;

  box-shadow:
    0 25px 65px
    rgba(0,0,0,.26)
    !important;

}


.snake-stats div{

  border:
    0 !important;

  background:
    rgba(255,255,255,.035)
    !important;

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

  /*
   * На телефоне особенно важно,
   * чтобы не было сотни рамок.
   */

  .services-shell{

    padding:
      12px !important;

    background:
      transparent !important;

  }


  .sales-card{

    border-radius:
      15px !important;

    box-shadow:
      none !important;

  }


  /*
   * Услуги разделяем расстоянием,
   * а не рамкой.
   */

  .sales-grid{

    gap:
      10px !important;

  }


  /*
   * PC-types вертикальные.
   */

  .pc-types{

    background:
      transparent;

    gap:
      0 !important;

  }


  .pc-types article{

    padding:
      13px 0 !important;

  }


  .pc-types article
  + article{

    border-left:
      0 !important;

    border-top:
      1px solid
      rgba(255,255,255,.06)
      !important;

  }


  /*
   * Процесс тоже вертикальной лентой.
   */

  .steps{

    border-radius:
      15px;

  }


  .step + .step{

    border-left:
      0 !important;

    border-top:
      1px solid
      rgba(255,255,255,.06)
      !important;

  }


  /*
   * Большие кейсы.
   */

  .case-story,
  .case-card-upgrade,
  .case-card-server{

    padding:
      14px !important;

    border-radius:
      17px !important;

  }


  /*
   * Шаги в кейсах остаются видимыми,
   * но без отдельных карточек.
   */

  .case-story-flow,
  .upgrade-case-flow,
  .server-case-flow{

    background:
      rgba(255,255,255,.025);

  }


  .case-story-flow span,
  .upgrade-case-flow span,
  .server-case-flow span{

    padding:
      8px !important;

  }

}


/* VERY SMALL */

@media(max-width:390px){

  /*
   * На узком экране этапы идут
   * одной вертикальной полосой.
   */

  .case-story-flow,
  .upgrade-case-flow,
  .server-case-flow{

    border-radius:
      10px;

  }


  .case-story-flow span
  + span,
  .upgrade-case-flow span
  + span,
  .server-case-flow span
  + span{

    border-left:
      0 !important;

    border-top:
      1px solid
      rgba(255,255,255,.05)
      !important;

  }

}




/* =========================================================
   CONTACTS
========================================================= */

.contact-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
}


.contact-button-icon{
  font-size:13px;
  line-height:1;
}


.contact-telegram{
  border-color:
    rgba(118,185,0,.22);
}


.contact-direct{
  display:flex;

  align-items:center;

  justify-content:center;

  gap:8px;

  margin-top:16px;
}


.contact-direct > span{
  color:#737a73;

  font-size:10px;
}


.contact-direct a{
  color:#dbe0db;

  font-size:13px;

  font-weight:650;

  transition:
    color .25s;
}


.contact-direct a:hover{
  color:var(--green-bright);
}


/* MOBILE MENU CONTACTS */

.mobile-menu-contacts{
  margin-bottom:14px;

  border-top:
    1px solid
    rgba(255,255,255,.06);
}


.mobile-contact-row{
  min-height:48px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

  border-bottom:
    1px solid
    rgba(255,255,255,.06);
}


.mobile-contact-row span{
  color:#747b74;

  font-size:10px;

  text-transform:uppercase;

  letter-spacing:.09em;
}


.mobile-contact-row strong{
  color:#dce1dc;

  font-size:12px;

  font-weight:650;
}


/* MOBILE */

@media(max-width:700px){

  .contact-actions{
    display:grid !important;

    grid-template-columns:
      1fr !important;

    width:
      min(100%,360px);

    margin-left:auto;

    margin-right:auto;
  }


  .contact-actions .button{
    width:100%;
  }


  .contact-direct{
    margin-top:13px;
  }


  .contact-direct a{
    font-size:12px;
  }

}




.footer-phone{
  margin-left:auto;

  color:#989f98;

  font-size:11px;

  transition:color .25s;
}

.footer-phone:hover{
  color:var(--green-bright);
}

@media(max-width:700px){

  .footer-phone{
    margin-left:0;
  }

}




/* =========================================================
   SERVICES INTRO SEPARATION
========================================================= */

.services-shell{
  padding:
    clamp(22px,3vw,36px)
    !important;

  background:
    transparent
    !important;
}


/* Верхняя продающая часть становится отдельным блоком */

.services-intro{

  position:relative;

  margin:
    0 0 14px
    !important;

  padding:
    clamp(22px,3vw,32px);

  border-radius:
    20px;

  background:
    linear-gradient(
      145deg,
      rgba(19,23,19,.98),
      rgba(12,15,12,.98)
    );

  box-shadow:
    0 18px 48px
    rgba(0,0,0,.20);

  overflow:hidden;
}


.services-intro::before{

  content:"";

  position:absolute;

  left:0;
  top:0;
  bottom:0;

  width:3px;

  background:
    linear-gradient(
      180deg,
      var(--green-bright),
      var(--green)
    );
}


.services-intro::after{

  content:"";

  position:absolute;

  top:-90px;
  right:-90px;

  width:220px;
  height:220px;

  border-radius:50%;

  background:
    rgba(118,185,0,.08);

  filter:
    blur(40px);

  pointer-events:none;
}


/* Внутренний блок консультации не должен выглядеть
   как ещё одна карточка */

.services-intro-text{

  border:
    0 !important;

  background:
    transparent !important;

  padding:
    0 !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;
}


.services-intro-text strong{

  color:
    #eef2ee;

  font-size:
    15px;
}


.services-intro-text p{

  color:
    #909790;

  font-size:
    13.5px;

  line-height:
    1.5;
}


.services-top-link{

  display:inline-flex;

  align-items:center;

  margin-top:
    2px;

  color:
    var(--green-bright);

  font-size:
    12px;

  font-weight:
    750;
}


/* Три преимущества тоже отделяем от карточек услуг */

.services-benefits{

  margin:
    0 0 34px
    !important;

  padding:
    12px 0 18px;

  border-bottom:
    1px solid
    rgba(255,255,255,.07);
}


.services-benefits span{

  border:
    0 !important;

  background:
    transparent !important;

  padding:
    4px 6px
    !important;

  color:
    #9ca39c;
}


/* Главное — отделяем сетку карточек */

.sales-grid{

  position:relative;

  margin-top:
    0 !important;

  padding-top:
    18px;
}


.sales-grid::before{

  content:"НАШИ УСЛУГИ";

  position:absolute;

  top:-5px;
  left:2px;

  color:
    #626962;

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .16em;
}


/* Сами карточки чуть отличаются по фону
   от верхнего intro-блока */

.sales-card{

  background:
    #0f120f
    !important;
}


.sales-card:hover{

  background:
    #121612
    !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

  .services-shell{

    padding:
      0 !important;
  }


  .services-intro{

    padding:
      18px 16px;

    border-radius:
      16px;

    margin-bottom:
      12px
      !important;
  }


  .services-intro::before{

    width:
      2px;
  }


  .services-intro h2{

    font-size:
      clamp(
        27px,
        7.5vw,
        34px
      );
  }


  .services-intro-text{

    padding-top:
      4px !important;
  }


  .services-intro-text strong{

    font-size:
      13px;
  }


  .services-intro-text p{

    font-size:
      12.5px;
  }


  .services-benefits{

    margin-bottom:
      24px !important;

    padding:
      8px 0 15px;
  }


  .services-benefits span{

    font-size:
      10.5px;
  }


  .sales-grid{

    padding-top:
      17px;
  }


  .sales-grid::before{

    font-size:
      7px;
  }

}




/* =========================================================
   ITRUMAK — SERVICES INTRO FINAL
========================================================= */

/* Общая верхняя зона */

.services-intro{
  position:relative;

  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);
  gap:clamp(28px,5vw,70px);

  align-items:center;

  margin:0 !important;

  padding:
    clamp(30px,5vw,58px)
    clamp(24px,5vw,64px);

  border-radius:24px;

  border:1px solid rgba(255,255,255,.055);

  background:
    radial-gradient(
      circle at 82% 20%,
      rgba(118,185,0,.10),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(20,24,20,.98),
      rgba(10,12,10,.99)
    ) !important;

  box-shadow:
    0 24px 70px rgba(0,0,0,.22);

  overflow:hidden;
}


/* тонкий NVIDIA / ITRUMAK акцент */

.services-intro::before{
  content:"";

  position:absolute;

  left:0;
  top:28px;
  bottom:28px;

  width:3px;

  border-radius:0 4px 4px 0;

  background:
    linear-gradient(
      180deg,
      transparent,
      var(--green-bright),
      transparent
    );
}


/* мягкое свечение */

.services-intro::after{
  content:"";

  position:absolute;

  width:300px;
  height:300px;

  right:-120px;
  top:-150px;

  border-radius:50%;

  background:rgba(118,185,0,.08);

  filter:blur(50px);

  pointer-events:none;
}


/* Метка УСЛУГИ ITRUMAK */

.services-intro .eyebrow{
  display:inline-flex;

  align-items:center;
  gap:8px;

  margin-bottom:14px;

  color:var(--green-bright);

  font-size:10px;
  line-height:1;

  font-weight:800;

  letter-spacing:.15em;

  text-transform:uppercase;
}


.services-intro .eyebrow::before{
  content:"";

  width:18px;
  height:2px;

  border-radius:10px;

  background:var(--green-bright);
}


/* Главный заголовок */

.services-intro h2{
  max-width:650px;

  margin:0;

  font-size:
    clamp(34px,4.2vw,58px) !important;

  line-height:.98 !important;

  letter-spacing:-.045em;

  font-weight:760;
}


.services-intro h2 br{
  display:block;
}


/* правая часть */

.services-intro-text{
  position:relative;
  z-index:2;

  padding:0 !important;

  border:0 !important;
  border-radius:0 !important;

  background:transparent !important;

  box-shadow:none !important;
}


.services-intro-text strong{
  display:block;

  margin-bottom:8px;

  color:#f1f4f1;

  font-size:
    clamp(15px,1.3vw,18px) !important;

  line-height:1.25;

  font-weight:700;
}


.services-intro-text p{
  max-width:430px;

  margin:0 0 17px;

  color:#969d96 !important;

  font-size:
    clamp(13px,1.05vw,15px) !important;

  line-height:1.55 !important;
}


/* Получить консультацию */

.services-top-link{
  position:relative;

  display:inline-flex !important;

  align-items:center;
  justify-content:center;

  min-height:42px;

  padding:0 17px;

  border-radius:12px;

  color:#0a0c0a !important;

  background:var(--green-bright);

  font-size:12px !important;
  font-weight:800 !important;

  text-decoration:none;

  box-shadow:
    0 8px 28px rgba(118,185,0,.12);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    filter .25s ease;
}


.services-top-link:hover{
  transform:translateY(-2px);

  filter:brightness(1.08);

  box-shadow:
    0 12px 34px rgba(118,185,0,.20);
}


/* =========================================================
   ТРИ ПРЕИМУЩЕСТВА
========================================================= */

.services-benefits{
  display:grid !important;

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

  gap:0 !important;

  margin:
    14px 0 0
    !important;

  padding:
    18px 0 0
    !important;

  border:0 !important;

  background:transparent !important;
}


.services-benefits span{
  position:relative;

  display:flex !important;

  align-items:center;

  min-height:48px;

  padding:
    0 22px 0 30px
    !important;

  border:0 !important;

  border-right:
    1px solid rgba(255,255,255,.07)
    !important;

  border-radius:0 !important;

  background:
    transparent !important;

  color:#a4aaa4 !important;

  font-size:
    clamp(11px,1vw,13px) !important;

  line-height:1.4;

  font-weight:550;
}


.services-benefits span:last-child{
  border-right:0 !important;
}


.services-benefits span::before{
  content:"✓";

  position:absolute;

  left:5px;

  color:var(--green-bright);

  font-size:13px;

  font-weight:900;
}


/* =========================================================
   НАШИ УСЛУГИ
========================================================= */

/*
   Сильно отделяем каталог услуг от вводного блока.
*/

.sales-grid{
  position:relative;

  margin-top:
    clamp(90px,10vw,140px)
    !important;

  padding-top:
    clamp(55px,6vw,78px)
    !important;

  border-top:
    1px solid rgba(255,255,255,.07);
}


/* старую маленькую подпись превращаем
   в полноценный заголовок */

.sales-grid::before{
  content:"Наши услуги" !important;

  position:absolute;

  top:0 !important;
  left:0 !important;

  transform:
    translateY(-50%);

  padding-right:24px;

  background:
    var(--bg, #090b09);

  color:#f2f5f2 !important;

  font-size:
    clamp(30px,4vw,48px)
    !important;

  line-height:1 !important;

  font-weight:750 !important;

  letter-spacing:
    -.035em !important;

  text-transform:
    none !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

  .services-intro{
    grid-template-columns:1fr;

    gap:24px;

    padding:
      27px 20px 25px;

    border-radius:18px;
  }


  .services-intro::before{
    top:20px;
    bottom:20px;

    width:2px;
  }


  .services-intro .eyebrow{
    margin-bottom:11px;

    font-size:8px;
  }


  .services-intro h2{
    font-size:
      clamp(31px,9vw,40px)
      !important;

    line-height:1
      !important;
  }


  .services-intro-text{
    padding-top:20px !important;

    border-top:
      1px solid rgba(255,255,255,.07)
      !important;
  }


  .services-intro-text strong{
    font-size:14px !important;
  }


  .services-intro-text p{
    font-size:13px !important;
  }


  .services-top-link{
    width:100%;

    min-height:44px;
  }


  /* преимущества на телефоне */

  .services-benefits{
    grid-template-columns:1fr;

    margin-top:10px !important;

    padding-top:8px !important;
  }


  .services-benefits span{
    min-height:42px;

    padding:
      0 10px 0 28px
      !important;

    border-right:0 !important;

    border-bottom:
      1px solid rgba(255,255,255,.055)
      !important;

    font-size:11.5px !important;
  }


  .services-benefits span:last-child{
    border-bottom:0 !important;
  }


  .services-benefits span::before{
    left:3px;
  }


  /* большой отступ перед каталогом */

  .sales-grid{
    margin-top:
      68px !important;

    padding-top:
      46px !important;
  }


  .sales-grid::before{
    padding-right:16px;

    font-size:
      clamp(27px,8vw,34px)
      !important;
  }

}


/* совсем маленькие телефоны */

@media(max-width:380px){

  .services-intro{
    padding:
      24px 17px 22px;
  }


  .services-intro h2{
    font-size:
      29px !important;
  }


  .sales-grid{
    margin-top:
      58px !important;
  }

}




/* =========================================================
   SERVICES INTRO — CLEAN / SAME STYLE AS SITE
========================================================= */

.services-intro{
  position:relative;

  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);
  gap:clamp(28px,4vw,54px);

  align-items:center;

  margin:0 !important;

  padding:
    clamp(26px,4vw,42px);

  border:
    1px solid rgba(255,255,255,.07)
    !important;

  border-radius:
    20px !important;

  background:
    linear-gradient(
      145deg,
      #111411,
      #0d100d
    ) !important;

  box-shadow:
    none !important;

  overflow:hidden;
}


/* Убираем лишние декоративные линии/свечения */

.services-intro::before,
.services-intro::after{
  display:none !important;
}


/* =========================================================
   LEFT
========================================================= */

.services-intro .eyebrow{
  margin-bottom:12px;

  color:var(--green);

  font-size:9px !important;

  font-weight:800;

  letter-spacing:.15em;

  text-transform:uppercase;
}


.services-intro h2{
  margin:0;

  max-width:650px;

  font-size:
    clamp(31px,3.7vw,48px)
    !important;

  line-height:1
    !important;

  letter-spacing:-.04em;
}


/* =========================================================
   RIGHT
========================================================= */

.services-intro-text{
  padding:0 !important;

  border:0 !important;

  border-radius:0 !important;

  background:transparent !important;

  box-shadow:none !important;
}


.services-intro-text strong{
  display:block;

  margin-bottom:7px;

  color:#eef1ee;

  font-size:15px !important;

  font-weight:700;
}


.services-intro-text p{
  margin:
    0 0 15px;

  color:#929992 !important;

  font-size:13px !important;

  line-height:1.55 !important;
}


/* Кнопка в стиле остальных CTA */

.services-top-link{
  min-height:40px;

  display:inline-flex !important;

  align-items:center;
  justify-content:center;

  padding:
    0 14px;

  border:
    1px solid rgba(118,185,0,.28);

  border-radius:
    9px;

  background:
    rgba(118,185,0,.075)
    !important;

  color:
    var(--green-bright)
    !important;

  font-size:
    11px !important;

  font-weight:750 !important;

  box-shadow:none !important;

  transition:
    background .25s,
    border-color .25s,
    transform .25s;
}


.services-top-link:hover{
  transform:
    translateY(-1px);

  background:
    rgba(118,185,0,.12)
    !important;

  border-color:
    rgba(118,185,0,.5);

  box-shadow:none !important;
}


/* =========================================================
   BENEFITS — SAME CARD FOOTER
========================================================= */

.services-benefits{
  display:grid !important;

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

  gap:0 !important;

  margin:
    12px 0 0
    !important;

  padding:
    14px 0 0
    !important;

  border-top:
    1px solid rgba(255,255,255,.06)
    !important;

  border-bottom:
    0 !important;

  background:
    transparent !important;
}


.services-benefits span{
  position:relative;

  min-height:42px;

  display:flex !important;

  align-items:center;

  padding:
    0 16px 0 28px
    !important;

  border:0 !important;

  border-right:
    1px solid rgba(255,255,255,.05)
    !important;

  border-radius:0 !important;

  background:
    transparent !important;

  color:#a1a7a1 !important;

  font-size:11px !important;

  line-height:1.4;
}


.services-benefits span:last-child{
  border-right:0 !important;
}


.services-benefits span::before{
  content:"";

  position:absolute;

  left:7px;
  top:50%;

  width:6px;
  height:6px;

  border-radius:50%;

  background:var(--green);

  transform:translateY(-50%);

  box-shadow:
    0 0 9px rgba(118,185,0,.4);
}


/* =========================================================
   CLEAR END OF BLOCK
========================================================= */

/*
 * Здесь главное — блок явно заканчивается,
 * а "Наши услуги" начинается отдельно.
 */

.services-intro + .services-benefits{
  margin-bottom:
    0 !important;
}


.sales-grid{
  margin-top:
    72px !important;

  padding-top:
    54px !important;

  border-top:
    1px solid rgba(255,255,255,.07)
    !important;
}


.sales-grid::before{
  content:"Наши услуги"
    !important;

  top:0 !important;
  left:0 !important;

  transform:
    translateY(-50%);

  padding-right:20px;

  background:
    #090b09
    !important;

  color:
    #f1f4f1
    !important;

  font-size:
    clamp(30px,3.7vw,46px)
    !important;

  font-weight:750
    !important;

  letter-spacing:-.035em
    !important;

  text-transform:none
    !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

  .services-intro{
    grid-template-columns:1fr;

    gap:20px;

    padding:
      20px 17px;

    border-radius:
      16px !important;
  }


  .services-intro h2{
    font-size:
      clamp(28px,8vw,35px)
      !important;
  }


  .services-intro-text{
    padding-top:
      17px !important;

    border-top:
      1px solid rgba(255,255,255,.06)
      !important;
  }


  .services-intro-text strong{
    font-size:
      13.5px !important;
  }


  .services-intro-text p{
    font-size:
      12.5px !important;
  }


  .services-top-link{
    width:100%;

    min-height:42px;
  }


  .services-benefits{
    grid-template-columns:1fr;

    padding-top:
      10px !important;
  }


  .services-benefits span{
    min-height:38px;

    padding:
      0 8px 0 25px
      !important;

    border-right:0 !important;

    border-bottom:
      1px solid rgba(255,255,255,.045)
      !important;

    font-size:
      10.5px !important;
  }


  .services-benefits span:last-child{
    border-bottom:0 !important;
  }


  .services-benefits span::before{
    left:4px;
  }


  .sales-grid{
    margin-top:
      58px !important;

    padding-top:
      45px !important;
  }


  .sales-grid::before{
    font-size:
      clamp(27px,8vw,34px)
      !important;
  }

}




/* =========================================================
   SERVICES — BENEFITS INSIDE MAIN CARD
========================================================= */

/*
   Верхняя карточка.
   Убираем нижнее скругление, потому что сразу под ней
   присоединяем три преимущества.
*/

.services-intro{
  margin-bottom:0 !important;

  border-radius:
    20px 20px 0 0
    !important;

  border-bottom:
    0 !important;
}


/*
   Три пункта становятся нижней частью той же карточки.
*/

.services-benefits{

  display:grid !important;

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

  gap:0 !important;

  margin:0 !important;

  padding:0 !important;

  border:
    1px solid rgba(255,255,255,.07)
    !important;

  border-top:
    1px solid rgba(255,255,255,.06)
    !important;

  border-radius:
    0 0 20px 20px
    !important;

  background:
    #0d100d
    !important;

  overflow:hidden;
}


/*
   Каждый пункт — часть одной общей полосы,
   а не отдельная карточка.
*/

.services-benefits span{

  position:relative;

  display:flex !important;

  align-items:center;

  min-height:58px;

  padding:
    12px 18px 12px 42px
    !important;

  border:0 !important;

  border-right:
    1px solid rgba(255,255,255,.055)
    !important;

  border-radius:0 !important;

  background:
    transparent !important;

  color:
    #aeb4ae !important;

  font-size:
    12px !important;

  line-height:1.4;

  font-weight:550;
}


.services-benefits span:last-child{
  border-right:0 !important;
}


/* зелёные точки */

.services-benefits span::before{

  content:"";

  position:absolute;

  left:22px;
  top:50%;

  width:7px;
  height:7px;

  border-radius:50%;

  background:
    var(--green-bright);

  transform:
    translateY(-50%);

  box-shadow:
    0 0 10px
    rgba(118,185,0,.35);
}


/* =========================================================
   НАШИ УСЛУГИ — ОТДЕЛЬНЫЙ БЛОК
========================================================= */

.sales-grid{

  margin-top:
    clamp(85px,8vw,120px)
    !important;

  padding-top:
    55px !important;

  border-top:
    1px solid rgba(255,255,255,.07)
    !important;
}


.sales-grid::before{

  content:"Наши услуги"
    !important;

  position:absolute;

  top:0 !important;
  left:0 !important;

  transform:
    translateY(-50%);

  padding-right:
    22px;

  background:
    #090b09 !important;

  color:
    #f2f5f2 !important;

  font-size:
    clamp(32px,4vw,48px)
    !important;

  line-height:1 !important;

  font-weight:
    750 !important;

  letter-spacing:
    -.035em !important;

  text-transform:
    none !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

  .services-intro{

    border-radius:
      16px 16px 0 0
      !important;
  }


  .services-benefits{

    grid-template-columns:
      1fr;

    border-radius:
      0 0 16px 16px
      !important;
  }


  .services-benefits span{

    min-height:
      46px;

    padding:
      10px 14px 10px 37px
      !important;

    border-right:
      0 !important;

    border-bottom:
      1px solid rgba(255,255,255,.05)
      !important;

    font-size:
      11px !important;
  }


  .services-benefits span:last-child{

    border-bottom:
      0 !important;
  }


  .services-benefits span::before{

    left:
      18px;

    width:
      6px;

    height:
      6px;
  }


  .sales-grid{

    margin-top:
      70px !important;

    padding-top:
      47px !important;
  }


  .sales-grid::before{

    font-size:
      31px !important;
  }

}




/* =========================================================
   SERVICES INTRO — FINAL STRUCTURE
========================================================= */

.services-intro{
  display:grid !important;

  grid-template-columns:
    minmax(0,1.15fr)
    minmax(260px,.85fr)
    !important;

  gap:
    24px 48px !important;

  align-items:start;

  padding:
    clamp(26px,4vw,42px)
    !important;

  border:
    1px solid rgba(255,255,255,.07)
    !important;

  border-radius:
    20px !important;

  background:
    linear-gradient(
      145deg,
      #111411,
      #0d100d
    ) !important;

  overflow:hidden;
}


/* без пристыкованной второй карточки */

.services-intro{
  border-bottom:
    1px solid rgba(255,255,255,.07)
    !important;
}


/* =========================================================
   BENEFITS ВНУТРИ ОСНОВНОГО БЛОКА
========================================================= */

.services-intro
.services-benefits{

  grid-column:
    1 / -1;

  display:grid !important;

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

  gap:0 !important;

  margin:
    6px 0 0
    !important;

  padding:
    16px 0 0
    !important;

  border:
    0 !important;

  border-top:
    1px solid rgba(255,255,255,.06)
    !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  overflow:visible;
}


.services-intro
.services-benefits span{

  position:relative;

  display:flex !important;

  align-items:center;

  min-height:44px;

  padding:
    8px 18px 8px 31px
    !important;

  border:0 !important;

  border-right:
    1px solid rgba(255,255,255,.05)
    !important;

  background:
    transparent !important;

  color:
    #a6ada6 !important;

  font-size:
    11px !important;

  line-height:
    1.4;
}


.services-intro
.services-benefits span:last-child{
  border-right:0 !important;
}


.services-intro
.services-benefits span::before{

  content:"";

  position:absolute;

  left:10px;
  top:50%;

  width:7px;
  height:7px;

  border-radius:50%;

  background:
    var(--green);

  transform:
    translateY(-50%);

  box-shadow:
    0 0 10px rgba(118,185,0,.45);
}


/* =========================================================
   КНОПКА В САМОМ НИЗУ
========================================================= */

.services-consultation-bottom{

  grid-column:
    1 / -1;

  display:flex;

  justify-content:flex-end;

  margin-top:
    4px;

  padding-top:
    18px;

  border-top:
    1px solid rgba(255,255,255,.06);
}


.services-consultation-bottom
.services-top-link{

  min-width:
    230px;

  min-height:
    43px;

  display:inline-flex !important;

  align-items:center;

  justify-content:
    space-between;

  padding:
    0 15px;

  border:
    1px solid rgba(118,185,0,.30);

  border-radius:
    10px;

  background:
    rgba(118,185,0,.075)
    !important;

  color:
    var(--green-bright)
    !important;

  font-size:
    11.5px !important;

  font-weight:
    750 !important;

  box-shadow:none !important;

  transition:
    background .25s,
    border-color .25s,
    transform .25s;
}


.services-consultation-bottom
.services-top-link:hover{

  transform:
    translateY(-2px);

  background:
    rgba(118,185,0,.13)
    !important;

  border-color:
    rgba(118,185,0,.55);
}


/* =========================================================
   НАШИ УСЛУГИ
========================================================= */

.sales-grid{

  margin-top:
    84px !important;

  padding-top:
    54px !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

  .services-intro{

    grid-template-columns:
      1fr !important;

    gap:
      18px !important;

    padding:
      20px 17px
      !important;

    border-radius:
      16px !important;
  }


  .services-intro-text{

    padding-top:
      16px !important;

    border-top:
      1px solid rgba(255,255,255,.06)
      !important;
  }


  .services-intro
  .services-benefits{

    grid-template-columns:
      1fr;

    margin-top:
      2px !important;

    padding-top:
      8px !important;
  }


  .services-intro
  .services-benefits span{

    min-height:
      40px;

    padding:
      7px 8px 7px 27px
      !important;

    border-right:
      0 !important;

    border-bottom:
      1px solid rgba(255,255,255,.045)
      !important;

    font-size:
      10.8px !important;
  }


  .services-intro
  .services-benefits span:last-child{

    border-bottom:
      0 !important;
  }


  .services-intro
  .services-benefits span::before{

    left:
      5px;
  }


  .services-consultation-bottom{

    justify-content:
      stretch;

    margin-top:
      0;

    padding-top:
      15px;
  }


  .services-consultation-bottom
  .services-top-link{

    width:100%;

    min-width:0;

    min-height:
      44px;
  }


  .sales-grid{

    margin-top:
      65px !important;
  }

}




/* =========================================================
   НАШИ УСЛУГИ — CLEAN ITRUMAK STYLE
========================================================= */

.sales-grid{
  position:relative !important;

  /* нормальный воздух после предыдущего блока */
  margin-top:
    clamp(72px, 8vw, 110px)
    !important;

  padding-top:
    clamp(82px, 8vw, 105px)
    !important;

  /* убираем старую линию */
  border-top:
    0 !important;
}


/* Маленькая фирменная метка */

.sales-grid::after{
  content:"ITRUMAK  /  SERVICES";

  position:absolute;

  top:0;
  left:0;

  display:flex;

  align-items:center;

  height:24px;

  color:
    var(--green-bright);

  font-size:
    9px;

  line-height:1;

  font-weight:
    800;

  letter-spacing:
    .15em;

  text-transform:
    uppercase;

  opacity:.9;
}


/* Основной заголовок */

.sales-grid::before{
  content:"Наши услуги"
    !important;

  position:absolute
    !important;

  top:31px
    !important;

  left:0
    !important;

  transform:none
    !important;

  margin:0
    !important;

  padding:0
    !important;

  background:
    transparent
    !important;

  color:
    #f1f4f1
    !important;

  font-family:
    inherit
    !important;

  font-size:
    clamp(30px, 3.5vw, 44px)
    !important;

  line-height:
    1.05
    !important;

  font-weight:
    700
    !important;

  letter-spacing:
    -.035em
    !important;

  text-transform:
    none
    !important;

  white-space:
    nowrap;

  border:0
    !important;

  box-shadow:
    none
    !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

  .sales-grid{

    margin-top:
      58px
      !important;

    padding-top:
      76px
      !important;
  }


  .sales-grid::after{

    top:0;

    height:20px;

    font-size:
      7.5px;

    letter-spacing:
      .14em;
  }


  .sales-grid::before{

    top:
      27px
      !important;

    font-size:
      clamp(27px, 8vw, 33px)
      !important;

    line-height:
      1.05
      !important;

    letter-spacing:
      -.03em
      !important;
  }

}


/* Очень узкие телефоны */

@media(max-width:380px){

  .sales-grid{

    margin-top:
      52px
      !important;

    padding-top:
      72px
      !important;
  }


  .sales-grid::before{

    font-size:
      27px
      !important;
  }

}




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

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

  html{
    scroll-behavior:auto !important;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }

}



/* =========================================================
   DETAIL PANEL
========================================================= */

.tech-card-detail{
  position:absolute;

  z-index:20;

  left:50%;
  top:50%;

  width:
    min(78%, 610px);

  padding:
    clamp(22px,3vw,32px);

  border:
    1px solid rgba(118,185,0,.19);

  border-radius:
    20px;

  background:
    rgba(12,16,12,.96);

  box-shadow:
    0 30px 90px rgba(0,0,0,.52);

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transform:
    translate(-50%,-46%)
    scale(.96);

  transition:
    opacity .28s ease,
    transform .35s cubic-bezier(.2,.8,.2,1),
    visibility .28s;
}


.tech-card-detail.is-open{
  opacity:1;

  visibility:visible;

  pointer-events:auto;

  transform:
    translate(-50%,-50%)
    scale(1);
}


/* небольшой зелёный свет */

.tech-card-detail::before{
  content:"";

  position:absolute;

  left:28px;
  top:0;

  width:72px;
  height:2px;

  background:
    linear-gradient(
      90deg,
      var(--green-bright),
      transparent
    );
}


.tech-card-detail-label{
  margin-bottom:9px;

  color:
    var(--green-bright);

  font-size:8px;

  font-weight:800;

  letter-spacing:.17em;

  text-transform:uppercase;
}


.tech-card-detail h3{
  max-width:500px;

  margin:
    0 42px 10px 0;

  color:#eef3ee;

  font-size:
    clamp(22px,3vw,32px);

  line-height:1.05;

  letter-spacing:-.035em;
}


.tech-card-detail > p{
  max-width:520px;

  margin:
    0 0 19px;

  color:#8f978f;

  font-size:13px;

  line-height:1.6;
}


/* =========================================================
   LIST
========================================================= */

.tech-card-detail-list{
  display:grid;

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

  gap:0;

  margin-top:4px;

  border-top:
    1px solid rgba(255,255,255,.06);
}


.tech-card-detail-list span{
  position:relative;

  min-height:42px;

  display:flex;

  align-items:center;

  padding:
    9px 12px 9px 22px;

  border-bottom:
    1px solid rgba(255,255,255,.05);

  color:#adb4ad;

  font-size:11px;

  line-height:1.35;
}


.tech-card-detail-list span:nth-child(odd){
  border-right:
    1px solid rgba(255,255,255,.05);
}


.tech-card-detail-list span::before{
  content:"";

  position:absolute;

  left:5px;

  width:6px;
  height:6px;

  border-radius:50%;

  background:
    var(--green);

  box-shadow:
    0 0 8px rgba(118,185,0,.4);
}


/* =========================================================
   BOTTOM
========================================================= */

.tech-card-detail-bottom{
  display:flex;

  align-items:center;

  justify-content:
    space-between;

  gap:18px;

  margin-top:20px;
}


.tech-card-detail-bottom > span{
  color:#c5cbc5;

  font-size:11px;

  line-height:1.45;
}


.tech-card-detail-cta{
  flex:0 0 auto;

  min-height:40px;

  display:inline-flex;

  align-items:center;

  gap:18px;

  padding:
    0 13px;

  border:
    1px solid rgba(118,185,0,.28);

  border-radius:9px;

  background:
    rgba(118,185,0,.075);

  color:
    var(--green-bright);

  font-size:11px;

  font-weight:750;

  text-decoration:none;

  transition:
    background .25s ease,
    transform .25s ease,
    border-color .25s ease;
}


.tech-card-detail-cta:hover{
  transform:
    translateY(-2px);

  background:
    rgba(118,185,0,.13);

  border-color:
    rgba(118,185,0,.52);
}


.tech-card-detail-cta i{
  font-style:normal;

  font-size:15px;
}


/* =========================================================
   CLOSE
========================================================= */

.tech-card-detail-close{
  position:absolute;

  top:13px;
  right:13px;

  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  padding:0;

  border:
    1px solid rgba(255,255,255,.07);

  border-radius:50%;

  background:
    rgba(255,255,255,.025);

  color:#919891;

  font-size:22px;

  line-height:1;

  cursor:pointer;

  transition:
    color .2s,
    background .2s,
    transform .2s;
}


.tech-card-detail-close:hover{
  color:#fff;

  background:
    rgba(255,255,255,.07);

  transform:
    rotate(90deg);
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

  .tech-card::after{
    top:9px;
    right:9px;

    width:20px;
    height:20px;

    font-size:13px;
  }


  .tech-card-detail{
    left:12px;
    right:12px;

    top:auto;
    bottom:12px;

    width:auto;

    max-height:
      calc(100% - 24px);

    overflow:auto;

    padding:
      20px 17px;

    border-radius:
      16px;

    transform:
      translateY(18px)
      scale(.98);
  }


  .tech-card-detail.is-open{
    transform:
      translateY(0)
      scale(1);
  }


  .tech-card-detail h3{
    font-size:
      clamp(21px,6vw,27px);
  }


  .tech-card-detail > p{
    font-size:12px;

    line-height:1.55;
  }


  .tech-card-detail-list{
    grid-template-columns:1fr;
  }


  .tech-card-detail-list span{
    min-height:37px;

    border-right:0 !important;
  }


  .tech-card-detail-bottom{
    flex-direction:column;

    align-items:stretch;

    gap:12px;
  }


  .tech-card-detail-cta{
    width:100%;

    justify-content:
      space-between;

    min-height:43px;
  }

}


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

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

  .tech-card,
  .tech-card-detail,
  .tech-card-detail-close{
    transition:none !important;
  }

}




/* =====================================================
     DETAIL — настоящий bottom sheet
  ===================================================== */

  .tech-card-detail{
    position:fixed !important;

    z-index:
      9999 !important;

    left:
      12px !important;

    right:
      12px !important;

    bottom:
      calc(
        12px + env(safe-area-inset-bottom)
      ) !important;

    top:
      auto !important;

    width:
      auto !important;

    max-width:
      none !important;

    max-height:
      min(
        72vh,
        620px
      ) !important;

    overflow-y:
      auto !important;

    padding:
      22px 18px
      calc(
        18px + env(safe-area-inset-bottom)
      )
      !important;

    border-radius:
      20px !important;

    border:
      1px solid rgba(118,185,0,.18)
      !important;

    background:
      rgba(10,13,10,.985)
      !important;

    box-shadow:
      0 24px 80px rgba(0,0,0,.65)
      !important;

    backdrop-filter:
      blur(28px)
      !important;

    -webkit-backdrop-filter:
      blur(28px)
      !important;

    opacity:
      0;

    visibility:
      hidden;

    pointer-events:
      none;

    transform:
      translateY(30px)
      scale(.98)
      !important;

    transition:
      opacity .25s ease,
      transform .3s cubic-bezier(.2,.8,.2,1),
      visibility .25s;
  }


  .tech-card-detail.is-open{
    opacity:
      1;

    visibility:
      visible;

    pointer-events:
      auto;

    transform:
      translateY(0)
      scale(1)
      !important;
  }


  /* затемнение страницы */

  body::after{
    content:"";

    position:fixed;

    z-index:
      9990;

    inset:0;

    background:
      rgba(0,0,0,.58);

    backdrop-filter:
      blur(2px);

    -webkit-backdrop-filter:
      blur(2px);

    opacity:
      0;

    visibility:
      hidden;

    pointer-events:
      none;

    transition:
      opacity .25s ease,
      visibility .25s;
  }


  body.tech-modal-open::after{
    opacity:
      1;

    visibility:
      visible;

    pointer-events:
      auto;
  }


  /* =====================================================
     CLOSE BUTTON
  ===================================================== */

  .tech-card-detail-close{
    position:
      absolute !important;

    top:
      12px !important;

    right:
      12px !important;

    width:
      34px !important;

    height:
      34px !important;

    padding:
      0 !important;

    border-radius:
      50% !important;

    background:
      rgba(255,255,255,.055)
      !important;

    color:
      #d9ded9 !important;

    font-size:
      21px !important;
  }


  /* =====================================================
     CONTENT
  ===================================================== */

  .tech-card-detail-label{
    padding-right:
      46px;

    font-size:
      8px !important;
  }


  .tech-card-detail h3{
    margin:
      7px 42px 10px 0 !important;

    font-size:
      clamp(
        24px,
        7vw,
        30px
      ) !important;

    line-height:
      1.05 !important;
  }


  .tech-card-detail > p{
    margin-bottom:
      16px !important;

    font-size:
      13px !important;

    line-height:
      1.55 !important;
  }


  /* =====================================================
     LIST
  ===================================================== */

  .tech-card-detail-list{
    grid-template-columns:
      1fr !important;

    margin-top:
      4px !important;
  }


  .tech-card-detail-list span{
    min-height:
      42px !important;

    padding:
      9px 8px 9px 25px
      !important;

    border-right:
      0 !important;

    font-size:
      11.5px !important;
  }


  /* =====================================================
     BOTTOM
  ===================================================== */

  .tech-card-detail-bottom{
    flex-direction:
      column !important;

    align-items:
      stretch !important;

    gap:
      13px !important;

    margin-top:
      18px !important;
  }


  .tech-card-detail-bottom > span{
    font-size:
      11.5px !important;

    line-height:
      1.5 !important;
  }


  .tech-card-detail-cta{
    width:
      100% !important;

    min-height:
      46px !important;

    justify-content:
      space-between !important;

    font-size:
      12px !important;
  }


  /* =====================================================
     ORIGINAL TECH CARDS
  ===================================================== */

  .tech-card{
    cursor:
      pointer;
  }


  .tech-card::after{
    top:
      8px !important;

    right:
      8px !important;

    width:
      21px !important;

    height:
      21px !important;

    font-size:
      13px !important;
  }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media(max-width:390px){

  .visual{
    min-height:
      520px !important;
  }


  .tech-card-detail{
    left:
      8px !important;

    right:
      8px !important;

    bottom:
      calc(
        8px + env(safe-area-inset-bottom)
      )
      !important;

    max-height:
      76vh !important;

    padding:
      20px 15px
      calc(
        16px + env(safe-area-inset-bottom)
      )
      !important;

    border-radius:
      18px !important;
  }


  .tech-card-detail h3{
    font-size:
      23px !important;
  }


  .tech-card-detail > p{
    font-size:
      12.5px !important;
  }

}



/* =========================================================
   ITRUMAK — EXPANDING TECH CARDS
========================================================= */

.tech-card{
  cursor:pointer;

  overflow:hidden;

  z-index:3;

  transition:
    width .38s cubic-bezier(.2,.8,.2,1),
    height .38s cubic-bezier(.2,.8,.2,1),
    transform .38s cubic-bezier(.2,.8,.2,1),
    border-color .25s ease,
    background .25s ease,
    box-shadow .3s ease;
}


.tech-card:hover{
  border-color:
    rgba(118,185,0,.24);
}


.tech-card::after{
  content:"+";

  position:absolute;

  top:12px;
  right:12px;

  width:24px;
  height:24px;

  display:grid;
  place-items:center;

  border:
    1px solid rgba(118,185,0,.18);

  border-radius:50%;

  color:
    var(--green-bright);

  background:
    rgba(118,185,0,.055);

  font-size:15px;

  line-height:1;

  transition:
    transform .3s ease,
    background .3s ease;
}


.tech-card.is-expanded{
  z-index:30;

  width:
    min(470px,55%) !important;

  height:
    auto !important;

  min-height:
    310px;

  padding-bottom:
    22px;

  border-color:
    rgba(118,185,0,.28);

  background:
    rgba(14,18,14,.98);

  box-shadow:
    0 25px 65px rgba(0,0,0,.38);
}


.tech-card.is-expanded::after{
  content:"×";

  transform:
    rotate(180deg);

  background:
    rgba(118,185,0,.12);
}


/* =========================================================
   EXPANDED CONTENT
========================================================= */

.tech-card-more{
  max-height:0;

  margin-top:0;

  padding-top:0;

  overflow:hidden;

  opacity:0;

  transform:
    translateY(-5px);

  transition:
    max-height .38s ease,
    opacity .25s ease,
    margin .38s ease,
    padding .38s ease,
    transform .38s ease;
}


.tech-card.is-expanded
.tech-card-more{
  max-height:
    260px;

  margin-top:
    16px;

  padding-top:
    15px;

  border-top:
    1px solid rgba(255,255,255,.06);

  opacity:1;

  transform:
    translateY(0);
}


.tech-card-more p{
  margin:
    0 0 12px;

  color:
    #909890;

  font-size:
    11px;

  line-height:
    1.5;
}


.tech-card-more ul{
  display:grid;

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

  gap:
    5px 12px;

  margin:
    0 0 14px;

  padding:0;

  list-style:none;
}


.tech-card-more li{
  position:relative;

  padding-left:
    13px;

  color:
    #b2b8b2;

  font-size:
    9px;

  line-height:
    1.4;
}


.tech-card-more li::before{
  content:"";

  position:absolute;

  left:0;
  top:.48em;

  width:5px;
  height:5px;

  border-radius:50%;

  background:
    var(--green);
}


.tech-card-more a{
  display:inline-flex;

  align-items:center;

  min-height:34px;

  padding:
    0 11px;

  border:
    1px solid rgba(118,185,0,.24);

  border-radius:
    8px;

  background:
    rgba(118,185,0,.065);

  color:
    var(--green-bright);

  font-size:
    9.5px;

  font-weight:
    700;

  text-decoration:none;
}


/* =========================================================
   DESKTOP POSITIONS WHEN EXPANDED
========================================================= */

@media(min-width:701px){

  .tech-card.t1.is-expanded{
    width:52% !important;
  }


  .tech-card.t2.is-expanded{
    width:52% !important;

    transform:
      translateX(-7%);
  }


  .tech-card.t3.is-expanded{
    width:52% !important;
  }


  .tech-card.t4.is-expanded{
    width:52% !important;

    transform:
      translateX(-8%);
  }

}


/* =========================================================
   MOBILE — NORMAL FLOW WHEN OPEN
========================================================= */

@media(max-width:700px){

  /*
   * На телефоне absolute-композиция хороша
   * пока всё закрыто.
   * После открытия превращаем visual
   * в обычный вертикальный список.
   */

  .visual.has-expanded-card{
    display:flex !important;

    flex-direction:column;

    gap:10px;

    min-height:0 !important;

    height:auto !important;

    padding:
      14px !important;

    overflow:visible !important;
  }


  .visual.has-expanded-card
  .visual-glow{
    display:none;
  }


  .visual.has-expanded-card
  .tech-card{
    position:relative !important;

    inset:auto !important;

    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;

    width:100% !important;

    transform:none !important;

    opacity:1 !important;

    filter:none !important;
  }


  /*
   * Закрытые становятся компактными.
   */

  .visual.has-expanded-card
  .tech-card:not(.is-expanded){
    min-height:
      82px !important;

    height:
      82px !important;
  }


  /*
   * Открытая увеличивается естественно.
   */

  .visual.has-expanded-card
  .tech-card.is-expanded{
    min-height:
      285px !important;

    height:auto !important;

    padding-bottom:
      18px;
  }


  .tech-card-more ul{
    grid-template-columns:
      1fr 1fr;
  }


  .tech-card-more p{
    font-size:
      11.5px;
  }


  .tech-card-more li{
    font-size:
      10px;
  }


  .tech-card-more a{
    width:100%;

    justify-content:
      space-between;

    min-height:
      38px;

    font-size:
      10.5px;
  }

}


@media(max-width:390px){

  .tech-card-more ul{
    grid-template-columns:
      1fr;
  }


  .visual.has-expanded-card
  .tech-card.is-expanded{
    min-height:
      310px !important;
  }

}



/* =========================================================
   MOBILE EXPAND FIX
   Только выбранная карточка раскрывается
========================================================= */

@media(max-width:700px){

  /* Базовое состояние — ВСЕ карточки компактные */

  .visual .tech-card{
    height:auto !important;

    min-height:0 !important;
  }


  .visual .tech-card .tech-card-more{
    max-height:0 !important;

    margin-top:0 !important;

    padding-top:0 !important;

    border-top:0 !important;

    opacity:0 !important;

    visibility:hidden !important;

    overflow:hidden !important;

    pointer-events:none !important;

    transform:
      translateY(-4px) !important;
  }


  /* Только открытая карточка */

  .visual .tech-card.is-expanded{
    min-height:
      275px !important;

    height:auto !important;
  }


  .visual .tech-card.is-expanded
  .tech-card-more{

    max-height:
      320px !important;

    margin-top:
      14px !important;

    padding-top:
      14px !important;

    border-top:
      1px solid rgba(255,255,255,.06)
      !important;

    opacity:
      1 !important;

    visibility:
      visible !important;

    pointer-events:
      auto !important;

    transform:
      translateY(0) !important;
  }


  /* Когда одна раскрыта,
     остальные остаются маленькими */

  .visual.has-expanded-card
  .tech-card:not(.is-expanded){

    min-height:
      78px !important;

    height:
      78px !important;

    overflow:
      hidden !important;
  }


  .visual.has-expanded-card
  .tech-card:not(.is-expanded)
  .tech-card-more{

    display:
      none !important;
  }


  /* В открытой карточке содержимое показываем */

  .visual.has-expanded-card
  .tech-card.is-expanded
  .tech-card-more{

    display:
      block !important;
  }


  /* Кнопка + / × */

  .tech-card::after{
    content:
      "+" !important;
  }


  .tech-card.is-expanded::after{
    content:
      "×" !important;
  }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media(max-width:390px){

  .visual .tech-card.is-expanded{

    min-height:
      300px !important;
  }


  .visual.has-expanded-card
  .tech-card:not(.is-expanded){

    min-height:
      74px !important;

    height:
      74px !important;
  }

}



/* =========================================================
   ITRUMAK TECH CARDS
   MOBILE FIT FINAL
========================================================= */

@media(max-width:700px){

  /*
   * При раскрытии превращаем visual
   * в нормальный вертикальный контейнер.
   */

  .visual.has-expanded-card{

    display:flex !important;

    flex-direction:column !important;

    align-items:stretch !important;

    gap:10px !important;

    width:100% !important;

    min-height:0 !important;

    height:auto !important;

    padding:
      12px !important;

    overflow:
      visible !important;
  }


  /*
   * Светящийся декоративный фон
   * во время раскрытия не нужен.
   */

  .visual.has-expanded-card
  .visual-glow{

    display:none !important;
  }


  /*
   * Все карточки временно становятся
   * частью обычного потока.
   */

  .visual.has-expanded-card
  .tech-card{

    position:relative !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    inset:auto !important;

    width:100% !important;

    max-width:none !important;

    margin:0 !important;

    transform:none !important;

    opacity:1 !important;

    filter:none !important;
  }


  /*
   * Открытая карточка всегда сверху.
   */

  .visual.has-expanded-card
  .tech-card.is-expanded{

    order:-10 !important;

    width:100% !important;

    min-height:0 !important;

    height:auto !important;

    padding:
      17px !important;

    border-color:
      rgba(118,185,0,.28)
      !important;
  }


  /*
   * Остальные остаются компактными.
   */

  .visual.has-expanded-card
  .tech-card:not(.is-expanded){

    order:0;

    height:auto !important;

    min-height:
      76px !important;

    padding:
      13px 42px 13px 15px
      !important;

    overflow:hidden !important;
  }


  /*
   * В закрытых карточках оставляем
   * только основной короткий текст.
   */

  .visual.has-expanded-card
  .tech-card:not(.is-expanded)
  .tech-card-more{

    display:none !important;
  }


  /*
   * Раскрываемое содержимое.
   */

  .visual.has-expanded-card
  .tech-card.is-expanded
  .tech-card-more{

    display:block !important;

    max-height:
      500px !important;

    margin-top:
      14px !important;

    padding-top:
      14px !important;

    opacity:1 !important;

    visibility:visible !important;

    overflow:visible !important;

    pointer-events:auto !important;

    transform:none !important;
  }


  /*
   * Описание — не растягиваем слишком сильно.
   */

  .tech-card-more p{

    margin:
      0 0 12px !important;

    font-size:
      11.5px !important;

    line-height:
      1.5 !important;
  }


  /*
   * Две колонки ещё нормально помещаются
   * на большинстве телефонов.
   */

  .tech-card-more ul{

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

    gap:
      7px 10px !important;
  }


  .tech-card-more li{

    font-size:
      10px !important;
  }


  .tech-card-more a{

    width:100% !important;

    min-height:
      40px !important;

    justify-content:
      space-between !important;

    margin-top:
      3px;

    font-size:
      10.5px !important;
  }


  /*
   * + / × не выезжает наружу.
   */

  .tech-card::after{

    top:
      11px !important;

    right:
      11px !important;
  }

}



/* =========================================================
   NARROW MOBILE
========================================================= */

@media(max-width:390px){

  .visual.has-expanded-card{

    padding:
      9px !important;

    gap:
      8px !important;
  }


  .visual.has-expanded-card
  .tech-card.is-expanded{

    padding:
      15px !important;
  }


  .tech-card-more ul{

    grid-template-columns:
      1fr !important;
  }


  .visual.has-expanded-card
  .tech-card:not(.is-expanded){

    min-height:
      72px !important;
  }

}



/* =========================================================
   ITRUMAK TECH CARDS
   MOBILE FIT FINAL
========================================================= */

@media(max-width:700px){

  /*
   * При раскрытии превращаем visual
   * в нормальный вертикальный контейнер.
   */

  .visual.has-expanded-card{

    display:flex !important;

    flex-direction:column !important;

    align-items:stretch !important;

    gap:10px !important;

    width:100% !important;

    min-height:0 !important;

    height:auto !important;

    padding:
      12px !important;

    overflow:
      visible !important;
  }


  /*
   * Светящийся декоративный фон
   * во время раскрытия не нужен.
   */

  .visual.has-expanded-card
  .visual-glow{

    display:none !important;
  }


  /*
   * Все карточки временно становятся
   * частью обычного потока.
   */

  .visual.has-expanded-card
  .tech-card{

    position:relative !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    inset:auto !important;

    width:100% !important;

    max-width:none !important;

    margin:0 !important;

    transform:none !important;

    opacity:1 !important;

    filter:none !important;
  }


  /*
   * Открытая карточка всегда сверху.
   */

  .visual.has-expanded-card
  .tech-card.is-expanded{

    order:-10 !important;

    width:100% !important;

    min-height:0 !important;

    height:auto !important;

    padding:
      17px !important;

    border-color:
      rgba(118,185,0,.28)
      !important;
  }


  /*
   * Остальные остаются компактными.
   */

  .visual.has-expanded-card
  .tech-card:not(.is-expanded){

    order:0;

    height:auto !important;

    min-height:
      76px !important;

    padding:
      13px 42px 13px 15px
      !important;

    overflow:hidden !important;
  }


  /*
   * В закрытых карточках оставляем
   * только основной короткий текст.
   */

  .visual.has-expanded-card
  .tech-card:not(.is-expanded)
  .tech-card-more{

    display:none !important;
  }


  /*
   * Раскрываемое содержимое.
   */

  .visual.has-expanded-card
  .tech-card.is-expanded
  .tech-card-more{

    display:block !important;

    max-height:
      500px !important;

    margin-top:
      14px !important;

    padding-top:
      14px !important;

    opacity:1 !important;

    visibility:visible !important;

    overflow:visible !important;

    pointer-events:auto !important;

    transform:none !important;
  }


  /*
   * Описание — не растягиваем слишком сильно.
   */

  .tech-card-more p{

    margin:
      0 0 12px !important;

    font-size:
      11.5px !important;

    line-height:
      1.5 !important;
  }


  /*
   * Две колонки ещё нормально помещаются
   * на большинстве телефонов.
   */

  .tech-card-more ul{

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

    gap:
      7px 10px !important;
  }


  .tech-card-more li{

    font-size:
      10px !important;
  }


  .tech-card-more a{

    width:100% !important;

    min-height:
      40px !important;

    justify-content:
      space-between !important;

    margin-top:
      3px;

    font-size:
      10.5px !important;
  }


  /*
   * + / × не выезжает наружу.
   */

  .tech-card::after{

    top:
      11px !important;

    right:
      11px !important;
  }

}



/* =========================================================
   NARROW MOBILE
========================================================= */

@media(max-width:390px){

  .visual.has-expanded-card{

    padding:
      9px !important;

    gap:
      8px !important;
  }


  .visual.has-expanded-card
  .tech-card.is-expanded{

    padding:
      15px !important;
  }


  .tech-card-more ul{

    grid-template-columns:
      1fr !important;
  }


  .visual.has-expanded-card
  .tech-card:not(.is-expanded){

    min-height:
      72px !important;
  }

}



/* =========================================================
   ITRUMAK — MOBILE TECH CARD EXPAND V3
   FINAL OVERRIDE
========================================================= */

@media (max-width: 700px) {

  /*
   * Когда одна из карточек открыта,
   * visual становится обычным вертикальным блоком.
   */

  .visual.has-expanded-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    padding: 10px !important;
    gap: 9px !important;

    overflow: visible !important;
  }


  .visual.has-expanded-card .visual-glow {
    display: none !important;
  }


  /*
   * Убираем абсолютное позиционирование
   * только когда открыта карточка.
   */

  .visual.has-expanded-card .tech-card {
    position: relative !important;

    inset: auto !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    transform: none !important;

    opacity: 1 !important;

    overflow: hidden !important;
  }


  /*
   * ОТКРЫТАЯ КАРТОЧКА
   */

  .visual.has-expanded-card .tech-card.is-expanded {
    order: -100 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    padding: 17px !important;

    overflow: visible !important;
  }


  /*
   * ВАЖНО:
   * показываем дополнительное описание.
   */

  .visual.has-expanded-card
  .tech-card.is-expanded
  .tech-card-more {

    display: block !important;

    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 14px 0 0 !important;
    padding: 14px 0 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    overflow: visible !important;

    transform: none !important;

    pointer-events: auto !important;
  }


  /*
   * Если старые правила скрывали внутренности,
   * принудительно возвращаем их.
   */

  .visual.has-expanded-card
  .tech-card.is-expanded
  .tech-card-more p {

    display: block !important;

    height: auto !important;

    margin: 0 0 12px !important;

    opacity: 1 !important;
    visibility: visible !important;

    font-size: 12px !important;
    line-height: 1.5 !important;
  }


  .visual.has-expanded-card
  .tech-card.is-expanded
  .tech-card-more ul {

    display: grid !important;

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

    gap: 8px 12px !important;

    height: auto !important;

    margin: 0 0 14px !important;
    padding: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;
  }


  .visual.has-expanded-card
  .tech-card.is-expanded
  .tech-card-more li {

    display: block !important;

    height: auto !important;

    opacity: 1 !important;
    visibility: visible !important;
  }


  .visual.has-expanded-card
  .tech-card.is-expanded
  .tech-card-more a {

    display: flex !important;

    width: 100% !important;
    min-height: 42px !important;

    align-items: center !important;
    justify-content: space-between !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;
  }


  /*
   * Остальные карточки компактные.
   */

  .visual.has-expanded-card
  .tech-card:not(.is-expanded) {

    order: 0 !important;

    height: auto !important;
    min-height: 74px !important;
    max-height: 90px !important;

    padding: 13px 44px 13px 15px !important;

    overflow: hidden !important;
  }


  /*
   * У остальных описание скрыто.
   */

  .visual.has-expanded-card
  .tech-card:not(.is-expanded)
  .tech-card-more {

    display: none !important;

    height: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;
  }


  /*
   * Крестик / плюс.
   */

  .visual.has-expanded-card .tech-card::after {
    top: 11px !important;
    right: 11px !important;
  }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 390px) {

  .visual.has-expanded-card
  .tech-card.is-expanded
  .tech-card-more ul {

    grid-template-columns: 1fr !important;
  }

}




/* =========================================================
   ITRUMAK — MOBILE TECH CARDS SIMPLE FLOW
   FINAL MOBILE LAYOUT
========================================================= */

@media (max-width:700px) {

  /*
   * На телефоне больше не используем
   * абсолютную "парящую" композицию.
   */

  .visual {
    display:flex !important;
    flex-direction:column !important;

    gap:10px !important;

    width:100% !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    padding:10px !important;

    overflow:visible !important;
  }


  .visual-glow {
    display:none !important;
  }


  /*
   * Все 4 карточки — обычные элементы потока.
   */

  .visual .tech-card {
    position:relative !important;

    inset:auto !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    width:100% !important;
    max-width:none !important;

    height:auto !important;
    min-height:76px !important;
    max-height:none !important;

    margin:0 !important;

    padding:
      14px 44px 14px 15px !important;

    transform:none !important;

    opacity:1 !important;
    filter:none !important;

    overflow:hidden !important;

    z-index:auto !important;
  }


  /*
   * Обычное состояние:
   * подробности скрыты.
   */

  .visual .tech-card .tech-card-more {
    display:block !important;

    width:100% !important;

    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;

    opacity:0 !important;
    visibility:hidden !important;

    overflow:hidden !important;

    transform:
      translateY(-4px) !important;

    pointer-events:none !important;

    transition:
      max-height .32s ease,
      opacity .22s ease,
      margin .32s ease,
      padding .32s ease,
      transform .32s ease !important;
  }


  /*
   * Выбранная карточка просто становится выше.
   */

  .visual .tech-card.is-expanded {
    min-height:0 !important;
    height:auto !important;

    padding:
      16px !important;

    border-color:
      rgba(118,185,0,.28) !important;

    background:
      rgba(14,18,14,.98) !important;

    overflow:visible !important;

    z-index:2 !important;
  }


  /*
   * Показываем описание только внутри неё.
   */

  .visual
  .tech-card.is-expanded
  .tech-card-more {

    height:auto !important;

    min-height:0 !important;
    max-height:600px !important;

    margin:
      14px 0 0 !important;

    padding:
      14px 0 0 !important;

    border-top:
      1px solid rgba(255,255,255,.06)
      !important;

    opacity:1 !important;
    visibility:visible !important;

    overflow:visible !important;

    transform:none !important;

    pointer-events:auto !important;
  }


  .visual
  .tech-card.is-expanded
  .tech-card-more p {

    display:block !important;

    margin:
      0 0 12px !important;

    color:#969e96 !important;

    font-size:
      12px !important;

    line-height:
      1.55 !important;

    opacity:1 !important;
    visibility:visible !important;
  }


  .visual
  .tech-card.is-expanded
  .tech-card-more ul {

    display:grid !important;

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

    gap:
      7px 12px !important;

    margin:
      0 0 14px !important;

    padding:0 !important;

    opacity:1 !important;
    visibility:visible !important;
  }


  .visual
  .tech-card.is-expanded
  .tech-card-more li {

    display:block !important;

    opacity:1 !important;
    visibility:visible !important;

    font-size:
      10px !important;
  }


  .visual
  .tech-card.is-expanded
  .tech-card-more a {

    display:flex !important;

    align-items:center !important;

    justify-content:
      space-between !important;

    width:100% !important;

    min-height:42px !important;

    opacity:1 !important;
    visibility:visible !important;

    pointer-events:auto !important;
  }


  /*
   * + / ×
   */

  .visual .tech-card::after {
    top:12px !important;
    right:12px !important;
  }


  .visual .tech-card.is-expanded::after {
    content:"×" !important;
  }


  /*
   * Никаких перестановок карточек.
   */

  .visual.has-expanded-card
  .tech-card,
  .visual.has-expanded-card
  .tech-card.is-expanded,
  .visual.has-expanded-card
  .tech-card:not(.is-expanded) {

    order:initial !important;

    position:relative !important;

    transform:none !important;
  }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width:390px) {

  .visual {
    gap:8px !important;

    padding:8px !important;
  }


  .visual .tech-card {
    min-height:72px !important;
  }


  .visual
  .tech-card.is-expanded
  .tech-card-more ul {

    grid-template-columns:
      1fr !important;
  }

}



/* =========================================================
   ITRUMAK TECH CARDS — MOBILE FINAL V4
   Этот блок должен оставаться последним.
========================================================= */

@media (max-width:700px) {

  /*
   * На телефоне visual — обычный вертикальный список.
   */

  .visual,
  .visual.has-expanded-card {

    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;

    gap:8px !important;

    width:100% !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    padding:12px !important;

    overflow:visible !important;

    border-radius:20px !important;
  }


  .visual .visual-glow {
    display:none !important;
  }


  /*
   * ВСЕ карточки.
   * Полностью отключаем desktop absolute positioning.
   */

  .visual .tech-card,
  .visual.has-expanded-card .tech-card {

    position:relative !important;

    inset:auto !important;

    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;

    order:initial !important;

    display:block !important;

    width:100% !important;
    max-width:none !important;

    height:auto !important;
    min-height:116px !important;
    max-height:none !important;

    margin:0 !important;

    padding:
      18px 52px 18px 20px
      !important;

    transform:none !important;

    opacity:1 !important;
    visibility:visible !important;

    filter:none !important;

    overflow:hidden !important;

    z-index:1 !important;

    border-radius:16px !important;

    background:
      rgba(13,17,13,.96)
      !important;
  }


  /*
   * Заголовки карточки.
   */

  .visual .tech-card > small {

    display:block !important;

    margin:0 0 12px !important;

    color:
      var(--green-bright)
      !important;

    font-size:9px !important;

    font-weight:750 !important;

    line-height:1 !important;

    letter-spacing:.16em !important;
  }


  .visual .tech-card > strong {

    display:block !important;

    margin:0 0 14px !important;

    color:#edf1ed !important;

    font-size:16px !important;

    line-height:1.2 !important;

    font-weight:700 !important;
  }


  .visual .tech-card > .tech-card-short {

    display:block !important;

    margin:0 !important;

    color:#777f77 !important;

    font-size:11px !important;

    line-height:1.45 !important;
  }



  /* =====================================================
     PLUS
  ===================================================== */

  .visual .tech-card::after {

    content:"+";

    position:absolute !important;

    top:18px !important;
    right:18px !important;

    width:34px !important;
    height:34px !important;

    display:grid !important;

    place-items:center !important;

    border:
      1px solid rgba(118,185,0,.28)
      !important;

    border-radius:50% !important;

    background:
      rgba(118,185,0,.065)
      !important;

    color:
      var(--green-bright)
      !important;

    font-size:20px !important;

    font-weight:300 !important;

    line-height:1 !important;

    pointer-events:none;

    transform:none !important;
  }


  .visual .tech-card.is-expanded::after {

    content:"−" !important;

    background:
      rgba(118,185,0,.12)
      !important;
  }



  /* =====================================================
     CLOSED DETAILS
  ===================================================== */

  .visual .tech-card .tech-card-more {

    display:block !important;

    position:relative !important;

    width:100% !important;

    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;

    opacity:0 !important;
    visibility:hidden !important;

    overflow:hidden !important;

    transform:none !important;

    pointer-events:none !important;
  }



  /* =====================================================
     OPEN CARD
  ===================================================== */

  .visual .tech-card.is-expanded {

    width:100% !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    padding:
      20px !important;

    padding-right:
      58px !important;

    overflow:hidden !important;

    z-index:2 !important;

    border-color:
      rgba(118,185,0,.36)
      !important;

    background:
      rgba(13,18,13,.985)
      !important;

    box-shadow:
      0 15px 40px rgba(0,0,0,.22)
      !important;
  }


  /*
   * Именно ОПИСАНИЕ является частью той же карточки.
   */

  .visual
  .tech-card.is-expanded
  .tech-card-more {

    display:block !important;

    width:
      calc(100% + 38px)
      !important;

    height:auto !important;
    min-height:0 !important;
    max-height:600px !important;

    margin:
      18px -38px -20px -20px
      !important;

    padding:
      20px
      !important;

    border-top:
      1px solid rgba(255,255,255,.065)
      !important;

    opacity:1 !important;
    visibility:visible !important;

    overflow:visible !important;

    pointer-events:auto !important;
  }



  /* =====================================================
     DESCRIPTION
  ===================================================== */

  .visual
  .tech-card.is-expanded
  .tech-card-more p {

    display:block !important;

    margin:
      0 0 16px !important;

    padding:0 !important;

    color:#b7bdb7 !important;

    font-size:13px !important;

    line-height:1.55 !important;

    opacity:1 !important;
    visibility:visible !important;
  }



  /* =====================================================
     LIST
  ===================================================== */

  .visual
  .tech-card.is-expanded
  .tech-card-more ul {

    display:grid !important;

    grid-template-columns:
      1fr !important;

    gap:9px !important;

    margin:
      0 0 17px !important;

    padding:0 !important;

    list-style:none !important;

    opacity:1 !important;
    visibility:visible !important;
  }


  .visual
  .tech-card.is-expanded
  .tech-card-more li {

    position:relative !important;

    display:block !important;

    margin:0 !important;

    padding:
      0 0 0 21px !important;

    color:#c4cac4 !important;

    font-size:12px !important;

    line-height:1.45 !important;

    opacity:1 !important;
    visibility:visible !important;
  }


  .visual
  .tech-card.is-expanded
  .tech-card-more li::before {

    content:"";

    position:absolute;

    left:1px;
    top:.48em;

    width:7px;
    height:7px;

    border-radius:50%;

    background:
      var(--green-bright);

    box-shadow:
      0 0 9px rgba(118,185,0,.25);
  }



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

  .visual
  .tech-card.is-expanded
  .tech-card-more a {

    display:flex !important;

    align-items:center !important;

    justify-content:
      space-between !important;

    width:100% !important;

    min-height:46px !important;

    margin:0 !important;

    padding:
      0 14px !important;

    border:
      1px solid rgba(118,185,0,.3)
      !important;

    border-radius:9px !important;

    background:
      rgba(118,185,0,.075)
      !important;

    color:
      var(--green-bright)
      !important;

    font-size:12px !important;

    font-weight:750 !important;

    text-decoration:none !important;

    opacity:1 !important;
    visibility:visible !important;

    pointer-events:auto !important;
  }


  .visual
  .tech-card.is-expanded
  .tech-card-more a span {

    display:block !important;

    color:
      var(--green-bright)
      !important;

    font-size:18px !important;
  }

}



/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:390px) {

  .visual,
  .visual.has-expanded-card {

    padding:8px !important;

    gap:7px !important;
  }


  .visual .tech-card {

    min-height:108px !important;

    padding:
      16px 48px 16px 17px
      !important;
  }


  .visual .tech-card.is-expanded {

    padding:
      18px 55px 18px 18px
      !important;
  }


  .visual
  .tech-card.is-expanded
  .tech-card-more {

    width:
      calc(100% + 37px)
      !important;

    margin:
      17px -37px -18px -18px
      !important;

    padding:
      18px
      !important;
  }

}



/* =========================================================
   ITRUMAK — MOBILE TECH ACCORDION V1
   Полностью независим от desktop .tech-card
========================================================= */


/* На компьютере новый блок не существует визуально */

.mobile-tech-accordion{
  display:none;
}



@media(max-width:700px){

  /*
   * Старую desktop-композицию на телефоне
   * полностью убираем.
   */

  .visual{
    display:none !important;
  }


  /*
   * Новый мобильный контейнер.
   */

  .mobile-tech-accordion{

    display:flex;

    flex-direction:column;

    width:100%;

    gap:8px;

    margin:
      18px 0 8px;

    padding:
      12px;

    border:
      1px solid rgba(255,255,255,.065);

    border-radius:
      20px;

    background:
      radial-gradient(
        circle at 50% 45%,
        rgba(118,185,0,.055),
        transparent 45%
      ),
      rgba(8,11,8,.72);
  }


  /*
   * Одна карточка.
   */

  .mobile-tech-card{

    display:block;

    width:100%;

    margin:0;

    padding:0;

    border:
      1px solid rgba(255,255,255,.075);

    border-radius:
      16px;

    background:
      rgba(13,17,13,.97);

    overflow:hidden;

    transition:
      border-color .25s ease,
      background .25s ease,
      box-shadow .25s ease;
  }


  .mobile-tech-card[open]{

    border-color:
      rgba(118,185,0,.38);

    background:
      rgba(13,18,13,.99);

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


  /*
   * Верх карточки.
   */

  .mobile-tech-card summary{

    position:relative;

    display:block;

    min-height:
      116px;

    padding:
      18px 58px 18px 20px;

    cursor:pointer;

    list-style:none;

    -webkit-tap-highlight-color:
      transparent;
  }


  .mobile-tech-card summary::-webkit-details-marker{
    display:none;
  }


  .mobile-tech-card summary::marker{
    display:none;
    content:"";
  }


  .mobile-tech-head small{

    display:block;

    margin-bottom:
      12px;

    color:
      var(--green-bright);

    font-size:
      9px;

    line-height:1;

    font-weight:800;

    letter-spacing:
      .17em;
  }


  .mobile-tech-head strong{

    display:block;

    margin-bottom:
      14px;

    color:
      #eef2ee;

    font-size:
      16px;

    line-height:
      1.2;

    font-weight:
      700;
  }


  .mobile-tech-head > span{

    display:block;

    color:
      #777f77;

    font-size:
      11px;

    line-height:
      1.45;
  }



  /* =====================================================
     + / −
  ===================================================== */

  .mobile-tech-card summary > i{

    position:absolute;

    top:18px;
    right:18px;

    width:36px;
    height:36px;

    display:grid;

    place-items:center;

    border:
      1px solid rgba(118,185,0,.28);

    border-radius:
      50%;

    background:
      rgba(118,185,0,.065);

    font-style:
      normal;
  }


  .mobile-tech-card summary > i::before{

    content:"+";

    color:
      var(--green-bright);

    font-size:
      21px;

    line-height:1;

    font-weight:
      300;
  }


  .mobile-tech-card[open]
  summary > i::before{

    content:"−";
  }



  /* =====================================================
     РАСКРЫТАЯ ЧАСТЬ
  ===================================================== */

  .mobile-tech-more{

    padding:
      19px 20px 20px;

    border-top:
      1px solid rgba(255,255,255,.065);

    animation:
      mobileTechOpen .25s ease;
  }


  @keyframes mobileTechOpen{

    from{
      opacity:0;
      transform:translateY(-5px);
    }

    to{
      opacity:1;
      transform:translateY(0);
    }

  }


  .mobile-tech-more p{

    margin:
      0 0 17px;

    color:
      #b5bcb5;

    font-size:
      13px;

    line-height:
      1.55;
  }


  .mobile-tech-more ul{

    display:grid;

    grid-template-columns:
      1fr;

    gap:
      9px;

    margin:
      0 0 18px;

    padding:0;

    list-style:none;
  }


  .mobile-tech-more li{

    position:relative;

    padding-left:
      21px;

    color:
      #c5cbc5;

    font-size:
      12px;

    line-height:
      1.4;
  }


  .mobile-tech-more li::before{

    content:"";

    position:absolute;

    left:1px;
    top:.45em;

    width:7px;
    height:7px;

    border-radius:50%;

    background:
      var(--green-bright);

    box-shadow:
      0 0 8px
      rgba(118,185,0,.32);
  }



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

  .mobile-tech-more a{

    display:flex;

    align-items:center;

    justify-content:
      space-between;

    width:100%;

    min-height:
      46px;

    padding:
      0 14px;

    border:
      1px solid rgba(118,185,0,.31);

    border-radius:
      9px;

    background:
      rgba(118,185,0,.075);

    color:
      var(--green-bright);

    font-size:
      12px;

    font-weight:
      750;

    text-decoration:
      none;
  }


  .mobile-tech-more a b{

    font-size:
      18px;

    font-weight:
      500;
  }

}



@media(max-width:390px){

  .mobile-tech-accordion{

    padding:8px;

    gap:7px;
  }


  .mobile-tech-card summary{

    min-height:
      108px;

    padding:
      16px 54px 16px 17px;
  }


  .mobile-tech-card summary > i{

    top:15px;
    right:15px;

    width:34px;
    height:34px;
  }


  .mobile-tech-more{

    padding:
      17px;
  }

}



/* =========================================================
   ITRUMAK — PREMIUM BUTTONS
   clean / restrained / subtle pulse
========================================================= */


/* Убираем старые переливы и декоративные анимации */

.button,
.service-cta,
.services-top-link,
.tech-card-more a,
.mobile-tech-more a,
.tech-card-detail-cta,
.snake-start {

  background-image:
    none !important;

  animation:
    none !important;

  background-size:
    auto !important;

  background-position:
    center !important;

  filter:
    none !important;
}


/* =========================================================
   ОСНОВНАЯ ЗЕЛЁНАЯ КНОПКА
========================================================= */

.button-primary,
.service-cta-green {

  position:relative;

  overflow:hidden;

  border:
    1px solid rgba(132,204,22,.55)
    !important;

  border-radius:
    11px !important;

  background:
    #78b900 !important;

  color:
    #081008 !important;

  font-weight:
    750 !important;

  letter-spacing:
    -.01em;

  box-shadow:
    0 8px 22px rgba(118,185,0,.12),
    0 0 0 0 rgba(118,185,0,.24)
    !important;

  transform:
    translateZ(0);

  transition:
    transform .22s ease,
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease
    !important;

  animation:
    itrumak-premium-pulse
    2.8s
    ease-in-out
    infinite
    !important;
}


/* Никаких бегущих бликов */

.button-primary::before,
.button-primary::after,
.service-cta-green::before,
.service-cta-green::after {

  background:
    none !important;

  animation:
    none !important;
}


/* Hover */

.button-primary:hover,
.service-cta-green:hover {

  background:
    #86ca08 !important;

  border-color:
    rgba(145,220,26,.72)
    !important;

  transform:
    translateY(-2px);

  box-shadow:
    0 12px 30px rgba(118,185,0,.17),
    0 0 0 5px rgba(118,185,0,.055)
    !important;
}


/* Нажатие */

.button-primary:active,
.service-cta-green:active {

  transform:
    translateY(0)
    scale(.985);

  box-shadow:
    0 5px 14px rgba(118,185,0,.12)
    !important;
}



/* =========================================================
   ВТОРИЧНЫЕ КНОПКИ
========================================================= */

.button-secondary,
.services-top-link,
.tech-card-more a,
.mobile-tech-more a,
.tech-card-detail-cta {

  position:relative;

  overflow:hidden;

  border:
    1px solid rgba(118,185,0,.25)
    !important;

  border-radius:
    10px !important;

  background:
    rgba(118,185,0,.055)
    !important;

  color:
    #8bd600 !important;

  box-shadow:
    0 0 0 0 rgba(118,185,0,.14)
    !important;

  transition:
    transform .22s ease,
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease
    !important;
}


/* Убираем старые псевдо-блики */

.button-secondary::before,
.button-secondary::after,
.services-top-link::before,
.services-top-link::after,
.tech-card-more a::before,
.tech-card-more a::after,
.mobile-tech-more a::before,
.mobile-tech-more a::after {

  background:
    none !important;

  animation:
    none !important;
}


/* Hover */

.button-secondary:hover,
.services-top-link:hover,
.tech-card-more a:hover,
.mobile-tech-more a:hover,
.tech-card-detail-cta:hover {

  background:
    rgba(118,185,0,.10)
    !important;

  border-color:
    rgba(118,185,0,.42)
    !important;

  transform:
    translateY(-1px);

  box-shadow:
    0 9px 22px rgba(0,0,0,.18),
    0 0 0 4px rgba(118,185,0,.035)
    !important;
}



/* =========================================================
   МЯГКАЯ ПУЛЬСАЦИЯ
========================================================= */

@keyframes itrumak-premium-pulse {

  0%,
  100% {

    box-shadow:
      0 8px 22px rgba(118,185,0,.12),
      0 0 0 0 rgba(118,185,0,.18);
  }


  50% {

    box-shadow:
      0 10px 26px rgba(118,185,0,.15),
      0 0 0 6px rgba(118,185,0,.045);
  }

}



/* =========================================================
   CTA В МОБИЛЬНЫХ КАРТОЧКАХ
========================================================= */

@media(max-width:700px) {

  .mobile-tech-more a,
  .tech-card-more a {

    min-height:
      46px !important;

    padding:
      0 15px !important;

    border-radius:
      10px !important;

    background:
      rgba(118,185,0,.07)
      !important;

    font-size:
      12px !important;

    font-weight:
      750 !important;

    box-shadow:
      none !important;
  }


  .mobile-tech-more a:active,
  .tech-card-more a:active {

    transform:
      scale(.985);
  }

}



/* =========================================================
   CONTACT BUTTONS
========================================================= */

.contact-actions .button {

  min-height:
    48px;

  border-radius:
    11px !important;
}


/* Telegram — более спокойная */

.contact-telegram {

  background:
    rgba(255,255,255,.035)
    !important;

  border-color:
    rgba(255,255,255,.10)
    !important;

  color:
    #e9eee9 !important;

  box-shadow:
    none !important;
}


.contact-telegram:hover {

  background:
    rgba(255,255,255,.06)
    !important;

  border-color:
    rgba(255,255,255,.16)
    !important;
}



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

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

  .button-primary,
  .service-cta-green {

    animation:
      none !important;
  }

}



/* =========================================================
   ITRUMAK — REAL PREMIUM CTA PULSE
   FINAL OVERRIDE
========================================================= */

@keyframes itrumak-real-pulse {

  0%,
  100% {
    transform:scale(1);

    box-shadow:
      0 8px 22px rgba(118,185,0,.13),
      0 0 0 0 rgba(118,185,0,.20);
  }

  45% {
    transform:scale(1.018);

    box-shadow:
      0 11px 30px rgba(118,185,0,.22),
      0 0 0 7px rgba(118,185,0,.07);
  }

  70% {
    transform:scale(1.008);

    box-shadow:
      0 9px 25px rgba(118,185,0,.17),
      0 0 0 3px rgba(118,185,0,.035);
  }

}


/* Главные зелёные CTA */

html body .button.button-primary,
html body .service-cta.service-cta-green {

  background:
    #78b900 !important;

  background-image:
    none !important;

  color:
    #071007 !important;

  border:
    1px solid rgba(143,216,22,.62)
    !important;

  box-shadow:
    0 8px 22px rgba(118,185,0,.13)
    !important;

  animation-name:
    itrumak-real-pulse !important;

  animation-duration:
    2.15s !important;

  animation-timing-function:
    ease-in-out !important;

  animation-delay:
    0s !important;

  animation-iteration-count:
    infinite !important;

  animation-direction:
    normal !important;

  animation-fill-mode:
    both !important;

  animation-play-state:
    running !important;

  will-change:
    transform, box-shadow;

  transform-origin:
    center center;
}


/* Hover не останавливает пульсацию */

html body .button.button-primary:hover,
html body .service-cta.service-cta-green:hover {

  animation-play-state:
    running !important;

  background:
    #86ca08 !important;
}


/* Нажатие */

html body .button.button-primary:active,
html body .service-cta.service-cta-green:active {

  animation:
    none !important;

  transform:
    scale(.975) !important;
}


/* =========================================================
   CONTACT PHONE
========================================================= */

html body .contact-phone {

  animation-name:
    itrumak-real-pulse !important;

  animation-duration:
    2.15s !important;

  animation-timing-function:
    ease-in-out !important;

  animation-iteration-count:
    infinite !important;

  animation-play-state:
    running !important;
}


/* =========================================================
   PHONE
   чуть спокойнее, чтобы не дёргалось
========================================================= */

@media(max-width:700px){

  @keyframes itrumak-real-pulse {

    0%,
    100% {
      transform:scale(1);

      box-shadow:
        0 7px 18px rgba(118,185,0,.12),
        0 0 0 0 rgba(118,185,0,.17);
    }

    50% {
      transform:scale(1.012);

      box-shadow:
        0 9px 24px rgba(118,185,0,.19),
        0 0 0 6px rgba(118,185,0,.055);
    }

  }

}



/* =========================================================
   ITRUMAK — PREMIUM CTA FOG
   subtle breathing aura
========================================================= */

@keyframes itrumak-fog-pulse {

  0%,
  100% {
    opacity: .16;
    transform: scale(.96);
    filter: blur(15px);
  }

  50% {
    opacity: .32;
    transform: scale(1.06);
    filter: blur(21px);
  }

}


/*
 * Делаем кнопки контейнерами
 * для отдельного слоя тумана
 */

html body .button.button-primary,
html body .service-cta.service-cta-green {

  position: relative !important;

  isolation: isolate;

  overflow: visible !important;
}


/*
 * Мягкий туман ПОД кнопкой
 */

html body .button.button-primary::before,
html body .service-cta.service-cta-green::before {

  content: "" !important;

  position: absolute !important;

  z-index: -1 !important;

  pointer-events: none !important;

  top: -7px !important;
  right: -9px !important;
  bottom: -7px !important;
  left: -9px !important;

  border-radius:
    inherit !important;

  background:
    rgba(118,185,0,.46) !important;

  opacity:
    .16;

  filter:
    blur(15px);

  transform:
    scale(.96);

  animation:
    itrumak-fog-pulse
    3.2s
    ease-in-out
    infinite !important;

}


/*
 * При наведении туман становится
 * совсем немного выразительнее
 */

html body .button.button-primary:hover::before,
html body .service-cta.service-cta-green:hover::before {

  background:
    rgba(126,198,0,.52) !important;

}


/* =========================================================
   MOBILE
   ещё более деликатный эффект
========================================================= */

@media(max-width:700px){

  html body .button.button-primary::before,
  html body .service-cta.service-cta-green::before {

    top:
      -5px !important;

    right:
      -6px !important;

    bottom:
      -5px !important;

    left:
      -6px !important;

    opacity:
      .13;

    filter:
      blur(13px);

    animation-duration:
      3.6s !important;

  }

}


/*
 * Accessibility
 */

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

  html body .button.button-primary::before,
  html body .service-cta.service-cta-green::before {

    animation:
      none !important;

    opacity:
      .15;

  }

}



/* =========================================================
   ITRUMAK — SERVICES BENEFITS
   ONE GREEN DOT ONLY
========================================================= */

/* Убираем дополнительные точки от псевдоэлементов */
.services-benefits > span::before,
.services-benefits > span::after {
  content: none !important;
  display: none !important;
}

/* Оставляем штатную точку <i> */
.services-benefits > span > i {
  display: inline-block !important;
  flex: 0 0 auto !important;

  width: 7px !important;
  height: 7px !important;

  border-radius: 50% !important;
  background: #76b900 !important;

  margin: 0 !important;
  padding: 0 !important;

  box-shadow:
    0 0 8px rgba(118,185,0,.35) !important;
}

/* Нормальное выравнивание точки и текста */
.services-benefits > span {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}



/* =========================================================
   ITRUMAK SNAKE — START BUTTON FIX
========================================================= */

html body .snake-start {

  position: relative !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  min-width: 130px !important;
  min-height: 44px !important;

  padding: 0 22px !important;

  border:
    1px solid rgba(132,204,22,.70) !important;

  border-radius:
    10px !important;

  background:
    #78b900 !important;

  background-image:
    none !important;

  color:
    #071007 !important;

  font-size:
    13px !important;

  line-height:
    1 !important;

  font-weight:
    800 !important;

  letter-spacing:
    .02em !important;

  text-shadow:
    none !important;

  opacity:
    1 !important;

  visibility:
    visible !important;

  filter:
    none !important;

  box-shadow:
    0 8px 24px rgba(118,185,0,.16) !important;

  cursor:
    pointer !important;

  transition:
    background .2s ease,
    transform .2s ease,
    box-shadow .2s ease !important;
}


/* Убираем всё, что могло лежать поверх текста */

html body .snake-start::before,
html body .snake-start::after {

  content:
    none !important;

  display:
    none !important;
}


/* Наведение */

@media(hover:hover){

  html body .snake-start:hover {

    background:
      #88cc0a !important;

    color:
      #050b05 !important;

    transform:
      translateY(-2px) !important;

    box-shadow:
      0 11px 28px rgba(118,185,0,.22) !important;
  }

}


/* Нажатие */

html body .snake-start:active {

  transform:
    scale(.97) !important;
}


/* Телефон */

@media(max-width:700px){

  html body .snake-start {

    min-width:
      140px !important;

    min-height:
      46px !important;

    font-size:
      13px !important;
  }

}



/* =========================================================
   ITRUMAK SNAKE — LARGE GAME CONTROLS
   Более крупное и удобное управление
========================================================= */


/* Вся крестовина */

html body .snake-controls {

  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    12px !important;

  margin-top:
    20px !important;
}


/* Средний ряд: ←  II  → */

html body .snake-control-row {

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    12px !important;
}


/* Все кнопки управления */

html body .snake-controls button {

  width:
    62px !important;

  height:
    62px !important;

  min-width:
    62px !important;

  min-height:
    62px !important;

  padding:
    0 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  flex:
    0 0 62px !important;

  border-radius:
    16px !important;

  font-size:
    25px !important;

  font-weight:
    700 !important;

  line-height:
    1 !important;

  cursor:
    pointer !important;

  user-select:
    none !important;

  -webkit-user-select:
    none !important;

  touch-action:
    manipulation !important;
}


/* Пауза */

html body .snake-controls .snake-pause {

  font-size:
    17px !important;

  letter-spacing:
    2px !important;
}


/* Нажатие */

html body .snake-controls button:active {

  transform:
    scale(.92) !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

  html body .snake-controls {

    gap:
      12px !important;

    margin-top:
      22px !important;

    margin-bottom:
      12px !important;
  }


  html body .snake-control-row {

    gap:
      12px !important;
  }


  html body .snake-controls button {

    width:
      68px !important;

    height:
      68px !important;

    min-width:
      68px !important;

    min-height:
      68px !important;

    flex:
      0 0 68px !important;

    border-radius:
      18px !important;

    font-size:
      29px !important;
  }


  html body .snake-controls .snake-pause {

    font-size:
      18px !important;
  }

}


/* Совсем узкие телефоны */

@media(max-width:380px){

  html body .snake-controls button {

    width:
      64px !important;

    height:
      64px !important;

    min-width:
      64px !important;

    min-height:
      64px !important;

    flex-basis:
      64px !important;
  }


  html body .snake-control-row,
  html body .snake-controls {

    gap:
      10px !important;
  }

}



/* =========================================================
   ITRUMAK — SEO H1
   Присутствует в документе без изменения дизайна hero
========================================================= */

.seo-main-h1{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  margin:-1px !important;
  padding:0 !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  border:0 !important;
}



/* =========================================================
   ITRUMAK — BRAND LOGO V7
========================================================= */

.brand{
  display:inline-flex !important;
  align-items:center !important;

  text-decoration:none !important;
}


.itrumak-brand-logo{
  display:block;

  width:
    clamp(180px, 16vw, 235px);

  height:auto;

  max-width:100%;

  object-fit:contain;
}


/* Header — немного компактнее */

header .itrumak-brand-logo,
.header .itrumak-brand-logo{
  width:
    clamp(175px, 15vw, 220px);
}


/* Footer */

footer .itrumak-brand-logo{
  width:
    170px;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

  header .itrumak-brand-logo,
  .header .itrumak-brand-logo{
    width:
      178px !important;
  }


  footer .itrumak-brand-logo{
    width:
      155px !important;
  }

}


@media(max-width:390px){

  header .itrumak-brand-logo,
  .header .itrumak-brand-logo{
    width:
      164px !important;
  }

}