.servico-hospedagem {
      padding-bottom: env(safe-area-inset-bottom)
  }

  .servico-hospedagem * {
      min-width: 0
  }

  .servico-hospedagem img,
  .servico-hospedagem svg {
      max-width: 100%;
      height: auto
  }

  .servico-hospedagem a:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px
  }

  .servico-hospedagem .page-hero {
      padding: 110px 0 72px;
      position: relative;
      overflow: hidden
  }

  .servico-hospedagem .page-hero::before {
      content: '';
      position: absolute;
      width: 520px;
      height: 520px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(16, 185, 129, .08) 0%, transparent 70%);
      top: -180px;
      right: -180px;
      pointer-events: none
  }

  .servico-hospedagem .hero-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 36px;
      align-items: center
  }

  .servico-hospedagem .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 7px 16px;
      border-radius: 100px;
      border: 1px solid rgba(16, 185, 129, .25);
      background: rgba(16, 185, 129, .07);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 24px
  }

  .servico-hospedagem .page-hero h1 {
      font-size: clamp(34px, 12vw, 60px);
      font-weight: 900;
      line-height: 1.06;
      letter-spacing: -.04em;
      margin-bottom: 22px;
      text-wrap: balance
  }

  .servico-hospedagem .page-hero h1 .g {
      background: linear-gradient(100deg, #fff 30%, var(--green) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
  }

  .servico-hospedagem .hero-desc {
      font-size: clamp(15px, 4vw, 17px);
      color: var(--muted2);
      line-height: 1.72;
      margin-bottom: 32px;
      max-width: 500px
  }

  .servico-hospedagem .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center
  }

  /* Monitor mockup */
  .servico-hospedagem .monitor-mock {
      width: 100%;
      background: #060b12;
      border: 1px solid var(--b2);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 24px 60px rgba(0, 0, 0, .5)
  }

  .servico-hospedagem .mon-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 13px 14px;
      background: rgba(255, 255, 255, .03);
      border-bottom: 1px solid var(--border)
  }

  .servico-hospedagem .mon-dots {
      display: flex;
      gap: 6px;
      flex-shrink: 0
  }

  .servico-hospedagem .mon-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%
  }

  .servico-hospedagem .mon-dot:nth-child(1) {
      background: #ff5f57
  }

  .servico-hospedagem .mon-dot:nth-child(2) {
      background: #febc2e
  }

  .servico-hospedagem .mon-dot:nth-child(3) {
      background: #28c840
  }

  .servico-hospedagem .mon-title {
      font-size: clamp(9px, 2.6vw, 11px);
      font-family: 'JetBrains Mono', monospace;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
  }

  .servico-hospedagem .mon-body {
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px
  }

  .servico-hospedagem .mon-kpi-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px
  }

  .servico-hospedagem .mon-kpi {
      background: rgba(255, 255, 255, .03);
      border: 1px solid var(--border);
      border-radius: 9px;
      padding: 12px 14px
  }

  .servico-hospedagem .mon-kpi-lbl {
      font-size: 9px;
      font-family: 'JetBrains Mono', monospace;
      color: var(--muted);
      margin-bottom: 5px;
      text-transform: uppercase;
      letter-spacing: .06em
  }

  .servico-hospedagem .mon-kpi-val {
      font-size: clamp(18px, 6vw, 20px);
      font-weight: 800;
      letter-spacing: -.03em;
      line-height: 1
  }

  .servico-hospedagem .mon-kpi-val.green {
      color: var(--green)
  }

  .servico-hospedagem .mon-kpi-val.cyan {
      color: var(--cyan)
  }

  .servico-hospedagem .mon-kpi-val.blue {
      color: var(--blue)
  }

  .servico-hospedagem .mon-kpi-d {
      font-size: 9px;
      color: var(--muted);
      margin-top: 3px;
      font-family: 'JetBrains Mono', monospace
  }

  .servico-hospedagem .mon-uptime-label {
      font-size: 9px;
      font-family: 'JetBrains Mono', monospace;
      color: var(--muted);
      margin-bottom: 6px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: space-between
  }

  .servico-hospedagem .uptime-row {
      display: flex;
      gap: 2px;
      overflow: hidden
  }

  .servico-hospedagem .us {
      height: 24px;
      flex: 1;
      border-radius: 3px;
      background: rgba(16, 185, 129, .65);
      transition: opacity .2s
  }

  .servico-hospedagem .us:hover {
      opacity: .7
  }

  .servico-hospedagem .us.down {
      background: rgba(239, 68, 68, .5)
  }

  .servico-hospedagem .mon-services {
      display: flex;
      flex-direction: column;
      gap: 6px
  }

  .servico-hospedagem .mon-svc {
      display: grid;
      grid-template-columns: 1fr;
      gap: 4px;
      padding: 9px 12px;
      background: rgba(255, 255, 255, .03);
      border: 1px solid var(--border);
      border-radius: 7px;
      font-size: 11px;
      font-family: 'JetBrains Mono', monospace
  }

  .servico-hospedagem .mon-svc-name {
      color: var(--muted2);
      overflow-wrap: anywhere
  }

  .servico-hospedagem .mon-svc-status {
      display: flex;
      align-items: center;
      gap: 5px;
      color: var(--green);
      font-weight: 600
  }

  .servico-hospedagem .mon-svc-latency {
      color: var(--muted);
      font-size: 10px
  }

  .servico-hospedagem .mon-footer {
      border-top: 1px solid var(--border);
      padding: 10px 0 0;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: space-between;
      align-items: center
  }

  .servico-hospedagem .mon-footer-t {
      font-size: 10px;
      font-family: 'JetBrains Mono', monospace;
      color: var(--muted)
  }

  /* Plans */
  .servico-hospedagem .plans-section {
      padding: 72px 0
  }

  .servico-hospedagem .plans-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      margin-top: 44px
  }

  .servico-hospedagem .plan {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 30px 22px;
      display: flex;
      flex-direction: column;
      transition: all .3s;
      position: relative
  }

  .servico-hospedagem .plan:hover {
      border-color: rgba(16, 185, 129, .3);
      transform: translateY(-5px)
  }

  .servico-hospedagem .plan.hot {
      background: linear-gradient(160deg, rgba(16, 185, 129, .08), rgba(56, 189, 248, .04));
      border-color: rgba(16, 185, 129, .3)
  }

  .servico-hospedagem .plan-badge {
      position: absolute;
      top: -13px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--green);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: 4px 16px;
      border-radius: 100px;
      white-space: nowrap
  }

  .servico-hospedagem .plan-nm {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 4px
  }

  .servico-hospedagem .plan-ds {
      font-size: 13px;
      color: var(--muted2);
      margin-bottom: 24px
  }

  .servico-hospedagem .plan-price {
      display: flex;
      align-items: baseline;
      gap: 2px;
      margin-bottom: 28px;
      flex-wrap: wrap
  }

  .servico-hospedagem .plan-cur {
      font-size: 17px;
      font-weight: 600;
      color: var(--muted2)
  }

  .servico-hospedagem .plan-amt {
      font-size: clamp(42px, 14vw, 50px);
      font-weight: 900;
      letter-spacing: -.05em;
      line-height: 1
  }

  .servico-hospedagem .plan-per {
      font-size: 13px;
      color: var(--muted2)
  }

  .servico-hospedagem .plan-feats {
      list-style: none;
      flex: 1;
      margin-bottom: 26px;
      display: flex;
      flex-direction: column;
      gap: 9px
  }

  .servico-hospedagem .plan-feat {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 13px;
      color: var(--muted2);
      overflow-wrap: anywhere
  }

  .servico-hospedagem .pfd {
      width: 17px;
      height: 17px;
      border-radius: 50%;
      background: rgba(16, 185, 129, .1);
      border: 1px solid rgba(16, 185, 129, .2);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
  }

  .servico-hospedagem .pfd svg {
      width: 8px;
      height: 8px;
      stroke: var(--green);
      fill: none
  }

  /* Features */
  .servico-hospedagem .features-section {
      padding: 72px 0
  }

  .servico-hospedagem .feat-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      margin-top: 40px
  }

  .servico-hospedagem .feat-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 24px 20px;
      transition: all .25s
  }

  .servico-hospedagem .feat-card:hover {
      border-color: rgba(16, 185, 129, .25);
      transform: translateY(-4px)
  }

  .servico-hospedagem .feat-ico {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: rgba(16, 185, 129, .1);
      border: 1px solid rgba(16, 185, 129, .2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin-bottom: 18px
  }

  .servico-hospedagem .feat-t {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 8px
  }

  .servico-hospedagem .feat-d {
      font-size: 13px;
      color: var(--muted2);
      line-height: 1.6;
      overflow-wrap: anywhere
  }

  /* Compare */
  .servico-hospedagem .compare-section {
      padding: 72px 0
  }

  .servico-hospedagem .compare-table {
      margin-top: 40px;
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch
  }

  .servico-hospedagem .compare-header {
      display: grid;
      grid-template-columns: minmax(180px, 2fr) repeat(3, minmax(110px, 1fr));
      min-width: 560px;
      background: rgba(255, 255, 255, .03);
      border-bottom: 1px solid var(--border)
  }

  .servico-hospedagem .compare-header>div {
      padding: 14px 14px;
      font-size: 12px;
      font-weight: 700;
      text-align: center
  }

  .servico-hospedagem .compare-header>div:first-child {
      text-align: left;
      color: var(--muted2)
  }

  .servico-hospedagem .compare-row {
      display: grid;
      grid-template-columns: minmax(180px, 2fr) repeat(3, minmax(110px, 1fr));
      min-width: 560px;
      border-bottom: 1px solid var(--border);
      transition: background .2s
  }

  .servico-hospedagem .compare-row:last-child {
      border-bottom: none
  }

  .servico-hospedagem .compare-row:hover {
      background: rgba(255, 255, 255, .02)
  }

  .servico-hospedagem .compare-row>div {
      padding: 13px 14px;
      font-size: 13px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center
  }

  .servico-hospedagem .compare-row>div:first-child {
      justify-content: flex-start;
      text-align: left;
      color: var(--muted2)
  }

  .servico-hospedagem .chk {
      color: var(--green);
      font-size: 16px
  }

  .servico-hospedagem .dash {
      color: var(--muted);
      font-size: 16px
  }

  .servico-hospedagem .col-hi {
      background: rgba(16, 185, 129, .04)
  }

  @media(min-width:480px) {
      .servico-hospedagem .mon-kpi-row {
          grid-template-columns: repeat(3, 1fr)
      }

      .servico-hospedagem .mon-svc {
          grid-template-columns: minmax(0, 1fr) auto auto;
          align-items: center;
          gap: 8px
      }

      .servico-hospedagem .plans-grid {
          gap: 20px
      }
  }

  @media(min-width:768px) {
      .servico-hospedagem .page-hero {
          padding: 130px 0 92px
      }

      .servico-hospedagem .hero-grid {
          grid-template-columns: minmax(0, 1fr) minmax(380px, 48%);
          gap: 52px
      }

      .servico-hospedagem .monitor-mock {
          max-width: 720px;
          justify-self: end
      }

      .servico-hospedagem .mon-body {
          padding: 18px
      }

      .servico-hospedagem .plans-grid {
          grid-template-columns: repeat(2, 1fr);
          margin-top: 56px
      }

      .servico-hospedagem .feat-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 20px;
          margin-top: 52px
      }

      .servico-hospedagem .compare-table {
          margin-top: 52px
      }
  }

  @media(min-width:1024px) {

      .servico-hospedagem .features-section .wrap,
      .servico-hospedagem .plans-section .wrap,
      .servico-hospedagem .compare-section .wrap,
      .servico-hospedagem .cta-section .wrap {
          max-width: 1180px;
          margin: 0 auto
      }

      .servico-hospedagem .hero-grid {
          grid-template-columns: minmax(0, 1fr) 500px;
          gap: 80px
      }

      .servico-hospedagem .plans-grid {
          grid-template-columns: repeat(3, 1fr);
          gap: 22px
      }

      .servico-hospedagem .plan {
          padding: 36px 32px
      }

      .servico-hospedagem .feat-grid {
          grid-template-columns: repeat(3, 1fr)
      }

      .servico-hospedagem .compare-table {
          overflow: hidden
      }

      .servico-hospedagem .compare-header,
      .servico-hospedagem .compare-row {
          min-width: 0;
          grid-template-columns: 2fr 1fr 1fr 1fr
      }

      .servico-hospedagem .compare-header>div {
          padding: 16px 20px
      }

      .servico-hospedagem .compare-row>div {
          padding: 14px 20px
      }
  }

  @media(min-width:1280px) {

      .servico-hospedagem .features-section .wrap,
      .servico-hospedagem .plans-section .wrap,
      .servico-hospedagem .compare-section .wrap,
      .servico-hospedagem .cta-section .wrap {
          max-width: 1200px
      }
  }