/* ===========================================================
   Shronix XSender — Premium frontend upgrade
   Additive layer over the base theme. Brand: gold -> red.
   =========================================================== */
:root{
  --xg1:#ffc233;      /* gold light */
  --xg2:#fca521;      /* gold */
  --xr:#e34124;       /* red */
  --xgrad:linear-gradient(135deg,#ffc233 0%,#fca521 45%,#e34124 100%);
  --xgrad-soft:linear-gradient(135deg,rgba(252,165,33,.12),rgba(227,65,36,.12));
  --xink:#17233b;
  --xmut:#5a6b85;
  --xshadow:0 18px 45px -18px rgba(227,65,36,.45);
}

/* ---------- Global polish ---------- */
body{ scroll-behavior:smooth; }
section{ position:relative; }

/* Section titles: gradient accent + animated underline */
.section-title h3{
  font-weight:800; letter-spacing:-.5px; color:var(--xink);
  position:relative; display:inline-block;
}
.section-title h3::after{
  content:""; display:block; width:64px; height:4px; margin:14px auto 0;
  background:var(--xgrad); border-radius:6px;
}
.section-title p{ color:var(--xmut); }

/* ---------- Buttons ---------- */
.btn--primary{
  background:var(--xgrad)!important; border:0!important;
  box-shadow:var(--xshadow); transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn--primary:hover{ transform:translateY(-3px); filter:brightness(1.05);
  box-shadow:0 24px 55px -16px rgba(227,65,36,.6)!important; }
.btn--primary-outline{
  border:2px solid var(--xg2)!important; color:var(--xr)!important; transition:all .25s ease;
}
.btn--primary-outline:hover{ background:var(--xgrad)!important; color:#fff!important; border-color:transparent!important; }

/* ---------- Hero ---------- */
.banner{ position:relative; }
.banner::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 55% at 85% 15%,rgba(252,165,33,.16),transparent 60%),
             radial-gradient(50% 50% at 8% 90%,rgba(227,65,36,.12),transparent 60%);
}
.banner .container{ position:relative; z-index:1; }
.banner-left h1{
  font-weight:900; letter-spacing:-1px; line-height:1.08;
}
.banner-left h1 span, .banner-left h1 b{
  background:var(--xgrad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.banner_img img{ animation:xfloat 6s ease-in-out infinite; filter:drop-shadow(0 30px 50px rgba(227,65,36,.18)); }
@keyframes xfloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }

/* ---------- Feature cards ---------- */
.feature-item{
  background:#fff; border:1px solid #eef1f6!important;
  box-shadow:0 10px 30px -18px rgba(23,35,59,.25);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position:relative; overflow:hidden;
}
.feature-item::before{
  content:""; position:absolute; left:0; top:0; height:4px; width:100%;
  background:var(--xgrad); transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.feature-item:hover{ transform:translateY(-8px); border-color:transparent!important;
  box-shadow:0 26px 50px -22px rgba(227,65,36,.45); }
.feature-item:hover::before{ transform:scaleX(1); }
.feature-icon{
  display:inline-grid; place-items:center; width:60px; height:60px; border-radius:16px;
  background:var(--xgrad-soft); color:var(--xr); font-size:26px;
}
.feature-icon svg,.feature-icon i{ color:var(--xr); }

/* ---------- Pricing ---------- */
.pricing-item,.price-card,.pricing_item{ transition:transform .3s ease, box-shadow .3s ease; }
.pricing-item:hover,.price-card:hover,.pricing_item:hover{ transform:translateY(-8px);
  box-shadow:0 26px 55px -24px rgba(227,65,36,.4); }

/* ===========================================================
   AI Auto-Reply showcase section
   =========================================================== */
.xai{
  padding:100px 0; position:relative; overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,#fff7ef 55%,#ffffff 100%);
}
.xai::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(45% 40% at 12% 20%,rgba(252,165,33,.14),transparent 60%),
             radial-gradient(45% 45% at 90% 85%,rgba(227,65,36,.12),transparent 60%);
}
.xai .container{ position:relative; z-index:1; }
.xai-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13px;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--xr);
  background:var(--xgrad-soft); padding:7px 16px; border-radius:100px; margin-bottom:18px;
}
.xai-eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--xgrad); box-shadow:0 0 0 4px rgba(252,165,33,.2); }
.xai h2{
  font-weight:900; letter-spacing:-1px; color:var(--xink); font-size:clamp(28px,4vw,46px); line-height:1.1;
}
.xai h2 span{ background:var(--xgrad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.xai .xai-lead{ color:var(--xmut); font-size:18px; max-width:560px; margin-top:14px; }

.xai-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:34px; }
@media(max-width:575px){ .xai-grid{ grid-template-columns:1fr; } }
.xai-card{
  background:#fff; border:1px solid #eef1f6; border-radius:18px; padding:22px;
  box-shadow:0 12px 34px -20px rgba(23,35,59,.28);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.xai-card:hover{ transform:translateY(-6px); border-color:transparent;
  box-shadow:0 24px 48px -22px rgba(227,65,36,.42); }
.xai-ic{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:var(--xgrad); color:#fff; font-size:24px; box-shadow:var(--xshadow); margin-bottom:14px;
}
.xai-card h5{ font-weight:800; color:var(--xink); margin:0 0 6px; font-size:17px; }
.xai-card p{ color:var(--xmut); margin:0; font-size:14.5px; line-height:1.55; }

/* Phone / chat mockup */
.xai-phone-wrap{ display:grid; place-items:center; }
.xai-phone{
  width:320px; max-width:100%; background:#0b141a; border-radius:38px; padding:12px;
  box-shadow:0 40px 80px -30px rgba(23,35,59,.55), 0 0 0 2px rgba(255,255,255,.06) inset;
  animation:xfloat 7s ease-in-out infinite;
}
.xai-screen{ background:#e6ddd4; border-radius:28px; overflow:hidden; }
.xai-bar{
  background:var(--xgrad); color:#fff; padding:14px 16px; display:flex; align-items:center; gap:10px;
}
.xai-bar .av{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.22);
  display:grid; place-items:center; font-size:18px; }
.xai-bar b{ display:block; font-size:15px; line-height:1.1; }
.xai-bar small{ opacity:.9; font-size:11.5px; }
.xai-chat{ padding:16px 14px; min-height:280px; background:
  linear-gradient(180deg,rgba(230,221,212,.6),rgba(230,221,212,.6)); }
.xai-msg{ max-width:80%; padding:9px 12px; border-radius:14px; font-size:13.5px; line-height:1.45;
  margin-bottom:10px; position:relative; box-shadow:0 1px 1px rgba(0,0,0,.08); }
.xai-in{ background:#fff; color:#1f2c33; border-top-left-radius:4px; }
.xai-out{ background:#d9fdd3; color:#1f2c33; margin-left:auto; border-top-right-radius:4px; }
.xai-time{ font-size:10px; color:#667; display:block; text-align:right; margin-top:3px; }
.xai-tick{ color:#53bdeb; font-weight:700; }
.xai-typing{ display:inline-flex; gap:4px; align-items:center; background:#fff; padding:11px 14px;
  border-radius:14px; border-top-left-radius:4px; box-shadow:0 1px 1px rgba(0,0,0,.08); }
.xai-typing i{ width:7px; height:7px; border-radius:50%; background:#9aa6ae; display:inline-block;
  animation:xblink 1.2s infinite; }
.xai-typing i:nth-child(2){ animation-delay:.2s } .xai-typing i:nth-child(3){ animation-delay:.4s }
@keyframes xblink{ 0%,60%,100%{opacity:.3; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)} }

/* ===========================================================
   About section (.grow) — premium
   =========================================================== */
.grow{ position:relative; }
.grow::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(40% 40% at 95% 10%,rgba(252,165,33,.10),transparent 60%);
}
.grow .container{ position:relative; z-index:1; }
.grow .section-title span{
  display:inline-block; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--xr); background:var(--xgrad-soft); padding:6px 15px; border-radius:100px;
  font-size:12.5px; margin-bottom:14px;
}
.grow .section-title h3{ font-weight:800; letter-spacing:-.5px; color:var(--xink); }
.grow .section-title h3::after{ margin-left:0; margin-right:auto; }
.grow-card{
  background:#fff; border:1px solid #eef1f6; border-radius:16px; padding:15px 18px;
  box-shadow:0 10px 28px -20px rgba(23,35,59,.28); margin-bottom:14px;
  display:flex; gap:14px; align-items:flex-start;
  transition:transform .3s ease, box-shadow .3s ease;
}
.grow-card:hover{ transform:translateX(6px); box-shadow:0 18px 40px -22px rgba(227,65,36,.4); }
.grow-card .icon-avaters{
  flex:0 0 auto; width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--xgrad); color:#fff; font-size:17px; box-shadow:var(--xshadow);
}
.grow-card-content h5{ font-weight:700; color:var(--xink); margin:0 0 2px; font-size:16px; }
.grow-card-content p{ color:var(--xmut); margin:0; font-size:14px; }
.grow-img img{
  border-radius:22px; box-shadow:0 34px 66px -30px rgba(23,35,59,.5);
  border:1px solid rgba(252,165,33,.28);
}

/* ===========================================================
   CTA / Why-choose band (.choose-card) — premium
   =========================================================== */
.choose-card{
  background:#fff; border:1px solid #eef1f6; border-radius:18px; padding:28px 22px; text-align:center;
  box-shadow:0 14px 34px -22px rgba(23,35,59,.3);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position:relative; overflow:hidden;
}
.choose-card::after{
  content:""; position:absolute; left:0; bottom:0; height:4px; width:100%;
  background:var(--xgrad); transform:scaleX(0); transform-origin:right; transition:transform .35s ease;
}
.choose-card:hover{ transform:translateY(-8px); border-color:transparent;
  box-shadow:0 26px 52px -24px rgba(227,65,36,.45); }
.choose-card:hover::after{ transform:scaleX(1); transform-origin:left; }
.choose-card .icon{
  width:84px; height:84px; margin:0 auto 16px; border-radius:22px; display:grid; place-items:center;
  background:var(--xgrad-soft); transition:transform .3s ease;
}
.choose-card:hover .icon{ transform:scale(1.06) rotate(-3deg); }
.choose-card .icon img{ width:48px; height:48px; object-fit:contain; }
.choose-card h4{ font-weight:800; color:var(--xink); font-size:18px; margin-top:4px; }
.choose-card p{ color:var(--xmut); font-size:14px; }
.choose-middel-test .model-img img{
  border-radius:22px; box-shadow:0 34px 64px -28px rgba(227,65,36,.4);
}

/* ===========================================================
   Footer — premium dark band
   =========================================================== */
.footer{
  background:linear-gradient(180deg,#141f36 0%,#0d1526 100%)!important;
  position:relative; padding-top:72px; color:#c3ccdb;
}
.footer::before{ content:""; position:absolute; top:0; left:0; width:100%; height:4px; background:var(--xgrad); }
.footer .footer-info p{ color:#9fb0c9; }
.footer .footer-log img{ max-height:48px; width:auto; }
.footer .footer-menu-title{ color:#fff; font-weight:700; position:relative; padding-bottom:10px; }
.footer .footer-menu-title::after{ content:""; position:absolute; left:0; bottom:0; width:34px; height:3px; background:var(--xgrad); border-radius:4px; }
.footer .footer-menu{ color:#a9b6cc!important; transition:color .25s ease, padding-left .25s ease; }
.footer .footer-menu:hover{ color:#fff!important; padding-left:6px; }
.footer .footer-social{
  width:42px; height:42px; border-radius:12px; display:inline-grid!important; place-items:center;
  background:rgba(255,255,255,.08); color:#fff!important; transition:all .28s ease; font-size:17px;
}
.footer .footer-social:hover{ background:var(--xgrad); transform:translateY(-4px); box-shadow:var(--xshadow); }
.footer .footer-social svg{ fill:currentColor; width:18px; height:18px; }
.footer .footer-bottom{ border-top:1px solid rgba(255,255,255,.09); margin-top:42px; padding:22px 0; }
.footer .copyright p{ color:#8798b4; margin:0; }
.footer .go-to-dashboard-link{ color:#fff!important; }
.footer .go-to-dashboard-link i{ color:var(--xg2); }

/* ===========================================================
   Testimonials section (.xt)
   =========================================================== */
.xt{ padding:100px 0; position:relative; overflow:hidden;
  background:linear-gradient(180deg,#ffffff 0%,#fff7ef 55%,#ffffff 100%); }
.xt::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(40% 40% at 8% 15%,rgba(252,165,33,.12),transparent 60%),
            radial-gradient(40% 42% at 92% 90%,rgba(227,65,36,.10),transparent 60%); }
.xt .container{ position:relative; z-index:1; }
.xt-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13px;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--xr);
  background:var(--xgrad-soft); padding:7px 16px; border-radius:100px; margin-bottom:16px; }
.xt .section-title h3 span{ background:var(--xgrad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.xt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; }
@media(max-width:991px){ .xt-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:640px){ .xt-grid{ grid-template-columns:1fr; } }
.xt-card{ background:#fff; border:1px solid #eef1f6; border-radius:20px; padding:28px 26px;
  box-shadow:0 14px 36px -22px rgba(23,35,59,.3); position:relative; overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.xt-card:hover{ transform:translateY(-8px); border-color:transparent;
  box-shadow:0 28px 54px -24px rgba(227,65,36,.42); }
.xt-quotemark{ position:absolute; top:10px; right:20px; font-size:80px; line-height:1; font-family:Georgia,serif;
  background:var(--xgrad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; opacity:.18; }
.xt-stars{ color:#fca521; letter-spacing:3px; font-size:16px; margin-bottom:12px; }
.xt-quote{ color:#2b3a55; font-size:15px; line-height:1.65; margin:0 0 20px; position:relative; z-index:1; }
.xt-user{ display:flex; align-items:center; gap:13px; padding-top:16px; border-top:1px solid #eef1f6; }
.xt-av{ width:48px; height:48px; border-radius:50%; background:var(--xgrad); color:#fff; font-weight:800;
  display:grid; place-items:center; font-size:19px; box-shadow:var(--xshadow); flex:0 0 auto; }
.xt-user b{ display:block; color:var(--xink); font-size:15.5px; line-height:1.2; }
.xt-user small{ color:var(--xmut); font-size:13px; }