/*
Theme Name: TerraHosting Landing Theme
Theme URI: https://terrahosting.net/
Author: TerraHosting
Author URI: https://terrahosting.net/
Description: A one-page TerraHosting marketing site converted from static HTML. Includes responsive layout and a simple contact form handler.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: terrahosting
*/

:root{
      --bg: #f4fbf6;
      --surface: rgba(255,255,255,.82);
      --surface2: rgba(255,255,255,.65);
      --text: #0b1220;
      --muted: rgba(11,18,32,.70);
      --border: rgba(11,18,32,.10);

      --green-900:#0f2f1c;
      --green-800:#134026;
      --green-700:#175233;
      --green-600:#1c6a40;
      --green-500:#2c8a55;
      --green-400:#49b172;
      --green-300:#76d39a;

      --shadow: 0 18px 45px rgba(11,18,32,.10);
      --shadow2: 0 12px 30px rgba(11,18,32,.08);
      --radius: 18px;
      --header-offset: 92px;

      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }

    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; scroll-padding-top: var(--header-offset); }
    body{
      margin:0;
      font-family: var(--sans);
      color: var(--text);
      background:
        radial-gradient(900px 520px at 15% 10%, rgba(73,177,114,.22), transparent 60%),
        radial-gradient(820px 420px at 85% 15%, rgba(44,138,85,.18), transparent 60%),
        radial-gradient(720px 360px at 65% 95%, rgba(118,211,154,.18), transparent 60%),
        linear-gradient(180deg, #effaf2, #ffffff);
      line-height:1.55;
    }

    a{ color:inherit; text-decoration:none; }
    .container{ width:min(1120px, 92%); margin:0 auto; }

    /* Header */
    .header{
      position: sticky;
      top:0;
      z-index: 50;
      backdrop-filter: blur(10px);
      background: rgba(255,255,255,.72);
      border-bottom: 1px solid rgba(11,18,32,.08);
    }
    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding: 14px 0;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      min-width: 220px;
    }

    .logoMark{
      width:44px;
      height:44px;
      display:grid;
      place-items:center;
      border-radius: 14px;
      background:
        radial-gradient(18px 18px at 30% 30%, rgba(255,255,255,.9), transparent 55%),
        linear-gradient(180deg, rgba(118,211,154,.95), rgba(44,138,85,.95));
      box-shadow: 0 10px 24px rgba(44,138,85,.18);
      border: 1px solid rgba(255,255,255,.7);
    }
    .logoMark svg{ width:30px; height:30px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.10)); }

    .brandText{
      display:flex;
      flex-direction:column;
      line-height:1.05;
    }
    .brandText strong{
      font-size: 18px;
      letter-spacing: -0.3px;
    }
    .brandText span{
      font-size: 12px;
      color: rgba(11,18,32,.65);
      letter-spacing: 0.2px;
    }

    .navlinks{
      display:flex;
      align-items:center;
      gap:18px;
    }
    .navlinks a{
      font-size: 14px;
      color: rgba(11,18,32,.78);
      padding: 8px 10px;
      border-radius: 10px;
      transition: background .18s ease, color .18s ease;
    }
    .navlinks a:hover{
      background: rgba(44,138,85,.08);
      color: rgba(11,18,32,.92);
    }

    .ctaRow{ display:flex; align-items:center; gap:10px; }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      font-weight: 650;
      font-size: 14px;
      padding: 11px 14px;
      border-radius: 12px;
      border: 1px solid rgba(11,18,32,.10);
      background: rgba(255,255,255,.85);
      box-shadow: 0 10px 24px rgba(11,18,32,.06);
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
      white-space: nowrap;
    }
    .btn:hover{ transform: translateY(-1px); box-shadow: 0 14px 28px rgba(11,18,32,.08); }
    .btn.primary{
      border-color: rgba(44,138,85,.35);
      background: linear-gradient(180deg, rgba(44,138,85,.95), rgba(28,106,64,.95));
      color: white;
      box-shadow: 0 18px 38px rgba(28,106,64,.24);
    }
    .btn.primary:hover{ box-shadow: 0 22px 46px rgba(28,106,64,.28); }

    .menuBtn{
      display:none;
      border: 1px solid rgba(11,18,32,.10);
      background: rgba(255,255,255,.82);
      border-radius: 12px;
      padding: 10px 12px;
      cursor:pointer;
    }

    /* Hero */
    .hero{
      padding: 48px 0 22px;
    }
    .heroGrid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 18px;
      align-items: stretch;
    }

    .card{
      border: 1px solid rgba(11,18,32,.10);
      background: var(--surface);
      box-shadow: var(--shadow);
      border-radius: var(--radius);
      overflow:hidden;
    }
    .heroCard{
      padding: 34px 30px 28px;
      position: relative;
    }
    .heroCard:before{
      content:"";
      position:absolute;
      inset:-1px;
      background:
        radial-gradient(700px 260px at 0% 0%, rgba(118,211,154,.28), transparent 60%),
        radial-gradient(540px 280px at 100% 15%, rgba(44,138,85,.22), transparent 60%);
      pointer-events:none;
      opacity: .9;
      mask: linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.55));
    }

    .badge{
      position: relative;
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(44,138,85,.28);
      background: rgba(255,255,255,.72);
      color: rgba(11,18,32,.78);
      font-size: 13px;
      z-index: 1;
    }
    .dot{
      width:10px;
      height:10px;
      border-radius: 50%;
      background: linear-gradient(180deg, rgba(118,211,154,.95), rgba(44,138,85,.95));
      box-shadow: 0 8px 16px rgba(44,138,85,.22);
    }

    h1{
      position: relative;
      z-index: 1;
      margin: 16px 0 10px;
      font-size: clamp(30px, 3.5vw, 54px);
      letter-spacing: -0.8px;
      line-height: 1.05;
    }
    .lead{
      position: relative;
      z-index: 1;
      margin: 0 0 18px;
      font-size: 16px;
      color: rgba(11,18,32,.72);
      max-width: 60ch;
    }

    .heroActions{
      position: relative;
      z-index: 1;
      display:flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 16px;
    }

    .miniRow{
      position: relative;
      z-index: 1;
      margin-top: 18px;
      display:flex;
      flex-wrap: wrap;
      gap: 10px;
      color: rgba(11,18,32,.66);
      font-size: 13px;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(11,18,32,.10);
      background: rgba(255,255,255,.65);
      box-shadow: 0 10px 20px rgba(11,18,32,.05);
    }
    .pill svg{ width:16px; height:16px; color: var(--green-600); }

    .sideCard{
      padding: 22px;
      display:flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 14px;
      background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.70));
    }
    .sideCard h2{
      margin: 0;
      font-size: 16px;
      letter-spacing: -0.2px;
    }
    .sideCard p{
      margin: 8px 0 0;
      color: rgba(11,18,32,.70);
      font-size: 14px;
    }
    .kpiGrid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .kpi{
      border: 1px solid rgba(11,18,32,.10);
      border-radius: 14px;
      padding: 12px 12px;
      background: rgba(255,255,255,.70);
    }
    .kpi strong{
      display:block;
      font-size: 18px;
      letter-spacing: -0.2px;
    }
    .kpi span{
      display:block;
      margin-top: 2px;
      color: rgba(11,18,32,.62);
      font-size: 12px;
    }

    /* Sections */
    section{ padding: 34px 0; }
    .sectionHead{
      display:flex;
      align-items: end;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 16px;
    }
    .sectionHead h2{
      margin:0;
      font-size: 22px;
      letter-spacing: -0.3px;
    }
    .sectionHead p{
      margin:0;
      color: rgba(11,18,32,.68);
      font-size: 14px;
      max-width: 68ch;
    }

    /* Pricing */
    .pricingGrid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      align-items: stretch;
    }
    .plan{
      padding: 18px;
      background: rgba(255,255,255,.78);
      border-radius: var(--radius);
      border: 1px solid rgba(11,18,32,.10);
      box-shadow: var(--shadow2);
      position: relative;
      overflow:hidden;
      display:flex;
      flex-direction: column;
      min-height: 100%;
    }
    .plan .titleRow{
      display:flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 6px;
    }
    .plan h3{
      margin:0;
      font-size: 18px;
      letter-spacing: -0.2px;
    }
    .tag{
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(44,138,85,.25);
      background: rgba(44,138,85,.10);
      color: rgba(11,18,32,.72);
      white-space: nowrap;
    }
    .price{
      display:flex;
      align-items: baseline;
      gap: 10px;
      margin: 8px 0 12px;
    }
    .price strong{
      font-size: 46px;
      letter-spacing: -1px;
      line-height: 1;
    }
    .price span{
      font-size: 13px;
      color: rgba(11,18,32,.62);
      letter-spacing: 0.2px;
    }
    .features{
      margin: 10px 0 16px;
      padding: 0;
      list-style: none;
      display:grid;
      gap: 10px;
      color: rgba(11,18,32,.74);
      font-size: 14px;
    }
    .features li{
      display:flex;
      gap: 10px;
      align-items: start;
    }
    .check{
      width:18px;
      height:18px;
      border-radius: 50%;
      background: rgba(44,138,85,.10);
      border: 1px solid rgba(44,138,85,.25);
      display:grid;
      place-items:center;
      flex: 0 0 18px;
      margin-top: 2px;
    }
    .check svg{ width:12px; height:12px; color: var(--green-600); }

    .plan .grow{ flex: 1; }
    .plan .btn{ width:100%; margin-top: 8px; }
    .plan.popular{
      border-color: rgba(44,138,85,.30);
      box-shadow: 0 26px 60px rgba(28,106,64,.18);
      transform: translateY(-2px);
    }
    .plan.popular:before{
      content:"Most Popular";
      position:absolute;
      top: 14px;
      right: 14px;
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(44,138,85,.95), rgba(28,106,64,.95));
      color:#fff;
      border: 1px solid rgba(255,255,255,.6);
      box-shadow: 0 14px 28px rgba(28,106,64,.20);
    }

    /* Clients */
    .clientGrid{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }
    .client{
      padding: 14px;
      border-radius: 16px;
      border: 1px solid rgba(11,18,32,.10);
      background: rgba(255,255,255,.75);
      box-shadow: 0 12px 26px rgba(11,18,32,.06);
      min-height: 92px;
      display:flex;
      flex-direction: column;
      justify-content: center;
      gap: 6px;
    }
    .client strong{ font-size: 14px; letter-spacing: -0.2px; }
    .client span{ font-size: 12px; color: rgba(11,18,32,.64); }
    .client span a{ color: inherit; text-decoration: underline; }
    .client span a:hover{ text-decoration: none; }

    /* FAQ */
    .faqGrid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    details{
      border: 1px solid rgba(11,18,32,.10);
      border-radius: 16px;
      background: rgba(255,255,255,.75);
      box-shadow: 0 12px 26px rgba(11,18,32,.06);
      padding: 12px 14px;
    }
    summary{
      cursor:pointer;
      font-weight: 650;
      letter-spacing: -0.2px;
    }
    details p{
      margin: 10px 0 0;
      color: rgba(11,18,32,.70);
      font-size: 14px;
    }


/* Contact + QR */
.contactCard{
  padding: 18px;
}
.contactSplit{
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 16px;
  align-items: stretch;
}
.contactForm{
  display: grid;
  gap: 12px;
  margin: 0;
}
.qrPanel{
  border: 1px dashed rgba(11,18,32,.18);
  border-radius: 16px;
  background: rgba(255,255,255,.70);
  box-shadow: 0 12px 26px rgba(11,18,32,.06);
  padding: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.qrInner{
  text-align:center;
  width: 100%;
  max-width: 320px;
}
.qrKicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(44,138,85,.28);
  background: rgba(255,255,255,.75);
  color: rgba(11,18,32,.78);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.qrTitle{
  margin: 10px 0 8px;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.2px;
  line-height: 1.2;
}
.qrText{
  margin: 0 0 12px;
  color: rgba(11,18,32,.70);
  font-size: 13px;
}
.qrImgWrap{
  display:flex;
  justify-content:center;
}
.qrImg{
  width: 200px;
  height: 200px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(11,18,32,.10);
  box-shadow: 0 14px 28px rgba(11,18,32,.08);
  padding: 10px;
}
.qrLink{
  margin: 10px 0 0;
  word-break: break-all;
}
.qrLink a{
  text-decoration: underline;
}
.qrLink a:hover{
  text-decoration: none;
}

    /* Footer */
    footer{
      padding: 26px 0 34px;
      border-top: 1px solid rgba(11,18,32,.08);
      background: rgba(255,255,255,.55);
    }
    .footerGrid{
      display:grid;
      grid-template-columns: 1.3fr 1fr 1fr;
      gap: 16px;
      align-items: start;
    }
    .small{ font-size: 13px; color: rgba(11,18,32,.70); }
    .footerLinks{
      display:grid;
      gap: 8px;
      font-size: 14px;
      color: rgba(11,18,32,.72);
    }
    .footerLinks a:hover{ text-decoration: underline; }

    /* Anchor offset for sticky header */
    #top, .sectionHead[id], #pricing{
      scroll-margin-top: var(--header-offset);
    }

    /* Mobile */
    @media (max-width: 980px){
      .heroGrid{ grid-template-columns: 1fr; }
      .pricingGrid{ grid-template-columns: 1fr; }
      .clientGrid{ grid-template-columns: 1fr 1fr; }
      .footerGrid{ grid-template-columns: 1fr; }
      .contactSplit{ grid-template-columns: 1fr; }
      .qrImg{ width: 190px; height: 190px; }
    }

    @media (max-width: 760px){
      .navlinks{ display:none; }
      .menuBtn{ display:inline-flex; }
      .ctaRow .btn{ display:none; }
      .mobileMenu{
        display:none;
        padding: 10px 0 14px;
      }
      .mobileMenu.show{ display:block; }
      .mobileMenu a{
        display:block;
        padding: 10px 10px;
        border-radius: 12px;
        color: rgba(11,18,32,.82);
      }
      .mobileMenu a:hover{
        background: rgba(44,138,85,.08);
      }
      .heroCard{ padding: 28px 20px 22px; }
      .sideCard{ padding: 18px; }
      .kpiGrid{ grid-template-columns: 1fr 1fr; }
      .faqGrid{ grid-template-columns: 1fr; }
      .brand{ min-width: 0; }
    }

/* WordPress niceties */
:focus-visible{ outline: 2px solid rgba(44,138,85,.35); outline-offset: 3px; }
.formNotice{ margin: 10px 0 14px; padding: 12px 14px; border-radius: 14px; font-weight: 700; }
.formNotice.ok{ background: rgba(44,138,85,.10); color: rgba(11,18,32,.92); border: 1px solid rgba(44,138,85,.28); }
.formNotice.err{ background: rgba(225,60,60,.10); color: rgba(11,18,32,.92); border: 1px solid rgba(225,60,60,.28); }