/* ==========================================================================
   GoTech Digi - Service Hub  |  static build
   Palette taken 1:1 from submit.gotechdigi.com
   ========================================================================== */

:root{
  --black:#000000;
  --black-2:#040404;
  --gold:#FDC31B;
  --orange:#F5A408;
  --white:#FFFFFF;
  --counter-title:#FFE700;
  --muted:#C3C3C3;
  --grad:linear-gradient(180deg,#E2AD10 0%,#f2295b 100%);
  --wa-green:#25D366;
  --call-green:#269041;
  --container:1140px;
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;margin:0;padding:0;}

h1,h2,h3,h4{
  font-family:'Poppins',sans-serif;
  line-height:1.3em;
  margin:0;
  font-weight:600;
}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 15px;
}

.section{padding:35px 0;}
.section--tight{padding:20px 0;}
.section--flush{padding:0 0 20px;}

/* --------------------------------------------------------------------------
   Headings
   -------------------------------------------------------------------------- */
.title{
  text-align:center;
  font-size:40px;
  color:var(--gold);
  text-shadow:0 0 10px rgba(98,98,98,.3);
}
.title--xl{font-size:43px;}
.title--white{color:var(--white);}

.lead{
  text-align:center;
  color:var(--white);
  max-width:820px;
  margin:18px auto 0;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-block;
  background-image:var(--grad);
  color:var(--white);
  font-size:23px;
  font-weight:500;
  line-height:1.1em;
  letter-spacing:.4px;
  padding:16px 32px;
  border:0;
  border-radius:4px;
  cursor:pointer;
  text-align:center;
  animation:pulse 2s infinite;
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
}
.btn:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 12px 30px rgba(242,41,91,.35);
  filter:brightness(1.06);
}
.btn-center{text-align:center;}

.btn-ghost{
  display:inline-block;
  font-size:13px;
  font-weight:600;
  color:#000;
  background:transparent;
  border:3px solid #000;
  border-radius:5px;
  padding:9px 20px;
  transition:background .25s ease,color .25s ease;
}
.btn-ghost:hover{background:#000;color:var(--orange);}

@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(242,41,91,.45);}
  70%{box-shadow:0 0 0 14px rgba(242,41,91,0);}
  100%{box-shadow:0 0 0 0 rgba(242,41,91,0);}
}

/* --------------------------------------------------------------------------
   Top bar (sticky)
   -------------------------------------------------------------------------- */
.topbar{
  background:var(--orange);
  position:sticky;
  top:0;
  z-index:999;
  padding:10px 0;
}
.topbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.topbar__title{
  font-size:29px;
  font-weight:400;
  text-transform:uppercase;
  color:#000;
  margin:0;
  flex:1 1 auto;
  text-align:left;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero{background:var(--black);padding:40px 0 30px;}
.hero__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  align-items:flex-start;
}
.hero__heading{
  font-size:40px;
  color:var(--gold);
  text-shadow:0 0 10px rgba(98,98,98,.3);
}
.hero__text{
  text-align:center;
  color:var(--white);
  margin:20px 0;
}

.check-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:5px 0;
  color:var(--white);
}
.check-list .ico{color:var(--gold);flex:0 0 auto;line-height:1.7;}
.check-list--white .ico{color:var(--white);}

.hero__cta{margin-top:26px;text-align:center;}

.hero__formtitle{
  text-align:center;
  font-size:19px;
  font-weight:600;
  color:var(--white);
  margin:0 0 18px;
  line-height:1.5;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(253,195,27,.25);
  border-radius:10px;
  padding:22px;
}
/* honeypot: hidden from people, filled by spam bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.form-field{margin-bottom:14px;}
.form-field input,
.form-field textarea{
  width:100%;
  font-family:inherit;
  font-size:15px;
  color:#333;
  background:#fff;
  border:1px solid #cfcfcf;
  border-radius:4px;
  padding:11px 13px;
  outline:none;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.form-field textarea{min-height:110px;resize:vertical;}
.form-field input:focus,
.form-field textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(253,195,27,.25);
}
.form-submit{
  display:inline-block;
  background-image:var(--grad);
  color:#fff;
  font-family:inherit;
  font-size:17px;
  font-weight:600;
  border:0;
  border-radius:4px;
  padding:12px 34px;
  cursor:pointer;
  transition:transform .2s ease,filter .2s ease;
}
.form-submit:hover{transform:translateY(-2px);filter:brightness(1.07);}

/* --------------------------------------------------------------------------
   Two column split (Discuss your idea)
   -------------------------------------------------------------------------- */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:center;
}
.split h2{text-align:center;font-size:40px;color:var(--white);}
.split p{text-align:center;color:var(--white);margin:12px 0 0;}
.split__right{text-align:center;}

/* --------------------------------------------------------------------------
   Trust / rating row
   -------------------------------------------------------------------------- */
.trust{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:center;
}
.trust__badge img{margin:0 auto;max-width:430px;}
.trust__list{text-align:center;margin-top:40px;}
.trust__list li{color:var(--white);padding:5px 0;}
.stars{
  text-align:center;
  font-size:30px;
  letter-spacing:9px;
  color:var(--gold);
  margin-top:12px;
}

/* --------------------------------------------------------------------------
   Work showcase grid
   -------------------------------------------------------------------------- */
.grid-3{
  display:grid;
  /* minmax(0,1fr), not 1fr: a wide child must not push its column past a third
     of the row (a landscape testimonial otherwise squeezes its neighbours) */
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.grid-2{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.work img{
  border-radius:6px;
  width:100%;
  transition:transform .35s ease,box-shadow .35s ease;
}
.work a:hover img{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 18px 40px rgba(253,195,27,.18);
}

/* --------------------------------------------------------------------------
   How it works
   -------------------------------------------------------------------------- */
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
.step{text-align:center;}
.step h3{font-size:24px;color:var(--white);}
.step p{color:var(--white);margin:14px 0 0;}

/* --------------------------------------------------------------------------
   Counters
   -------------------------------------------------------------------------- */
.counters{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.counter{text-align:left;}
.counter__title{color:var(--counter-title);font-size:19px;}
.counter__num{
  color:var(--white);
  font-size:69px;
  font-weight:600;
  line-height:1.2;
}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */
.pricing{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.plan{
  margin:10px;
  padding:26px 22px;
  border:1px solid rgba(253,195,27,.35);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(253,195,27,.06) 0%,rgba(0,0,0,0) 60%);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.plan:hover{
  transform:translateY(-8px);
  border-color:var(--gold);
  box-shadow:0 20px 45px rgba(253,195,27,.18);
}
.plan__head{
  text-align:center;
  font-size:25px;
  color:var(--gold);
  text-shadow:0 0 10px rgba(98,98,98,.3);
  margin-bottom:20px;
}
.plan__price{display:block;}

/* --------------------------------------------------------------------------
   Video showcase
   -------------------------------------------------------------------------- */
.reels{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
}
.reels video{width:100%;border-radius:8px;background:#111;aspect-ratio:9/16;object-fit:cover;}
.wide-vids video{width:100%;border-radius:8px;background:#111;aspect-ratio:16/9;object-fit:cover;}

.only-mobile{display:none;}
.only-desktop{display:block;}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
/* bottom-aligned so the names sit on one line even when a tile is shorter */
.tcol{
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.tcol__name{font-size:20px;color:var(--gold);margin-top:14px;}
/* The testimonials were shot on phones, so they are a mix of landscape and
   portrait. Each tile carries its own aspect-ratio inline (see index.html) so
   nothing is cropped or letterboxed; 16/9 below is only the fallback. */
.embed{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:8px;
  overflow:hidden;
  background:#111;
  margin:0 auto;
}
/* Every testimonial tile is the same box, whatever shape the clip was shot in.
   The clip is contained inside it (never cropped), so a portrait phone video
   just sits letterboxed in the middle. */
.tcol .embed{
  width:100%;
  height:380px;
}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.embed__video{
  position:absolute;inset:0;
  width:100%;height:100%;
  /* fill the tile so every testimonial reads the same size; biased upward
     because the speaker's face sits in the top half of a phone-shot clip */
  object-fit:cover;
  object-position:center 25%;
  display:block;
  background:#000;
}
.embed__play{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:68px;height:48px;
  border:0;
  padding:0;
  cursor:pointer;
  border-radius:14px;
  background:#212121cc;
  transition:background .2s ease,transform .2s ease,opacity .2s ease;
}
.embed__play::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  transform:translate(-40%,-50%);
  border-style:solid;
  border-width:11px 0 11px 19px;
  border-color:transparent transparent transparent #fff;
}
.embed:hover .embed__play,
.embed__play:focus-visible{
  background:#f00;
  transform:translate(-50%,-50%) scale(1.06);
}
.embed__play[hidden]{display:none;}

.tcard{
  background:var(--black);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  padding:22px;
  text-align:center;
  height:100%;
  transition:transform .3s ease,border-color .3s ease;
}
.tcard:hover{transform:translateY(-6px);border-color:var(--gold);}
.tcard__quote{color:var(--white);}
.tcard__meta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:18px;
  text-align:left;
}
.tcard__meta img{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:0 0 auto;}
.tcard__name{color:var(--gold);font-weight:600;}
.tcard__job{color:var(--gold);font-size:14px;}

/* --------------------------------------------------------------------------
   Discount strip + bottom form
   -------------------------------------------------------------------------- */
.hurry{
  text-align:center;
  font-size:26px;
  font-weight:600;
  color:var(--gold);
  line-height:1.5;
}
.bottom-form{max-width:560px;margin:0 auto;}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer{background:var(--black);padding-top:40px;}
.footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:30px;
}
.footer-grid h4{
  font-size:20px;
  color:var(--muted);
  text-shadow:0 0 10px rgba(0,0,0,.3);
  margin-bottom:16px;
}
.footer-grid p{color:var(--muted);font-size:14px;margin:0 0 10px;}

.f-list li{
  color:var(--muted);
  font-size:14px;
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:6px 0;
  border-bottom:1px solid rgba(195,195,195,.35);
}
.f-list li:last-child{border-bottom:0;}
.f-list a{display:flex;align-items:flex-start;gap:9px;transition:color .25s ease;}
.f-list a:hover{color:#1F50E6;}
.f-list .ico{flex:0 0 auto;}

.footer-banner{padding:24px 0;}
.footer-banner img{width:100%;border-radius:4px;}

.copyright{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:30px 0;
  font-size:13px;
  color:var(--muted);
}

/* --------------------------------------------------------------------------
   Floating buttons
   -------------------------------------------------------------------------- */
.float-call{
  position:fixed;
  left:20px;
  bottom:20px;
  width:60px;
  height:60px;
  border-radius:50%;
  background:var(--call-green);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
  transition:transform .25s ease;
}
.float-call:hover{transform:scale(1.08);}
.float-call svg{width:30px;height:30px;fill:#fff;}

.float-wa{
  position:fixed;
  right:10px;
  bottom:10px;
  z-index:9999;
  display:flex;
  align-items:center;
  gap:0;
}
.float-wa__label{
  background:var(--wa-green);
  color:#fff;
  border-radius:10px;
  padding:0 16px;
  line-height:1.6;
  margin:0 10px;
  font-size:14px;
  white-space:nowrap;
}
.float-wa svg{width:50px;height:50px;display:block;}

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;}
.reveal.is-visible{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .btn{animation:none;}
  html{scroll-behavior:auto;}
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .title,.split h2,.hero__heading{font-size:32px;}
  .title--xl{font-size:34px;}
  .counter__num{font-size:52px;}
  .counters{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:767px){
  .topbar__title{font-size:18px;text-align:center;}
  .topbar .container{justify-content:center;}

  .hero__grid,.split,.trust{grid-template-columns:1fr;}
  .title,.split h2,.hero__heading{font-size:24px;}
  .title--xl{font-size:26px;}

  .grid-3,.grid-2,.steps,.pricing{grid-template-columns:1fr;}
  .counters{grid-template-columns:repeat(2,1fr);}
  .counter{text-align:center;}
  .counter__num{font-size:44px;}

  .only-mobile{display:block;}
  .only-desktop{display:none;}
  .reels{grid-template-columns:repeat(2,1fr);}

  .footer-grid{grid-template-columns:1fr;}
  .copyright{justify-content:center;text-align:center;}
  .plan{margin:0;}
  .hurry{font-size:22px;}
  .btn{font-size:19px;padding:14px 24px;}
  .tcard__meta{flex-direction:column;text-align:center;}
  /* same uniform tile on phones, just shorter */
  .tcol .embed{width:100%;max-width:330px;height:340px;}
  .float-wa__label{display:none;}
}