:root{
  --blue:#1677ff;
  --cyan:#03b9ff;
  --dark:#04101d;
  --dark2:#071a30;
  --ink:#0b1729;
  --text:#35475c;
  --muted:#6b7d91;
  --line:#e3eaf1;
  --soft:#f4f7fa;
  --green:#13b981;
  --white:#fff;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{text-decoration:none;color:inherit}

button,input,textarea,select{
  font:inherit;
}

.wrap{
  width:min(1200px,92%);
  margin:auto;
}


/* TOP */

.topbar{
  color:#91a6bb;
  background:#020b14;
}

.topbar-inner{
  min-height:34px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
}

.topbar-inner div{
  display:flex;
  gap:20px;
}


/* HEADER */

.header{
  position:sticky;
  z-index:70;
  top:0;
  color:#fff;
  background:rgba(5,18,33,.96);
  border-bottom:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(15px);
}

.header-inner{
  min-height:76px;
  display:flex;
  align-items:center;
  gap:35px;
}

.logo img{
  display:block;
  max-width:185px;
  height:43px;
  object-fit:contain;
}

.header nav{
  display:flex;
  margin-left:auto;
  gap:5px;
}

.header nav a{
  padding:11px;
  border-radius:9px;
  color:#c0d0df;
  font-size:11px;
  font-weight:700;
}

.header nav a:hover,
.header nav a.active{
  color:#fff;
  background:rgba(255,255,255,.07);
}


/* BUTTON */

.button{
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:0 20px;
  border:0;
  border-radius:12px;
  cursor:pointer;
  font-size:12px;
  font-weight:800;
}

.button.small{
  min-height:41px;
  padding:0 15px;
}

.button.primary{
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  box-shadow:0 10px 30px rgba(22,119,255,.2);
}

.button.ghost{
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);
}

.button.white{
  color:#092039;
  background:#fff;
}


/* HERO */

.support-hero{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:linear-gradient(135deg,#04101d,#082440);
}

.hero-grid{
  position:absolute;
  inset:0;
  opacity:.13;
  background-image:
    linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:70px 70px;
}

.hero-glow{
  position:absolute;
  width:650px;
  height:650px;
  right:-100px;
  top:-300px;
  border-radius:50%;
  background:rgba(7,165,255,.2);
  filter:blur(110px);
}

.support-hero-inner{
  position:relative;
  min-height:600px;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  align-items:center;
  gap:90px;
  padding:80px 0;
}

.eyebrow{
  display:block;
  margin-bottom:15px;
  color:#57c8ff;
  font-size:9px;
  font-weight:900;
  letter-spacing:.15em;
}

.support-hero h1,
.contact-hero h1{
  margin:0;
  max-width:700px;
  font-size:clamp(47px,5.5vw,75px);
  line-height:.98;
  letter-spacing:-.065em;
}

.support-hero h1 em,
.contact-hero h1 em{
  display:block;
  color:#60ccff;
  font-style:normal;
}

.support-hero-inner > div:first-child > p{
  max-width:670px;
  color:#a4b9cd;
  line-height:1.75;
}

.hero-buttons{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:30px;
}


/* STATUS */

.support-status{
  padding:25px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:23px;
  background:rgba(255,255,255,.045);
  box-shadow:0 30px 70px rgba(0,0,0,.25);
}

.status-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#8ca3b9;
  font-size:9px;
}

.status-head strong{
  color:#66dcb4;
}

.status-head strong i{
  width:7px;
  height:7px;
  display:inline-block;
  margin-right:5px;
  border-radius:50%;
  background:#2bd29c;
}

.status-main{
  padding:50px 0;
  text-align:center;
}

.status-icon{
  width:67px;
  height:67px;
  display:grid;
  place-items:center;
  margin:0 auto 17px;
  border-radius:18px;
  color:#5ed0ff;
  background:rgba(33,152,255,.13);
  font-size:25px;
}

.status-main h3{
  margin:0 0 7px;
  font-size:22px;
}

.status-main p{
  margin:0;
  color:#7891a8;
  font-size:9px;
}

.status-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.status-options > div{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  background:rgba(255,255,255,.03);
}

.status-options i{
  color:#55c9ff;
}

.status-options strong,
.status-options small{
  display:block;
}

.status-options strong{
  font-size:9px;
}

.status-options small{
  color:#718ba3;
  font-size:7px;
}


/* SECTIONS */

.section{
  padding:100px 0;
}

.soft-section{
  background:var(--soft);
}

.section-title{
  max-width:700px;
  margin-bottom:43px;
}

.section-title.centered{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.section-title > span{
  display:block;
  margin-bottom:13px;
  color:var(--blue);
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
}

.section-title h2,
.contact-layout h2,
.form-intro h2{
  margin:0;
  font-size:clamp(36px,4vw,52px);
  line-height:1.04;
  letter-spacing:-.055em;
}

.section-title p,
.contact-layout > div > p,
.form-intro > p{
  color:var(--muted);
  line-height:1.75;
}


/* CHANNELS */

.channel-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.channel-card{
  min-height:340px;
  display:flex;
  flex-direction:column;
  padding:25px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  transition:.25s ease;
}

.channel-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 50px rgba(5,24,45,.09);
}

.channel-card.featured{
  color:#fff;
  border-color:#0e67de;
  background:linear-gradient(145deg,#0c62d4,#138cf0);
}

.channel-icon{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  margin-bottom:45px;
  border-radius:14px;
  color:var(--blue);
  background:#edf6ff;
  font-size:18px;
}

.channel-icon.whatsapp{
  color:#0aa873;
  background:#eafbf5;
}

.channel-card.featured .channel-icon{
  color:#fff;
  background:rgba(255,255,255,.14);
}

.channel-card > span{
  color:#8ca0b3;
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
}

.channel-card.featured > span{
  color:#b7d8ff;
}

.channel-card h3{
  margin:9px 0 10px;
  font-size:20px;
}

.channel-card p{
  margin:0;
  color:var(--muted);
  font-size:11px;
  line-height:1.7;
}

.channel-card.featured p{
  color:#cae1fa;
}

.channel-card b{
  margin-top:auto;
  padding-top:25px;
  color:var(--blue);
  font-size:10px;
}

.channel-card.featured b{
  color:#fff;
}


/* PROBLEMS */

.problem-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:11px;
}

.problem-card{
  min-height:200px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:22px;
  cursor:pointer;
  text-align:left;
  border:1px solid #dde6ee;
  border-radius:16px;
  color:var(--ink);
  background:#fff;
  transition:.2s ease;
}

.problem-card:hover,
.problem-card.selected{
  border-color:#70b6ff;
  transform:translateY(-3px);
  box-shadow:0 15px 35px rgba(8,37,70,.08);
}

.problem-card > i{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  margin-bottom:auto;
  border-radius:12px;
  color:var(--blue);
  background:#edf6ff;
}

.problem-card strong{
  margin-top:30px;
  font-size:13px;
}

.problem-card span{
  margin-top:7px;
  color:var(--muted);
  font-size:9px;
  line-height:1.55;
}


/* FORM */

.support-form-section{
  background:#fff;
}

.form-layout,
.contact-layout{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:90px;
  align-items:start;
}

.form-intro{
  position:sticky;
  top:120px;
}

.tips{
  display:grid;
  gap:9px;
  margin-top:30px;
}

.tips div{
  display:flex;
  align-items:center;
  gap:9px;
  color:#53667b;
  font-size:10px;
}

.tips i{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#139b70;
  background:#ebfaf4;
  font-size:8px;
}

.support-form{
  display:grid;
  gap:18px;
  padding:30px;
  border:1px solid var(--line);
  border-radius:21px;
  background:#fff;
  box-shadow:0 25px 60px rgba(5,30,55,.07);
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
}

.support-form label{
  display:grid;
  gap:8px;
  color:#40536a;
  font-size:9px;
  font-weight:800;
}

.support-form input,
.support-form textarea,
.support-form select{
  width:100%;
  outline:none;
  border:1px solid #dce5ed;
  border-radius:10px;
  color:#17293d;
  background:#fbfcfd;
  padding:13px 14px;
  font-size:11px;
}

.support-form input:focus,
.support-form textarea:focus,
.support-form select:focus{
  border-color:#65b2ff;
  box-shadow:0 0 0 3px rgba(23,119,255,.08);
}

.support-form textarea{
  resize:vertical;
}

.checkbox{
  grid-template-columns:auto 1fr!important;
  align-items:start;
}

.checkbox input{
  width:auto;
  margin-top:1px;
}

.checkbox span{
  font-weight:500;
  line-height:1.5;
}

.form-submit{
  width:100%;
}

.form-note{
  margin:0;
  color:#8292a3;
  font-size:8px;
  text-align:center;
}


/* FAQ */

.knowledge{
  background:#f7f9fb;
}

.faq-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.faq-grid details{
  padding:20px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}

.faq-grid summary{
  display:flex;
  justify-content:space-between;
  cursor:pointer;
  font-size:11px;
  font-weight:700;
  list-style:none;
}

.faq-grid p{
  margin:17px 0 0;
  color:var(--muted);
  font-size:10px;
  line-height:1.7;
}


/* FINAL */

.support-final{
  padding:50px 0;
}

.final-box{
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding:45px;
  border-radius:23px;
  color:#fff;
  background:
    radial-gradient(circle at 90% 0%,rgba(0,190,255,.22),transparent 35%),
    #071b31;
}

.final-box span{
  color:#67c5ef;
  font-size:9px;
  font-weight:900;
}

.final-box h2{
  margin:9px 0;
  font-size:37px;
}

.final-box p{
  margin:0;
  color:#829ab2;
  font-size:11px;
}


/* CONTACT */

.contact-hero{
  color:#fff;
  background:
    radial-gradient(circle at 85% 0%,rgba(0,178,255,.18),transparent 32%),
    #05172b;
}

.contact-hero-grid{
  min-height:500px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:80px;
}

.contact-hero p{
  color:#9fb4c9;
  line-height:1.7;
}

.contact-links{
  display:grid;
  gap:8px;
}

.contact-links a{
  display:flex;
  align-items:center;
  gap:13px;
  padding:17px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:13px;
  background:rgba(255,255,255,.035);
}

.contact-links > a > i{
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  border-radius:10px;
  color:#64ccff;
  background:rgba(29,139,255,.1);
}

.contact-links small,
.contact-links strong{
  display:block;
}

.contact-links small{
  color:#758fa7;
  font-size:8px;
}

.contact-links strong{
  margin-top:3px;
  font-size:11px;
}

.support-pointer{
  display:flex;
  gap:15px;
  margin-top:35px;
  padding:18px;
  border:1px solid #dfe8f0;
  border-radius:14px;
  background:#f6f9fc;
}

.support-pointer > i{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  flex:none;
  border-radius:11px;
  color:var(--blue);
  background:#e7f2ff;
}

.support-pointer strong{
  font-size:11px;
}

.support-pointer p{
  margin:6px 0;
  color:var(--muted);
  font-size:9px;
  line-height:1.5;
}

.support-pointer a{
  color:var(--blue);
  font-size:9px;
  font-weight:800;
}


/* FOOTER */

.footer{
  padding:75px 0 25px;
  color:#72879c;
  background:#020b14;
}

.footer-top{
  display:grid;
  grid-template-columns:1.5fr repeat(4,1fr);
  gap:40px;
}

.footer-brand img{
  max-width:185px;
  height:48px;
  object-fit:contain;
}

.footer-brand p{
  max-width:280px;
  color:#62788e;
  font-size:10px;
  line-height:1.7;
}

.footer-social{
  display:flex;
  gap:7px;
  margin-top:20px;
}

.footer-social a{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#8ea2b7;
  background:rgba(255,255,255,.05);
}

.footer-column{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer-column > strong{
  margin-bottom:7px;
  color:#fff;
  font-size:9px;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.footer-column a,
.footer-column span{
  color:#71869b;
  font-size:9px;
  line-height:1.5;
}

.footer-column a:hover{
  color:#fff;
}

.contact-column i{
  width:16px;
}

.footer-servicebar{
  margin-top:55px;
  padding:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:15px;
  background:rgba(255,255,255,.025);
}

.footer-servicebar > div:first-child{
  display:flex;
  align-items:center;
  gap:13px;
}

.footer-servicebar > div:first-child > i{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:#60c8ff;
  background:rgba(20,129,255,.1);
}

.footer-servicebar strong,
.footer-servicebar span{
  display:block;
}

.footer-servicebar strong{
  color:#fff;
  font-size:10px;
}

.footer-servicebar span{
  color:#627a90;
  font-size:8px;
}

.servicebar-actions{
  display:flex;
  gap:8px;
}

.servicebar-actions a{
  padding:9px 12px;
  border-radius:8px;
  color:#d3e1ee;
  background:rgba(255,255,255,.05);
  font-size:8px;
  font-weight:700;
}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:25px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.06);
  color:#455c71;
  font-size:8px;
}

.footer-bottom div{
  display:flex;
  gap:15px;
}


/* CHAT */

.chat-launcher{
  position:fixed;
  z-index:200;
  right:22px;
  bottom:22px;
  min-height:48px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 17px;
  cursor:pointer;
  border:0;
  border-radius:25px;
  color:#fff;
  background:linear-gradient(135deg,#1074e8,#02b8fa);
  box-shadow:0 12px 35px rgba(0,84,170,.28);
}

.chat-launcher b{
  font-size:10px;
}

.chat-status{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#48e0a7;
  box-shadow:0 0 8px #48e0a7;
}

.chat-panel{
  position:fixed;
  z-index:201;
  right:22px;
  bottom:82px;
  width:min(340px,calc(100vw - 30px));
  visibility:hidden;
  opacity:0;
  transform:translateY(12px);
  overflow:hidden;
  border:1px solid #dfe7ef;
  border-radius:18px;
  background:#fff;
  box-shadow:0 25px 70px rgba(3,24,45,.2);
  transition:.2s ease;
}

.chat-panel.open{
  visibility:visible;
  opacity:1;
  transform:none;
}

.chat-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px;
  color:#fff;
  background:#06182b;
}

.chat-head > div{
  display:flex;
  align-items:center;
  gap:10px;
}

.agent-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:#63ccff;
  background:rgba(42,148,255,.13);
}

.chat-head strong,
.chat-head small{
  display:block;
}

.chat-head strong{
  font-size:11px;
}

.chat-head small{
  margin-top:3px;
  color:#7f9bb6;
  font-size:7px;
}

.chat-head small i{
  width:5px;
  height:5px;
  display:inline-block;
  border-radius:50%;
  background:#35d69f;
}

.chat-head button{
  width:34px;
  height:34px;
  border:0;
  border-radius:9px;
  cursor:pointer;
  color:#fff;
  background:rgba(255,255,255,.07);
}

.chat-body{
  display:grid;
  gap:7px;
  padding:14px;
}

.chat-message{
  margin-bottom:7px;
  padding:12px;
  border-radius:12px 12px 12px 4px;
  color:#4d6074;
  background:#f1f5f8;
  font-size:9px;
}

.chat-option{
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px;
  border:1px solid #e4ebf2;
  border-radius:11px;
}

.chat-option > i{
  width:30px;
  color:var(--blue);
  text-align:center;
}

.chat-option strong,
.chat-option small{
  display:block;
}

.chat-option strong{
  font-size:9px;
}

.chat-option small{
  margin-top:3px;
  color:#8a9bac;
  font-size:7px;
}


/* MOBILE */

@media(max-width:950px){

  .header nav{
    display:none;
  }

  .header .button{
    margin-left:auto;
  }

  .support-hero-inner,
  .contact-hero-grid,
  .form-layout,
  .contact-layout{
    grid-template-columns:1fr;
  }

  .channel-grid,
  .problem-grid{
    grid-template-columns:1fr 1fr;
  }

  .footer-top{
    grid-template-columns:2fr 1fr 1fr;
  }

  .form-intro{
    position:static;
  }

}

@media(max-width:620px){

  .topbar{
    display:none;
  }

  .header-inner{
    min-height:68px;
  }

  .header .button{
    display:none;
  }

  .logo img{
    height:36px;
    max-width:150px;
  }

  .support-hero-inner{
    min-height:auto;
    padding:65px 0;
  }

  .support-hero h1,
  .contact-hero h1{
    font-size:43px;
  }

  .hero-buttons{
    flex-direction:column;
  }

  .hero-buttons .button{
    width:100%;
  }

  .section{
    padding:75px 0;
  }

  .channel-grid,
  .problem-grid,
  .faq-grid{
    grid-template-columns:1fr;
  }

  .form-row{
    grid-template-columns:1fr;
  }

  .support-form{
    padding:20px;
  }

  .final-box{
    flex-direction:column;
    align-items:flex-start;
    padding:30px 24px;
  }

  .footer-top{
    grid-template-columns:1fr 1fr;
  }

  .footer-brand{
    grid-column:1/-1;
  }

  .footer-servicebar{
    align-items:flex-start;
    flex-direction:column;
  }

  .servicebar-actions{
    width:100%;
  }

  .servicebar-actions a{
    flex:1;
    text-align:center;
  }

  .footer-bottom{
    flex-direction:column;
  }

  .chat-launcher{
    right:15px;
    bottom:15px;
  }

  .chat-panel{
    right:15px;
    bottom:75px;
  }

}