/* =========================================================
   AxioNetVPN — Home V2
   Quiet luxury / editorial layout
   ========================================================= */

.home-v2 {
  overflow: hidden;

  background:
    #050505;
}


/* =========================
   COMMON
   ========================= */

.home-v2,
.home-footer {
  --home-width:
    min(1120px, calc(100% - 40px));

  --home-gold:
    #cdb36a;

  --home-gold-soft:
    rgba(205,179,106,.16);

  --home-line:
    rgba(205,179,106,.105);

  --home-text:
    #f2efe8;

  --home-muted:
    #99958c;
}

.home-kicker {
  margin: 0 0 18px;

  color:
    var(--home-gold);

  font-size: 11px;
  font-weight: 800;

  letter-spacing: .16em;
}


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

.home-hero {
  position: relative;

  min-height:
    calc(100vh - 68px);

  display: flex;
  align-items: center;

  isolation: isolate;

  background:
    #030303;
}

.home-hero::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -3;

  background:
    radial-gradient(
      circle at 72% 38%,
      rgba(175,139,49,.09),
      transparent 24%
    ),
    radial-gradient(
      circle at 25% 65%,
      rgba(102,79,28,.025),
      transparent 28%
    );
}

.home-hero-visual {
  position: absolute;

  z-index: -2;

  top: 0;
  right: -5%;
  bottom: 0;

  width: 66%;

  background:
    url("/assets/hero.png")
    center right / cover
    no-repeat;

  opacity: .33;

  filter:
    grayscale(1)
    sepia(.6)
    saturate(.85)
    brightness(.56)
    contrast(1.08);

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.25) 15%,
      #000 45%
    );
}

.home-hero::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -1;

  background:
    linear-gradient(
      90deg,
      rgba(3,3,3,.99) 0%,
      rgba(3,3,3,.89) 35%,
      rgba(3,3,3,.43) 62%,
      rgba(3,3,3,.20) 100%
    );
}

.home-hero-inner {
  width:
    var(--home-width);

  margin:
    0 auto;

  display: grid;

  grid-template-columns:
    minmax(0,1.35fr)
    minmax(280px,.65fr);

  gap: 100px;

  align-items: center;

  padding:
    100px 0;
}

.home-hero-copy {
  max-width:
    720px;
}

.home-hero h1 {
  max-width:
    760px;

  margin:
    0;

  color:
    var(--home-text);

  font-size:
    clamp(54px, 6vw, 92px);

  font-weight:
    780;

  line-height:
    .98;

  letter-spacing:
    -.065em;
}

.home-hero h1 span {
  display: block;

  color:
    #aaa399;

  font-weight:
    620;
}

.home-hero-lead {
  max-width:
    590px;

  margin:
    30px 0 0;

  color:
    #aca69c;

  font-size:
    17px;

  line-height:
    1.72;
}

.home-hero-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 12px;

  margin-top:
    38px;
}

.home-button {
  min-height:
    50px;

  padding:
    0 22px;

  display: inline-flex;

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

  border-radius:
    14px;

  text-decoration:
    none !important;

  font-size:
    13px;

  font-weight:
    800;

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.home-button-primary {
  color:
    #171207 !important;

  background:
    linear-gradient(
      135deg,
      #e4d18d,
      #c09e4a
    );

  border:
    1px solid
    rgba(236,216,154,.27);

  box-shadow:
    0 14px 36px
    rgba(154,121,43,.12);
}

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

  box-shadow:
    0 18px 42px
    rgba(154,121,43,.17);
}

.home-button-ghost {
  color:
    #d7d2c8 !important;

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

  border:
    1px solid
    rgba(205,179,106,.16);
}

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

  background:
    rgba(205,179,106,.045);

  border-color:
    rgba(205,179,106,.29);
}


/* HERO SIDE */

.home-hero-side {
  align-self:
    center;

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

.home-side-line {
  display: grid;

  grid-template-columns:
    38px 1fr;

  gap: 20px;

  padding:
    24px 0 24px 30px;

  border-bottom:
    1px solid
    rgba(205,179,106,.07);
}

.home-side-line:last-child {
  border-bottom: 0;
}

.home-side-line > span {
  color:
    var(--home-gold);

  font-size:
    10px;

  letter-spacing:
    .12em;
}

.home-side-line strong {
  color:
    #e9e4da;

  font-size:
    14px;
}

.home-side-line p {
  margin:
    8px 0 0;

  color:
    #827e76;

  font-size:
    12px;

  line-height:
    1.6;
}


/* =========================
   STRIP
   ========================= */

.home-strip {
  width:
    var(--home-width);

  margin:
    0 auto;

  display:
    grid;

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

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

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

.home-strip > div {
  padding:
    22px 18px;

  text-align:
    center;

  border-right:
    1px solid
    rgba(205,179,106,.07);
}

.home-strip > div:last-child {
  border-right: 0;
}

.home-strip span {
  color:
    #938d83;

  font-size:
    11px;

  letter-spacing:
    .035em;
}


/* =========================
   SECTIONS
   ========================= */

.home-section {
  width:
    var(--home-width);

  margin:
    0 auto;

  padding:
    130px 0;
}

.home-section-heading {
  display:
    grid;

  grid-template-columns:
    minmax(0,1.35fr)
    minmax(260px,.65fr);

  gap:
    90px;

  align-items:
    end;

  margin-bottom:
    64px;
}

.home-section-heading h2 {
  max-width:
    650px;

  margin:
    0;

  color:
    var(--home-text);

  font-size:
    clamp(38px,4.2vw,62px);

  line-height:
    1.03;

  letter-spacing:
    -.052em;
}

.home-section-heading > p {
  margin:
    0;

  color:
    #918c83;

  font-size:
    14px;

  line-height:
    1.72;
}


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

.home-process-list {
  border-top:
    1px solid
    var(--home-line);
}

.home-process-list article {
  display:
    grid;

  grid-template-columns:
    90px 1fr;

  gap:
    30px;

  padding:
    35px 0;

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

  transition:
    padding-left .22s ease,
    background .22s ease;
}

.home-process-list article:hover {
  padding-left:
    12px;

  background:
    linear-gradient(
      90deg,
      rgba(205,179,106,.025),
      transparent 60%
    );
}

.home-process-list article > span {
  color:
    var(--home-gold);

  font-size:
    11px;

  letter-spacing:
    .12em;
}

.home-process-list article > div {
  display:
    grid;

  grid-template-columns:
    minmax(190px,.45fr)
    minmax(0,.55fr);

  gap:
    70px;
}

.home-process-list h3 {
  margin:
    0;

  color:
    #eae5dc;

  font-size:
    20px;
}

.home-process-list p {
  max-width:
    530px;

  margin:
    0;

  color:
    #8d887f;

  font-size:
    13px;

  line-height:
    1.72;
}


/* =========================
   TARIFFS
   ========================= */

.home-tariffs {
  position:
    relative;
}

.home-tariff-grid {
  gap:
    14px !important;
}

.home-tariff-grid .tariff-card {
  min-height:
    310px;

  padding:
    28px !important;

  display:
    flex;

  flex-direction:
    column;

  border-radius:
    20px !important;

  background:
    linear-gradient(
      145deg,
      rgba(17,16,14,.92),
      rgba(8,8,7,.97)
    ) !important;

  border:
    1px solid
    rgba(205,179,106,.11) !important;

  box-shadow:
    none !important;
}

.home-tariff-grid .tariff-card:hover {
  transform:
    translateY(-4px);

  border-color:
    rgba(205,179,106,.25) !important;
}

.home-tariff-grid
.tariff-card.featured {
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(205,179,106,.08),
      transparent 54%
    ),
    linear-gradient(
      145deg,
      rgba(20,18,13,.96),
      rgba(8,8,7,.98)
    ) !important;

  border-color:
    rgba(205,179,106,.31) !important;
}

.home-tariff-grid h3 {
  font-size:
    18px;
}

.home-tariff-grid .price {
  margin:
    22px 0 20px;

  color:
    #ddc675 !important;

  font-size:
    32px !important;
}

.home-tariff-grid ul {
  flex:
    1;

  color:
    #98938a;
}

.home-tariff-grid .button {
  min-height:
    48px;

  border-radius:
    13px !important;
}

.home-tariff-more {
  margin-top:
    28px;

  text-align:
    center;
}

.home-tariff-more a {
  color:
    #aaa49a !important;

  text-decoration:
    none;

  font-size:
    12px;
}

.home-tariff-more span {
  display:
    inline-block;

  margin-left:
    7px;

  color:
    var(--home-gold);

  transition:
    transform .18s ease;
}

.home-tariff-more a:hover span {
  transform:
    translateX(4px);
}


/* =========================
   EXPERIENCE
   ========================= */

.home-experience {
  display:
    grid;

  grid-template-columns:
    minmax(300px,.8fr)
    minmax(0,1.2fr);

  gap:
    110px;
}

.home-experience-title {
  position:
    sticky;

  top:
    110px;

  align-self:
    start;
}

.home-experience-title h2 {
  max-width:
    480px;

  margin:
    0;

  color:
    var(--home-text);

  font-size:
    clamp(38px,4.1vw,60px);

  line-height:
    1.03;

  letter-spacing:
    -.052em;
}

.home-experience-list {
  border-top:
    1px solid
    var(--home-line);
}

.home-experience-list a {
  display:
    grid;

  grid-template-columns:
    minmax(180px,.7fr)
    minmax(220px,1fr)
    24px;

  gap:
    30px;

  align-items:
    center;

  min-height:
    105px;

  padding:
    20px 5px;

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

  color:
    inherit !important;

  text-decoration:
    none !important;

  transition:
    padding-left .2s ease,
    background .2s ease;
}

.home-experience-list a:hover {
  padding-left:
    12px;

  background:
    linear-gradient(
      90deg,
      rgba(205,179,106,.027),
      transparent
    );
}

.home-experience-list span {
  color:
    #e6e1d8;

  font-size:
    16px;

  font-weight:
    700;
}

.home-experience-list small {
  color:
    #858077;

  font-size:
    12px;

  line-height:
    1.55;
}

.home-experience-list b {
  color:
    var(--home-gold);

  font-size:
    17px;

  font-weight:
    400;

  transition:
    transform .2s ease;
}

.home-experience-list a:hover b {
  transform:
    translateX(5px);
}


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

.home-final {
  width:
    var(--home-width);

  margin:
    40px auto 110px;

  padding:
    58px 0;

  display:
    flex;

  align-items:
    end;

  justify-content:
    space-between;

  gap:
    70px;

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

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

.home-final h2 {
  max-width:
    640px;

  margin:
    0;

  color:
    var(--home-text);

  font-size:
    clamp(40px,4.6vw,68px);

  line-height:
    1.01;

  letter-spacing:
    -.055em;
}

.home-final p:not(.home-kicker) {
  margin:
    20px 0 0;

  color:
    #8c877e;

  font-size:
    13px;
}


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

.home-footer {
  width:
    var(--home-width);

  margin:
    0 auto;

  padding:
    30px 0 45px;

  display:
    flex;

  justify-content:
    space-between;

  gap:
    40px;

  color:
    #746f68;

  border-top:
    1px solid
    rgba(205,179,106,.07);
}

.home-footer-brand {
  display:
    grid;

  gap:
    6px;
}

.home-footer strong {
  color:
    #c5c0b7;

  font-size:
    13px;
}

.home-footer span {
  font-size:
    11px;
}

.home-footer nav {
  display:
    flex;

  flex-wrap:
    wrap;

  justify-content:
    flex-end;

  gap:
    20px;
}

.home-footer a {
  color:
    #817c74 !important;

  text-decoration:
    none;

  font-size:
    11px;
}

.home-footer a:hover {
  color:
    var(--home-gold) !important;
}


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

@media (max-width: 900px) {

  .home-hero {
    min-height:
      auto;
  }

  .home-hero-visual {
    width:
      100%;

    opacity:
      .20;

    mask-image:
      linear-gradient(
        180deg,
        rgba(0,0,0,.8),
        transparent
      );
  }

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

    gap:
      65px;

    padding:
      90px 0 70px;
  }

  .home-hero-side {
    max-width:
      640px;
  }

  .home-section-heading {
    grid-template-columns:
      1fr;

    gap:
      24px;
  }

  .home-process-list article > div {
    grid-template-columns:
      1fr;

    gap:
      12px;
  }

  .home-experience {
    grid-template-columns:
      1fr;

    gap:
      55px;
  }

  .home-experience-title {
    position:
      static;
  }

  .home-final {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

}


@media (max-width: 650px) {

  .home-v2,
  .home-footer {
    --home-width:
      min(100% - 28px,1120px);
  }

  .home-hero h1 {
    font-size:
      clamp(46px,14vw,68px);
  }

  .home-strip {
    grid-template-columns:
      1fr 1fr;
  }

  .home-strip > div:nth-child(2) {
    border-right:
      0;
  }

  .home-strip > div:nth-child(-n+2) {
    border-bottom:
      1px solid
      rgba(205,179,106,.07);
  }

  .home-section {
    padding:
      90px 0;
  }

  .home-section-heading {
    margin-bottom:
      42px;
  }

  .home-process-list article {
    grid-template-columns:
      42px 1fr;

    gap:
      12px;
  }

  .home-experience-list a {
    grid-template-columns:
      1fr 22px;

    gap:
      8px 20px;

    padding:
      22px 4px;
  }

  .home-experience-list small {
    grid-column:
      1;
  }

  .home-experience-list b {
    grid-column:
      2;

    grid-row:
      1 / span 2;
  }

  .home-footer {
    flex-direction:
      column;
  }

  .home-footer nav {
    justify-content:
      flex-start;
  }

}