/* =========================================================
   WEBCOM
   style.css
   ========================================================= */


/* ---------------------------------------------------------
   1. VARIABLES
--------------------------------------------------------- */

:root {
  --text: #f4f4f4;
  --muted: #a8aaae;

  --red: #ff252d;
  --red-light: #ff4b52;

  --border: rgba(255, 255, 255, 0.12);

  --radius: 22px;

  --page-width: 1440px;

  --transition:
    250ms cubic-bezier(0.2, 0.7, 0.2, 1);
}


/* ---------------------------------------------------------
   2. RESET / BASE
--------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  min-height: 100vh;
  min-height: 100dvh;

  color: var(--text);

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(255, 37, 45, 0.07),
      transparent 33%
    ),
    linear-gradient(
      180deg,
      #090a0b 0%,
      #050606 100%
    );

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

  overflow-x: hidden;
}

img,
svg {
  display: block;
}

img {
  max-width: 100%;
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}


/* ---------------------------------------------------------
   3. PAGE
--------------------------------------------------------- */

.page {
  position: relative;

  min-height: 100vh;
  min-height: 100dvh;

  display: flex;
  flex-direction: column;

  overflow: hidden;
}

.container {
  position: relative;
  z-index: 2;

  width:
    min(
      calc(100% - 64px),
      var(--page-width)
    );

  margin-inline: auto;
}


/* ---------------------------------------------------------
   4. BACKGROUND
--------------------------------------------------------- */

.background-glow {
  position: fixed;
  inset: 0;

  z-index: 0;

  overflow: hidden;

  pointer-events: none;
}

.background-glow::before {
  content: "";

  position: absolute;

  width: 650px;
  height: 650px;

  left: -370px;
  top: 24%;

  border-radius: 50%;

  background:
    rgba(255, 20, 30, 0.13);

  filter:
    blur(130px);

  opacity: 0.55;
}

.background-glow::after {
  content: "";

  position: absolute;

  width: 700px;
  height: 700px;

  right: -430px;
  top: 36%;

  border-radius: 50%;

  background:
    rgba(255, 20, 30, 0.10);

  filter:
    blur(150px);

  opacity: 0.5;
}

.wave {
  position: absolute;

  width: 58vw;
  max-width: 950px;

  opacity: 0.34;

  pointer-events: none;

  filter:
    drop-shadow(
      0 0 8px rgba(255, 30, 40, 0.16)
    );
}

.wave-left {
  left: -17%;
  top: 23%;

  transform:
    rotate(3deg);
}

.wave-right {
  right: -18%;
  top: 31%;

  transform:
    scaleX(-1)
    rotate(-4deg);
}


/* ---------------------------------------------------------
   5. HEADER
--------------------------------------------------------- */

.header {
  min-height: 116px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;
}

.brand {
  display: flex;
  align-items: center;

  flex-shrink: 0;
}

.logo {
  width:
    clamp(
      145px,
      13vw,
      210px
    );

  height: auto;

  filter:
    drop-shadow(
      0 8px 20px rgba(0, 0, 0, 0.42)
    );
}

.header-contact {
  display: flex;
  align-items: center;

  gap:
    clamp(
      16px,
      2vw,
      30px
    );

  color: #dedede;

  font-size: 14px;
  font-weight: 500;
}

.contact-link {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  white-space: nowrap;

  transition:
    color var(--transition),
    transform var(--transition);
}

.contact-link:hover {
  color: #fff;

  transform:
    translateY(-1px);
}

.contact-link svg {
  width: 19px;
  height: 19px;

  flex-shrink: 0;

  stroke: currentColor;
}

.header-button {
  min-height: 46px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  padding:
    0
    23px;

  white-space: nowrap;

  border:
    1px solid rgba(255, 45, 55, 0.8);

  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      rgba(255, 45, 55, 0.11),
      rgba(255, 45, 55, 0.04)
    );

  box-shadow:
    0 0 0 1px rgba(255, 35, 45, 0.08),
    0 0 24px rgba(255, 25, 35, 0.10);

  font-weight: 650;

  transition:
    background var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}

.header-button:hover {
  background:
    linear-gradient(
      180deg,
      rgba(255, 45, 55, 0.22),
      rgba(255, 45, 55, 0.09)
    );

  box-shadow:
    0 0 0 1px rgba(255, 35, 45, 0.15),
    0 0 30px rgba(255, 25, 35, 0.18);

  transform:
    translateY(-2px);
}

.header-button svg {
  width: 18px;
  height: 18px;

  flex-shrink: 0;

  stroke: currentColor;
}


/* ---------------------------------------------------------
   6. HERO
--------------------------------------------------------- */

.hero {
  flex: 1;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding:
    24px
    0
    28px;
}

.hero-inner {
  width:
    min(
      970px,
      100%
    );

  margin-inline: auto;

  text-align: center;
}

.eyebrow {
  margin:
    0
    0
    20px;

  color: #d3d4d6;

  font-size:
    clamp(
      12px,
      1.1vw,
      16px
    );

  font-weight: 650;

  letter-spacing: 0.45em;

  text-transform: uppercase;
}

.eyebrow .dot {
  margin-inline: 0.55em;

  color: var(--red);

  letter-spacing: 0;
}

h1 {
  margin: 0;

  font-size:
    clamp(
      48px,
      6.4vw,
      96px
    );

  line-height: 0.97;

  font-weight: 850;

  letter-spacing: -0.055em;

  text-wrap: balance;
}

h1 .accent {
  color: var(--red);

  text-shadow:
    0 0 35px rgba(255, 30, 40, 0.12);
}

.lead {
  width:
    min(
      780px,
      92%
    );

  margin:
    24px
    auto
    0;

  color: #d0d1d3;

  font-size:
    clamp(
      17px,
      1.6vw,
      23px
    );

  line-height: 1.45;

  text-wrap: balance;
}

.secondary-line {
  margin:
    14px
    0
    0;

  color: #9b9da0;

  font-size:
    clamp(
      14px,
      1.1vw,
      17px
    );
}

.hero-actions {
  margin-top: 25px;

  display: flex;
  justify-content: center;
}


/* ---------------------------------------------------------
   7. PRIMARY BUTTON
--------------------------------------------------------- */

.primary-button {
  min-height: 56px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 13px;

  padding:
    0
    32px;

  border:
    1px solid #ff5258;

  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      #ef343b 0%,
      #c71921 100%
    );

  color: #fff;

  font-size: 17px;
  font-weight: 750;

  box-shadow:
    0 10px 30px rgba(255, 22, 32, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    filter var(--transition);
}

.primary-button:hover {
  transform:
    translateY(-3px);

  filter:
    brightness(1.06);

  box-shadow:
    0 14px 38px rgba(255, 22, 32, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.primary-button svg {
  width: 18px;
  height: 18px;

  stroke: currentColor;

  transition:
    transform var(--transition);
}

.primary-button:hover svg {
  transform:
    translateX(3px);
}


/* ---------------------------------------------------------
   8. SIDE NOTES
--------------------------------------------------------- */

.side-note {
  position: absolute;

  color:
    rgba(255, 255, 255, 0.24);

  font-size: 14px;
  font-style: italic;
  font-weight: 650;

  letter-spacing: 0.07em;

  line-height: 1.55;

  text-transform: uppercase;

  transform:
    rotate(-7deg);

  user-select: none;
}

.side-note::after {
  content: "";

  display: block;

  width: 52px;
  height: 2px;

  margin:
    7px
    0
    0
    auto;

  background:
    var(--red);
}

.side-note-left {
  left: 18px;
  top: 50%;
}

.side-note-right {
  right: 18px;
  top: 27%;

  text-align: right;
}


/* ---------------------------------------------------------
   9. SERVICES
--------------------------------------------------------- */

.services {
  margin-top: 34px;

  display: grid;

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

  gap: 17px;
}

.service-card {
  position: relative;

  min-height: 205px;

  display: block;

  padding:
    25px
    25px
    22px;

  overflow: hidden;

  color: inherit;

  cursor: pointer;

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

  border-radius:
    var(--radius);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.012)
    );

  backdrop-filter:
    blur(10px);

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

  transform-style:
    preserve-3d;

  transition:
    transform 280ms ease,
    border-color 280ms ease,
    background 280ms ease,
    box-shadow 280ms ease;
}

.service-card::before {
  content: "";

  position: absolute;

  width: 180px;
  height: 180px;

  left: -90px;
  top: -110px;

  border-radius: 50%;

  background:
    rgba(255, 30, 40, 0.09);

  filter:
    blur(45px);

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 300ms ease;
}

.service-card::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 0;

  border-radius: inherit;

  background:
    radial-gradient(
      220px circle
      at
      var(--pointer-x, 50%)
      var(--pointer-y, 50%),
      rgba(255, 40, 48, 0.14),
      rgba(255, 40, 48, 0.045) 35%,
      transparent 68%
    );

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 280ms ease;
}

.service-card > * {
  position: relative;

  z-index: 1;
}

.service-card:hover,
.service-card:focus-visible {
  transform:
    translateY(-5px);

  border-color:
    rgba(255, 50, 60, 0.42);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 20, 30, 0.018)
    );

  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.26);
}

.service-card:hover::before,
.service-card:hover::after,
.service-card:focus-visible::before,
.service-card:focus-visible::after {
  opacity: 1;
}

.service-card:active {
  transform:
    translateY(-2px);
}

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

  display: grid;
  place-items: center;

  margin-bottom: 18px;

  border:
    1px solid rgba(255, 255, 255, 0.05);

  border-radius: 14px;

  background:
    linear-gradient(
      145deg,
      rgba(134, 25, 30, 0.46),
      rgba(73, 15, 18, 0.44)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  transform:
    translateZ(8px);
}

.service-icon svg {
  width: 27px;
  height: 27px;

  stroke: #f4f4f4;
}

.service-card h2 {
  margin:
    0
    0
    9px;

  font-size:
    clamp(
      17px,
      1.25vw,
      21px
    );

  line-height: 1.2;

  transform:
    translateZ(5px);
}

.service-card p {
  margin: 0;

  color:
    var(--muted);

  font-size: 15px;

  line-height: 1.43;
}

.service-arrow {
  position: absolute;

  left: 25px;
  bottom: 20px;

  color:
    var(--red);

  font-size: 25px;

  line-height: 1;

  transition:
    transform var(--transition);
}

.service-card:hover .service-arrow,
.service-card:focus-visible .service-arrow {
  transform:
    translateX(5px);
}


/* ---------------------------------------------------------
   10. CLOSING MESSAGE
--------------------------------------------------------- */

.closing {
  width:
    min(
      910px,
      100%
    );

  margin:
    28px
    auto
    0;

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

  gap: 24px;

  color: #b8b9bc;

  text-align: center;

  font-size: 14px;

  line-height: 1.5;
}

.closing::before,
.closing::after {
  content: "";

  width: 78px;
  height: 1px;

  flex-shrink: 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--red)
    );
}

.closing::after {
  transform:
    scaleX(-1);
}

.closing a {
  color:
    var(--red);

  font-weight: 700;

  transition:
    color var(--transition);
}

.closing a:hover {
  color:
    var(--red-light);
}


/* ---------------------------------------------------------
   11. FOOTER
--------------------------------------------------------- */

.footer {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 7px;

  padding:
    10px
    20px
    18px;

  color: #777b80;

  font-size: 12px;

  line-height: 1.5;

  text-align: center;
}

.footer-link {
  color: #96999e;

  transition:
    color var(--transition);
}

.footer-link:hover,
.footer-link:focus-visible {
  color:
    var(--red-light);
}


/* ---------------------------------------------------------
   12. LOAD ANIMATIONS
--------------------------------------------------------- */

.reveal {
  opacity: 0;

  transform:
    translateY(14px);

  animation:
    reveal
    650ms
    cubic-bezier(0.2, 0.7, 0.2, 1)
    forwards;
}

.delay-1 {
  animation-delay: 80ms;
}

.delay-2 {
  animation-delay: 160ms;
}

.delay-3 {
  animation-delay: 240ms;
}

.delay-4 {
  animation-delay: 320ms;
}

@keyframes reveal {

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


/* ---------------------------------------------------------
   13. FINE POINTER / DESKTOP EFFECTS
--------------------------------------------------------- */

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

  .service-card {
    will-change: transform;
  }

}


/* ---------------------------------------------------------
   14. TABLET
--------------------------------------------------------- */

@media (max-width: 1050px) {

  .header {
    min-height: 100px;

    gap: 20px;
  }

  .header-contact .email {
    display: none;
  }

  .header-contact {
    gap: 18px;
  }

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

  .service-card {
    min-height: 185px;
  }

  .side-note {
    display: none;
  }

}


/* ---------------------------------------------------------
   15. MOBILE
--------------------------------------------------------- */

@media (max-width: 720px) {

  .container {
    width:
      min(
        calc(100% - 34px),
        var(--page-width)
      );
  }


  /* -------------------------------------------------------
     MOBILE HEADER

     red 1:
     LOGO                 CTA

     red 2:
              TELEFON
  ------------------------------------------------------- */

  .header {
    min-height: 0;

    display: grid;

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

    grid-template-areas:
      "brand cta"
      "phone phone";

    align-items: center;

    column-gap: 12px;
    row-gap: 10px;

    padding:
      14px
      0
      8px;
  }

  .brand {
    grid-area: brand;

    justify-self: start;
  }

  .logo {
    width: 145px;
  }

  .header-contact {
    display: contents;
  }

  .header-contact .email {
    display: none;
  }

  .header-contact .phone {
    grid-area: phone;

    display: inline-flex;

    justify-self: center;

    min-height: 40px;

    padding:
      7px

      15px;

    gap: 9px;

    color: #e4e4e4;

    font-size: 15px;
    font-weight: 700;

    letter-spacing: 0.01em;

    border-radius: 999px;

    background:
      rgba(255, 255, 255, 0.018);

    transition:
      color var(--transition),
      background var(--transition);
  }

  .header-contact .phone:active {
    color: #fff;

    background:
      rgba(255, 37, 45, 0.08);
  }

  .header-contact .phone svg {
    width: 20px;
    height: 20px;
  }

  .header-button {
    grid-area: cta;

    justify-self: end;

    min-height: 42px;

    padding:
      0
      16px;

    font-size: 13px;
  }


  /* -------------------------------------------------------
     HERO
  ------------------------------------------------------- */

  .hero {
    justify-content: flex-start;

    padding:
      22px
      0
      20px;
  }

  .eyebrow {
    margin-bottom: 16px;

    font-size: 11px;

    letter-spacing: 0.26em;
  }

  .lead {
    width: 100%;

    margin-top: 20px;

    font-size: 16px;
  }

  .secondary-line {
    font-size: 13px;

    line-height: 1.5;
  }

  .hero-actions {
    margin-top: 20px;
  }

  .primary-button {
    min-height: 51px;

    padding:
      0
      27px;

    font-size: 15px;
  }


  /* -------------------------------------------------------
     SERVICES
  ------------------------------------------------------- */

  .services {
    margin-top: 28px;

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

    gap: 11px;
  }

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

    padding:
      17px
      15px;
  }

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

    margin-bottom: 13px;

    border-radius: 12px;
  }

  .service-icon svg {
    width: 23px;
    height: 23px;
  }

  .service-card h2 {
    margin-bottom: 7px;

    font-size: 15px;
  }

  .service-card p {
    font-size: 12px;

    line-height: 1.35;
  }

  .service-arrow {
    left: 15px;
    bottom: 13px;

    font-size: 21px;
  }

  .closing {
    margin-top: 22px;

    gap: 12px;

    font-size: 12px;
  }

  .closing::before,
  .closing::after {
    width: 28px;
  }

  .footer {
    gap: 6px;

    padding:
      8px
      16px
      14px;
  }

}


/* ---------------------------------------------------------
   16. SMALL MOBILE
--------------------------------------------------------- */

@media (max-width: 430px) {

  .header {
    column-gap: 10px;
    row-gap: 8px;
  }

  .logo {
    width: 132px;
  }

  .header-button {
    min-height: 40px;

    gap: 7px;

    padding:
      0
      12px;

    font-size: 12px;
  }

  .header-button svg {
    width: 16px;
    height: 16px;
  }

  .header-contact .phone {
    min-height: 38px;

    padding:
      6px
      13px;

    font-size: 14px;
  }

  .header-contact .phone svg {
    width: 18px;
    height: 18px;
  }

  h1 {
    font-size:
      clamp(
        42px,
        13.2vw,
        58px
      );
  }

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

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

    padding-right: 65px;
  }

  .service-icon {
    position: absolute;

    right: 16px;
    top: 16px;
  }

  .closing::before,
  .closing::after {
    display: none;
  }

}


/* ---------------------------------------------------------
   17. VERY NARROW MOBILE
--------------------------------------------------------- */

@media (max-width: 360px) {

  .container {
    width:
      calc(100% - 28px);
  }

  .header {
    column-gap: 8px;

    padding-top: 12px;
  }

  .logo {
    width: 112px;
  }

  .header-button {
    min-height: 38px;

    gap: 6px;

    padding:
      0
      10px;

    font-size: 11.5px;
  }

  .header-button svg {
    width: 14px;
    height: 14px;
  }

  .header-contact .phone {
    font-size: 13.5px;
  }

  .eyebrow {
    font-size: 10px;

    letter-spacing: 0.20em;
  }

}


/* ---------------------------------------------------------
   18. SHORT DESKTOP / LAPTOP SCREENS
--------------------------------------------------------- */

@media
  (min-width: 1051px)
  and (max-height: 850px) {

  .header {
    min-height: 88px;
  }

  .hero {
    padding:
      10px
      0
      18px;
  }

  .eyebrow {
    margin-bottom: 14px;
  }

  h1 {
    font-size:
      clamp(
        48px,
        5.6vw,
        80px
      );
  }

  .lead {
    margin-top: 18px;
  }

  .secondary-line {
    margin-top: 10px;
  }

  .hero-actions {
    margin-top: 18px;
  }

  .services {
    margin-top: 24px;
  }

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

    padding:
      20px
      22px;
  }

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

    margin-bottom: 13px;
  }

  .service-arrow {
    bottom: 14px;
  }

  .closing {
    margin-top: 18px;
  }

  .footer {
    padding:
      5px
      20px
      10px;
  }

}


/* ---------------------------------------------------------
   19. ACCESSIBILITY
--------------------------------------------------------- */

:focus-visible {
  outline:
    3px solid rgba(255, 50, 60, 0.75);

  outline-offset: 4px;
}

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

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }

}