@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
/* GO Soft - homepage styles */
:root{
  --accent:#9d44da;
  --accent-2:#00b894;
  --bg:#f6f8fb;
  --muted:#6b7280;
  --card:#ffffff;
  --glass: rgba(255,255,255,0.6);
  --maxw:1100px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:'Poppins',sans-serif;/* background:linear-gradient(180deg,#f8fbff 0%,var(--bg) 100%); */color:#111}
.page {padding-top: 87px;}
.container{max-width:var(--maxw);margin:0 auto;padding:2rem}
.sec {padding: 2rem 0;}
.site-header{position:fixed;width: 100%; top:0;background:rgba(255,255,255,0.8);backdrop-filter:blur(6px);z-index:40;box-shadow:0 2px 8px rgba(20,20,40,0.04)}
.header-inner{display:flex;align-items:center;gap:1rem;padding:0.75rem 1rem}
.logo{font-weight:800;color:var(--accent);letter-spacing:0.6px;font-size:1.25rem; max-width: 80px;}
.logo img {width: 100%;}
.main-nav{display:flex;gap:0.6rem;margin-left:1rem; justify-content: center; width: calc(100% - 240px);}
.main-nav a{color:#2b2f35;text-decoration:none;padding:0.5rem;border-radius:6px;font-weight:400}
.main-nav a:hover{background:rgba(108,92,231,0.08)}
.cta{margin-left:auto;background:var(--accent);color:#fff;border:0;padding:0.6rem 1rem;border-radius:8px;cursor:pointer}
.nav-toggle{display:none;background:transparent;border:0;font-size:1.25rem;padding:0.5rem}
/* Hero */
.hero{padding:4rem 0;/* background:linear-gradient(180deg, rgba(108,92,231,0.06) 0%, transparent 60%); */position:relative;overflow:hidden; background-image: linear-gradient(to bottom right, #e6c9f9, #ffffff);}
.hero-inner{display:flex;align-items:stretch;gap:2rem}
.hero-text{flex:1;display:flex;flex-direction:column;justify-content:center; width: 50%;}
.hero h1{font-size:2.2rem;margin:0 0 0.6rem}
.sub{color:var(--muted);margin:0 0 1.2rem}
.hero-cta{display:flex;gap:0.75rem}
.btn{display:inline-block;padding:0.65rem 1rem;border-radius:8px;text-decoration:none;font-weight:700; border: 0;}
.btn.primary{background:var(--accent);color:#fff}
.btn.ghost{background:transparent;border:1px solid var(--accent);color:#333}
.btn.outline{background:transparent;border:1px solid var(--accent);color:var(--accent)}
.hero-card {width:50%;background:linear-gradient(180deg,var(--card),#fafafa);border-radius:12px;padding:1rem;box-shadow:0 12px 30px rgba(16,24,40,0.06);align-self:center}
.hero-card img {width: 100%;}
.card-header{font-weight:700;color:var(--accent);margin-bottom:0.6rem}
.card-body .stat{display:flex;justify-content:space-between;padding:0.45rem 0;border-top:1px dashed rgba(20,20,40,0.04)}
.hero-svg{position:absolute;left:0;bottom:-1px;width:100%;height:70px}

/* About */
.about-grid{display:flex;gap:2rem;align-items:center}
.about-text{flex:1}
.about-media{flex:1}
.media-card{background:linear-gradient(135deg,#fff,#f7fbff);padding:1.2rem;border-radius:12px;box-shadow:0 6px 18px rgba(12,18,30,0.1);display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:700}
.media-card img {width: 100%;}

/* Features */
.features {background: #d3adee;}
.section-title{text-align:center;margin:0 0 2rem}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.features-grid .feature:nth-child(1) {background: #ffd9d1;}
.features-grid .feature:nth-child(2) {background: #fffdd1;}
.features-grid .feature:nth-child(3) {background: #d9ffd1;}
.features-grid .feature:nth-child(4) {background: #ffd1d1;}
.feature{background:var(--card);padding:1rem;border-radius:10px;box-shadow:0 0 20px rgba(15,20,30,0.1);text-align:center}
.feature .icon{font-size:1.8rem;margin-bottom:0.5rem}

/* Pricing */
/* .pricing {background-image: linear-gradient(to bottom right, #e6c9f9, #ffffff);} */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.plan{background:var(--card);padding:1.2rem;border-radius:12px;text-align:center;position:relative}
.plan .price{font-size:1.6rem;font-weight:800;color:var(--accent);margin:0.6rem 0}
.plan .ribbon{position:absolute;top:-10px;left:8px;background:var(--accent-2);color:#fff;padding:0.25rem 0.6rem;border-radius:6px;font-size:0.8rem}
.plan.featured{transform:scale(1.03);box-shadow:0 18px 40px rgba(16,24,40,0.08)}
/* Pricing comparison table */
.pricing-comparison{background:var(--card);padding:1rem;border-radius:12px;box-shadow:0 10px 30px rgba(10,18,30,0.2)}
.pricing-comparison .muted{color:var(--muted);font-size:0.95rem;margin-bottom:0.75rem}
.table-wrap{overflow:auto}
.pricing-table{width:100%;border-collapse:collapse;/* min-width:760px */}
.pricing-table th,.pricing-table td{padding:0.7rem 0.9rem;border-bottom:1px solid rgba(20,24,40,0.06);text-align:left}
.pricing-table td:nth-child(1) {border-bottom: 1px solid rgba(20,24,40,0.06);}
.pricing-table thead th{background:linear-gradient(90deg,#f4f4fe,#fff);position:sticky;top:0}
.pricing-table .plan-name{text-align:center}
.price-small{display:block;font-size:0.95rem;color:var(--accent);font-weight:800}
.featured-plan{background:linear-gradient(180deg,rgba(0,184,148,0.06),transparent)}
.pricing-table td.yes{text-align:center;color:var(--accent);font-weight:700}
.pricing-table td.no{text-align:center;color:#bbb}

.pricing-table td {border-color: #fff;}
.pricing-table td.basic {background: #c088e7; color: #fff; /* background-image: linear-gradient(to bottom right, #f3f3f3, #ffffff); */}
.pricing-table td.advance {background: #9d44da; color: #fff; /* background-image: linear-gradient(to bottom right, #dfbbf7, #ffffff); */}

@media (max-width:900px){
  /* .pricing-table{min-width:600px} */
}
@media (max-width:520px){
  /* .pricing-table{min-width:480px} */
}

/* Why */
.why-grid{display:flex;gap:1rem}
.why-item{background:var(--accent); color: #fff; padding:1rem;border-radius:10px}

/* Reviews */
.reviews {background: #e6c9f9;}
.reviews .stars {color: #ddb012;}
.reviews-row{display:flex;gap:1rem;align-items:flex-start}
.rating{width:180px;background:linear-gradient(180deg,#fff,#fbfbff);padding:1rem;border-radius:8px;text-align:center}
.review-cards{flex:1;display:flex;flex-direction:column;gap:0.6rem}
.review{background:var(--card);padding:0.9rem;border-radius:8px}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 320px;gap:1rem}
.contact-form{background:var(--card);padding:1rem;border-radius:8px}
.contact-form .field {margin-bottom: 20px;}
.contact-form label{display:block;margin-bottom:0.6rem;color:#222}
.contact-form input,.contact-form textarea{width:100%;padding:0.5rem;border-radius:6px;border:1px solid #e6e9ef;margin-top:0.25rem}
.form-actions{display:flex;gap:0.6rem;margin-top:0.6rem}
.form-actions .btn {background: var(--accent); color: #fff; cursor: pointer;}
.contact-info{background:var(--card);padding:1rem;border-radius:8px}
.map-placeholder{height:120px;background:linear-gradient(90deg,#f0f4ff,#fff);border-radius:8px;margin-top:0.6rem;display:flex;align-items:center;justify-content:center;color:var(--muted)}

/* Footer */
.site-footer{background:#f3f3f3;padding:1rem 0;border-top:1px solid rgba(20,20,40,0.04)}
.footer-inner{display:flex;justify-content:space-between;align-items:center}

/* Social Media */
.socialMedia {position: fixed; top: 50%; transform: translateY(-50%); right: 0px; display: block; padding: 0; background: var(--accent); color: #fff; font-size: 16px; text-decoration: none; border-radius: 4px; z-index: 100;}
.socialMedia a {display: block; padding: 12px 20px; color: #fff; font-size: 16px; text-decoration: none; border-radius: 4px;}

/* Popup Form */
.popForm {position: fixed; top: 0; left: 0; background: rgba(0,0,0,.5); width: 100%; height: 100%; z-index: 250; display: none;}
.popForm .popFormInner {position: absolute; top: 50%; left: 50%; background: #fff; transform: translate(-50%, -50%); padding: 24px; border-radius: 12px; width: 80%; max-width: 300px;}
.popForm .popFormInner .close {position: absolute; top: 0; right: 0; background: #fff; line-height: 40px; width: 40px; text-align: center; cursor: pointer;}
.popForm .formWrap p {font-size: 16px; margin-bottom: 4px; color: #000;}
.popForm .formWrap .field, .popForm .formWrap .submit  {display: block; margin-bottom: 12px;  color: #000; position: relative;}
.popForm .formWrap .field input[type=text], .popForm .formWrap .field input[type=tel] {color: #000; background: none; border: 0; outline: 0; padding: 12px 8px 12px 44px; width: 100%; border: 1px solid #000; border-radius: 4px;}
.popForm .formWrap .field input[type=text]::placeholder, .popForm .formWrap .field input[type=tel]::placeholder {color: #000;}
.popForm .formWrap .submit input[type=submit] {color: #000; background: none; border: 0; outline: 0; padding: 12px 8px 12px 8px; border: 1px solid #000; border-radius: 4px; cursor: pointer; width: 100%;}
.popForm .formWrap .submit input[type=submit]:hover {background: #000; color: #fff;}
.popForm .formWrap .field i {position: absolute; top: 50%; left: 14px; transform: translateY(-50%); color: #000;}
.popForm.active {display: block;}

.formMess {display: block; margin-bottom: 4px; font-size: 12px; font-weight: 500; transition: all ease-in-out .2s;}
.processing .formMess {color: blue;}
.formMess.success {color: green;}
.formMess.error {color: red;}

/* Responsive */
@media (max-width:900px){
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .pricing-grid{grid-template-columns:1fr}
  .about-grid{flex-direction:column}
  .hero-inner{flex-direction:column}
  .hero-card, .hero-text{width:100%}
  .nav-toggle{display:inline-block}
  .main-nav{display:none;position:absolute;top:86px;left:0;right:0;background:#fff;padding:1rem;flex-direction:column; width: 100%; margin: 0;}
  .about-media {width: 100%;}
  .pricing-table {font-size: 12px;}
}
@media (max-width:520px){
  .features-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .main-nav a {display: block; border-bottom: 1px solid #f3f3f3;}
  .main-nav a:last-child {border-bottom: 0;}
}

/* Animations */
.animate-fade-up{opacity:0;transform:translateY(12px);transition:all 0.6s ease-out}
.animate-fade-right{opacity:0;transform:translateX(-20px);transition:all 0.6s ease-out}
.animate-fade-left{opacity:0;transform:translateX(20px);transition:all 0.6s ease-out}
.animate-zoom{opacity:0;transform:scale(0.96);transition:all 0.6s cubic-bezier(.2,.9,.3,1)}
.animate-pop{opacity:0;transform:translateY(8px) scale(0.99);transition:all 0.5s ease-out}
.animate-slide{opacity:0;transform:translateX(-10px);transition:all 0.6s ease-out}
.delay-1{transition-delay:0.12s}
.delay-2{transition-delay:0.22s}
.delay-3{transition-delay:0.32s}
.animate-float{animation:float 6s ease-in-out infinite}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}

/* Utility */
.hidden{display:none}

/* Small tweaks */
strong{color:#111}