/* ==========================================================================
   Homepage – section layout. Spacing values are taken from the Figma frame
   (87:2, 1440px); comments note the Figma y-coordinates they come from.
   ========================================================================== */

/* HERO ------------------------------------------------------------------- */
.hero { padding-top: 116px; }                         /* title top y=299 */
.hero__inner { position: relative; }
.hero__content { position: relative; z-index: 1; max-width: 640px; }
.hero__title { font-size: var(--fs-h1); font-weight: 700; line-height: 1.22; }
.hero__lead { max-width: 553px; margin-top: 22px; font-size: 19px; font-weight: 500; line-height: 1.83; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 41px; }
@media (min-width: 992px) { .hero__actions { margin-left: 3px; } }   /* x=92 */
.hero__price { margin-top: 28px; color: rgba(255, 255, 255, 0.75); font-size: 15px; font-weight: 500; }
.hero__price strong { color: var(--c-mint); font-size: 20px; }
.hero__price span { color: rgba(255, 255, 255, 0.55); }

/* Visual = Figma "Group 9": cloud image 517×450 + rotated blob, box 574.6×502.6 */
.hero__visual {
  position: absolute;
  right: -5.6px; top: -48.7px;                        /* x=783 (right edge 1357.6), y=250.3; inner starts at y=299 */
  width: 574.6px;
  aspect-ratio: 574.6 / 502.6;
  pointer-events: none;
}
.hero__blob {
  position: absolute;
  left: 23.654%; top: 12.728%;                        /* 135.9 / 64.0 px */
  width: 76.346%;                                     /* 438.7px */
  height: auto;
}
.hero__cloud {
  position: absolute; left: 0; top: 0;
  width: 89.976%;                                     /* 517px */
  height: auto;
}

@media (max-width: 1279px) {
  .hero__visual { right: 0; width: clamp(320px, 40vw, 574.6px); top: -36px; }
}
@media (max-width: 991px) {
  .hero { padding-top: 64px; }
  .hero__content { max-width: none; }
  .hero__visual { position: relative; right: auto; top: auto; width: min(100%, 460px); margin: 48px auto 0; }
}

/* SERVICES --------------------------------------------------------------- */
.services { padding-top: 160px; }                     /* label y=869 */
.section-head--services .section-title { margin-top: 36.4px; } /* label→title 62px */
.services__intro { max-width: 557px; margin-top: 16.2px; font-size: 14px; font-weight: 500; line-height: 1.83; }

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 27px;
  margin-top: 64px;                                   /* cards y=1147 */
}
.service-card {
  display: flex; flex-direction: column; align-items: flex-start;
  min-height: 406px;
  padding: 48px 40px 0;
  border-radius: var(--radius-card);
  transition: transform .5s var(--ease);
  background: linear-gradient(126.36deg, rgba(73, 73, 73, 0.2) 11.839%, rgba(0, 0, 0, 0.2) 94.983%);
}
.service-card:hover { transform: translateY(-6px); }
.service-card:nth-child(2) {
  background: linear-gradient(-54.69deg, rgba(73, 73, 73, 0.2) 10.658%, rgba(0, 0, 0, 0.2) 89.07%);
  --g-card-border: linear-gradient(to top right, #4A5551, #0F0E12);
}
.service-card__icon { height: 76px; }
.service-card__title { margin-top: 36px; color: var(--c-mint); font-size: 32px; font-weight: 700; line-height: 1.22; }
.service-card__text { max-width: 486px; flex: 1; margin-top: 14px; margin-bottom: 36px; font-size: 16px; line-height: 1.83; }
.service-card__btn { position: relative; margin-top: auto; margin-bottom: -26px; }   /* button sits on the bottom edge */

.pillars {
  display: grid;
  grid-template-columns: 257px 256px 292px 274px;     /* centres at x=329.5/586/860/1143 */
  margin: 128px 0 0 113px;                            /* icons y=1681 */
}
.pillar {
  display: flex; flex-direction: column; align-items: center; gap: 19px;
  color: var(--c-mint); font-size: 20px; font-weight: 700; line-height: 1.22;
}

@media (min-width: 1280px) { .services__intro { padding-left: 7px; } }   /* x=95 */
@media (max-width: 1279px) {
  .services__grid { column-gap: 24px; }
  .service-card { padding: 40px 28px 0; }
  .pillars { grid-template-columns: repeat(4, 1fr); margin-left: 0; }
}
@media (max-width: 991px) {
  .services { padding-top: 112px; }
  .services__grid { grid-template-columns: 1fr; row-gap: 72px; }
  .service-card { min-height: 0; }
  .pillars { margin-top: 96px; }
}
@media (max-width: 600px) {
  .pillars { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
}

/* CTA BANNER ------------------------------------------------------------- */
.cta-section { padding-top: 103px; }                  /* banner y=1853 */
.cta-banner {
  position: relative;
  overflow: hidden;
  max-width: 1237px;                                  /* Figma banner is 27px narrower than the container */
  min-height: 528px;
  padding: 146px 46px 33px;                            /* kicker y=1999 */
  border-radius: var(--radius-panel);
  background: linear-gradient(238.62deg, #063B27 1.598%, #BEF3DF 73.098%);
  color: var(--c-bg);
  isolation: isolate;
}
/* Figma NOISE effect: monotone, black 20%, size 0.2 */
.cta-banner::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.5 -0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.1;                                       /* grain strength matched to the Figma render */
  pointer-events: none;
}
.cta-banner__kicker { font-size: 26px; font-style: italic; line-height: 1.27; }
.cta-banner__title { margin-top: 12px; font-size: var(--fs-banner); font-weight: 700; line-height: 1.27; }
.cta-banner .btn { margin-top: 27.2px; }

@media (max-width: 991px) {
  .cta-section { padding-top: 96px; }
  .cta-banner { min-height: 0; padding: 48px 28px 40px; }
  .cta-banner__kicker { font-size: 20px; }
}

/* FEATURES --------------------------------------------------------------- */
.features { padding-top: 125px; }                     /* label y=2506 */
.features__head { position: relative; }
.feature-grid {
  display: grid;
  grid-template-columns: 468px 410px 1fr;             /* columns at x=95/563/973 */
  row-gap: 98.4px;
  margin-top: 102.4px;                                /* icons y=2783 */
  padding-left: 7px;
}
.feature__title { margin-top: 28px; color: var(--c-mint); font-size: 30px; font-weight: 700; line-height: 1.22; }
.feature__text { margin-top: 9.4px; font-size: 16px; font-weight: 500; line-height: 1.83; }

@media (max-width: 1279px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); column-gap: 40px; padding-left: 0; }
}
@media (max-width: 991px) {
  .features { padding-top: 112px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); row-gap: 56px; margin-top: 64px; }
  .feature__title { font-size: 26px; }
}
@media (max-width: 600px) {
  .feature-grid { grid-template-columns: 1fr; row-gap: 44px; }
}

/* PRICING ---------------------------------------------------------------- */
.pricing { padding-top: 214.4px; }                    /* label y=3419 */
.pricing .eyebrow { position: relative; }
.pricing__intro { margin-top: 16.4px; transform: translateX(-1px); font-size: 14px; font-weight: 500; line-height: 1.83; }
.pricing__plans {
  position: relative;
  display: flex; justify-content: center; align-items: flex-start;
  gap: 32px;
  margin-top: 71.8px;                                 /* cards y=3733 */
}
/* Figma "Ellipse 1": 618px mint circle at 22%, layer blur 250 */
.pricing__glow {
  position: absolute;
  left: calc(50% + 13px - 309px); top: -124px;        /* centre x=733, y=3918 */
  width: 618px; height: 618px;
  border-radius: 50%;
  background: rgba(190, 243, 223, 0.22);
  filter: blur(250px);
  pointer-events: none;
}
.pricing__plans .plan { z-index: 1; }
.pricing__tabs {
  display: flex; width: max-content; margin: 48px auto 0; padding: 5px;
  border: 1px solid var(--c-mint-line); border-radius: var(--radius-pill);
}
.pricing__tabs[hidden] { display: none; }
.pricing__tab {
  min-width: 150px; height: 46px; padding: 0 28px;
  border: 0; border-radius: var(--radius-pill); background: transparent;
  color: var(--c-white); font-size: 16px; font-weight: 700; cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.pricing__tab:hover { color: var(--c-mint); }
.pricing__tab[aria-selected="true"] { background: var(--c-mint); color: var(--c-bg); }
.pricing__panel { padding-top: 96px; }
.pricing__panel-title { margin-bottom: 72px; color: var(--c-mint); font-size: 28px; text-align: center; }
.js-tabs .pricing__panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pricing__note a { color: var(--c-white); text-decoration: underline; text-underline-offset: 4px; }
.pricing__note a:hover { color: var(--c-mint); }

/* "Most popular" star on the featured (mint) card: the star shape as a dark mask */
.plan__badge {
  position: absolute; top: -52px; right: -48px; z-index: 2;
  display: grid; place-items: center;
  width: 128px; aspect-ratio: 163 / 152;
  background: var(--c-bg);
  -webkit-mask: url(/assets/img/badge-star.svg) center / contain no-repeat;
          mask: url(/assets/img/badge-star.svg) center / contain no-repeat;
  color: var(--c-mint); font-size: 13px; font-weight: 700; line-height: 1.15; text-align: center; text-transform: uppercase; letter-spacing: .08em;
  transform: rotate(12deg);
}

/* Dedicated servers strip under the plans */
.dedicated {
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  margin-top: 112px; padding: 40px 48px;
  border-radius: var(--radius-card);
  background: linear-gradient(100deg, rgba(190, 243, 223, 0.08), rgba(0, 0, 0, 0.2) 60%);
}
.dedicated__title { margin-top: 10px; font-size: 32px; font-weight: 700; line-height: 1.2; }
.dedicated__text { margin-top: 8px; color: rgba(255, 255, 255, 0.8); }
@media (max-width: 600px) { .dedicated { padding: 32px 24px; } .dedicated__title { font-size: 26px; } }
.pricing__note { max-width: 720px; margin: 68px auto 0; color: var(--c-mint); font-size: 16px; line-height: 1.55; text-align: center; }

@media (max-width: 1365px) { .plan__badge { right: -20px; } }
@media (max-width: 1279px) {
  .pricing__plans { flex-wrap: wrap; row-gap: 88px; }
}
@media (max-width: 991px) {
  .pricing { padding-top: 140px; }
  .pricing__glow { width: min(420px, 100%); height: 420px; left: 50%; transform: translateX(-50%); filter: blur(160px); }
}
@media (max-width: 600px) {
  .plan, .plan--featured { width: 100%; }
  .plan__badge { right: -8px; top: -44px; width: 100px; font-size: 11px; }
}

/* ABOUT ------------------------------------------------------------------ */
.about { padding-top: 166px; }                        /* label y=4778 */
.about__grid { display: grid; grid-template-columns: 582px 531px; column-gap: 126px; }
.about__text { padding-top: 58px; font-size: 16px; line-height: 2; }
.about__text p + p { margin-top: 32px; }

@media (max-width: 1279px) {
  .about__grid { grid-template-columns: 1fr 1fr; column-gap: 64px; }
}
@media (max-width: 991px) {
  .about { padding-top: 140px; }
  .about__grid { grid-template-columns: 1fr; }
  .about__text { padding-top: 32px; }
}

/* FAQ -------------------------------------------------------------------- */
.faq { padding-top: 182px; }                          /* label y=5243 */
.faq__list { margin-top: 98.4px; }                    /* first question y=5516 */

@media (max-width: 991px) {
  .faq { padding-top: 140px; }
  .faq__list { margin-top: 56px; }
  .faq-item__q { font-size: 18px; line-height: 1.6; }
}

.backup-teaser__card {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center;
  padding: 56px; border-radius: var(--radius-card);
  background: linear-gradient(100deg, rgba(190, 243, 223, 0.1), rgba(0, 0, 0, 0.25) 65%);
}
.backup-teaser__title { margin-top: 12px; font-size: var(--fs-h2); font-weight: 700; line-height: 1.2; }
.backup-teaser__text { max-width: 560px; margin-top: 20px; color: rgba(255, 255, 255, 0.85); }
.backup-teaser__price { margin-top: 20px; font-size: 18px; }
.backup-teaser__price strong { color: var(--c-mint); font-size: 32px; }
.backup-teaser__price span { color: rgba(255, 255, 255, 0.75); font-size: 15px; }
.backup-teaser__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.backup-teaser__list { display: grid; gap: 14px; }
.backup-teaser__list li { position: relative; padding-left: 32px; line-height: 1.6; }
.backup-teaser__list li::before {
  content: ''; position: absolute; left: 0; top: 4px; width: 19px; height: 18px;
  background: url(/assets/img/icons/check-19.svg) center / 19px 18px no-repeat;
}
@media (max-width: 991px) {
  .backup-teaser { padding-top: 88px; }
  .backup-teaser__card { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 36px 24px; }
}

@media (max-width: 540px) { .pricing__tab { min-width: 0; padding: 0 14px; font-size: 14px; } }

/* Services: compact cards, incomplete last row centered */
.services__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 56px 24px; margin-top: 48px; }
.service-card { flex: 0 1 calc((100% - 48px) / 3); min-height: 0; padding: 32px 32px 0; }
.service-card__icon, .service-card__icon img { height: 52px; width: auto; }
.service-card__title { margin-top: 20px; font-size: 24px; }
.service-card__text { margin-top: 10px; margin-bottom: 32px; font-size: 15px; line-height: 1.7; }
@media (max-width: 991px) { .service-card { flex-basis: 100%; } }