/* ===== DESIGN TOKENS (colours, radius, shadow) ===== */
:root {
  --b: #1b56a5;
  --bd: #0c2d5a;
  --g: #8cb92f;
  --gd: #6f9a1c;
  --bg: #f4f8fd;
  --tx: #1d2b3a;
  --mu: #5d6b7c;
  --r: 18px;
  --sh: 0 10px 30px rgba(12, 45, 90, 0.12);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Poppins", system-ui, sans-serif;
  color: var(--tx);
  line-height: 1.65;
  overflow-x: hidden;
  background: #fff;
}
img {
  max-width: 100%;
  display: block;
}
a {
  text-decoration: none;
  color: inherit;
}
ul {
  list-style: none;
}
.w {
  max-width: 1180px;
  margin: auto;
  padding: 0 20px;
}
section {
  padding: 84px 0;
}
.tag {
  color: var(--g);
  font-weight: 600;
  font-size: 0.95rem;
}
h2.t {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--bd);
  margin: 4px 0 14px;
  line-height: 1.2;
}
.ctr {
  text-align: center;
}
.ctr > p {
  max-width: 620px;
  margin: 0 auto 42px;
  color: var(--mu);
}
/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 50px;
  font-weight: 600;
  border: 2px solid transparent;
  cursor: pointer;
  transition: 0.3s;
  font-size: 0.95rem;
  font-family: inherit;
}
.b-g {
  background: var(--g);
  color: #fff;
}
.b-g:hover {
  background: var(--gd);
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(140, 185, 47, 0.55);
}
.b-o {
  border-color: #fff;
  color: #fff;
}
.b-o:hover {
  background: #fff;
  color: var(--b);
  transform: translateY(-3px);
}
.b-b {
  background: var(--b);
  color: #fff;
}
.b-b:hover {
  background: var(--bd);
  transform: translateY(-3px);
}
/* ===== NAVBAR ===== */
#nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: 0.35s;
  padding: 14px 0;
}
#nav.sc {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.09);
  padding: 7px 0;
  backdrop-filter: blur(8px);
}
.nv {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nv img {
  height: 52px;
  background: #fff;
  border-radius: 10px;
  padding: 3px;
}
.nl {
  display: flex;
  gap: 6px;
  align-items: center;
}
.nl a {
  padding: 8px 15px;
  border-radius: 30px;
  font-weight: 500;
  font-size: 0.92rem;
  color: #fff;
  transition: 0.3s;
}
#nav.sc .nl a {
  color: var(--bd);
}
.nl a:hover,
.nl a.on {
  background: var(--g);
  color: #fff !important;
}
.nl a.btn {
  background: var(--b);
  color: #fff !important;
  padding: 10px 22px;
}
.hb {
  display: none;
  background: none;
  border: 0;
  color: #fff;
  font-size: 1.9rem;
  cursor: pointer;
  z-index: 102;
}
#nav.sc .hb {
  color: var(--bd);
}
.hb.o {
  color: #fff !important;
}
/* ===== HERO ===== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  color: #fff;
  background: var(--bd);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(heroimage.png) center/cover;
  animation: kb 20s ease-in-out infinite alternate;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(7, 29, 61, 0.94) 28%, rgba(27, 86, 165, 0.5));
}
.hc {
  position: relative;
  z-index: 2;
  padding-top: 90px;
}
.hc p {
  max-width: 560px;
  font-size: 1.08rem;
  color: #dbe6f5;
  margin-bottom: 28px;
}
.hero h1 {
  font-size: clamp(2.5rem, 7vw, 4.8rem);
  line-height: 1.08;
  margin: 12px 0 18px;
  max-width: 760px;
}
.hero h1::after {
  content: "";
  display: block;
  width: 150px;
  height: 8px;
  margin-top: 16px;
  border-radius: 0 40px 40px 0;
  background: var(--g);
  transform: skewX(-25deg);
  animation: gr 1.2s 0.9s both;
}
.chs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
.ch {
  padding: 9px 18px;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 0.88rem;
}
.sw {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  line-height: 0;
  z-index: 3;
}
.sd {
  position: absolute;
  bottom: 90px;
  left: 50%;
  width: 26px;
  height: 42px;
  border: 2px solid #fff;
  border-radius: 20px;
  z-index: 3;
  opacity: 0.8;
}
.sd::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  background: #fff;
  border-radius: 3px;
  animation: sc 1.6s infinite;
}
/* ===== INNER PAGE BANNER ===== */
.bn {
  padding: 150px 0 90px;
  text-align: center;
  color: #fff;
  position: relative;
  background: var(--bd);
}
.bn::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(7, 29, 61, 0.95), rgba(27, 86, 165, 0.85)),
    url(heroimage.png) center/cover;
}
.bn .w {
  position: relative;
}
.bn h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
}
.bn p {
  color: #dbe6f5;
  max-width: 600px;
  margin: 10px auto 0;
}
/* ===== CARDS ===== */
.g4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 26px;
}
.cd {
  background: #fff;
  border-radius: var(--r);
  box-shadow: var(--sh);
  overflow: hidden;
  transition: 0.4s;
}
.cd:hover {
  transform: translateY(-10px);
  box-shadow: 0 22px 44px rgba(12, 45, 90, 0.2);
}
.iw {
  overflow: hidden;
  height: 210px;
  background: linear-gradient(135deg, #dbe7f6, #eef3fa);
}
.iw img,
.iw div {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.6s;
}
.cd:hover .iw img,
.cd:hover .iw div {
  transform: scale(1.1);
}
.tx {
  padding: 22px;
}
.tx h3 {
  color: var(--bd);
  margin-bottom: 6px;
}
.tx p {
  color: var(--mu);
  font-size: 0.92rem;
  margin-bottom: 16px;
}
/* ===== COMPARISON TABLE ===== */
.tw {
  overflow-x: auto;
  border-radius: var(--r);
  box-shadow: var(--sh);
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}
th,
td {
  padding: 16px 20px;
  text-align: left;
}
th {
  background: var(--bd);
  color: #fff;
}
th.f {
  background: var(--g);
}
tr:nth-child(even) td {
  background: var(--bg);
}
td.f {
  font-weight: 600;
  color: var(--bd);
}
/* ===== ABOUT ===== */
.ab {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.pic {
  position: relative;
}
.pic div {
  aspect-ratio: 4/5;
  border-radius: var(--r);
  background: linear-gradient(135deg, #dbe7f6, #eef3fa);
  overflow: hidden;
}
.pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bdg {
  position: absolute;
  bottom: -18px;
  right: -10px;
  background: var(--g);
  color: #fff;
  padding: 16px 24px;
  border-radius: 16px;
  font-weight: 700;
  box-shadow: var(--sh);
  animation: fl 3s ease-in-out infinite;
  line-height: 1.3;
}
.ab p {
  color: var(--mu);
  margin-bottom: 16px;
}
.alt {
  background: var(--bg);
}
/* ===== STEPS ===== */
.stp {
  text-align: center;
  padding: 10px;
}
.stp i {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--b);
  color: #fff;
  font: 700 1.4rem "Poppins";
  font-style: normal;
  transition: 0.4s;
}
.stp:hover i {
  background: var(--g);
  transform: rotate(360deg);
}
.stp p {
  color: var(--mu);
  font-size: 0.92rem;
}
/* ===== CTA BANNER ===== */
.cta {
  background: linear-gradient(120deg, var(--bd), var(--b));
  color: #fff;
  text-align: center;
  padding: 84px 0;
}
.cta h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 10px;
}
.cta p {
  color: #dbe6f5;
  margin-bottom: 26px;
}
/* ===== FOOTER ===== */
.ft {
  background: #071d3d;
  color: #c5d1e3;
  padding: 64px 0 20px;
}
.fg {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: 34px;
}
.ft h4 {
  color: #fff;
  margin-bottom: 14px;
}
.ft li,
.ft p {
  margin-bottom: 8px;
  font-size: 0.93rem;
}
.ft a:hover {
  color: var(--g);
}
.so {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.so a {
  padding: 8px 16px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.85rem;
  transition: 0.3s;
}
.so a:hover {
  background: var(--g);
  color: #fff;
  transform: translateY(-3px);
}
.cp {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 36px;
  padding-top: 18px;
  text-align: center;
  font-size: 0.85rem;
}
/* ===== FLOATING BUTTONS ===== */
.wa {
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25d366;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  z-index: 90;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  animation: pl 2s infinite;
}
.wa:hover {
  transform: scale(1.12);
}
.up2 {
  position: fixed;
  bottom: 94px;
  right: 30px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--b);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 1.2rem;
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
}
.up2.s {
  opacity: 1;
  pointer-events: auto;
}
/* ===== SCROLL ANIMATIONS ===== */
.rv {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s,
    transform 0.8s;
  transition-delay: var(--d, 0s);
}
.rv.l {
  transform: translateX(-50px);
}
.rv.r {
  transform: translateX(50px);
}
.rv.in {
  opacity: 1;
  transform: none;
}
.up {
  opacity: 0;
  animation: up 0.9s var(--d, 0s) forwards;
}
/* ===== FIBER DOORS PAGE ===== */
.tl {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}
.fl button {
  padding: 10px 22px;
  border-radius: 30px;
  border: 2px solid var(--b);
  background: #fff;
  color: var(--b);
  font: 600 0.92rem "Poppins";
  cursor: pointer;
  transition: 0.3s;
  margin: 3px;
}
.fl button.on,
.fl button:hover {
  background: var(--b);
  color: #fff;
}
.tl input {
  padding: 12px 20px;
  border-radius: 30px;
  border: 2px solid #d5e0ee;
  font: inherit;
  min-width: 230px;
  outline: 0;
}
.tl input:focus {
  border-color: var(--g);
}
.art {
  animation: pop 0.5s;
}
.art .iw {
  height: auto;
  aspect-ratio: 3/4;
  cursor: zoom-in;
}
.art .tx {
  text-align: center;
}
.art .btn {
  padding: 10px 20px;
  font-size: 0.88rem;
}
.em {
  display: none;
  text-align: center;
  color: var(--mu);
  padding: 40px;
}
/* ===== PORTFOLIO PAGE ===== */
.pg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
  gap: 14px;
}
.pg a {
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #dbe7f6, #eef3fa);
  cursor: zoom-in;
  display: block;
}
.pg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.6s;
}
.pg a:hover img {
  transform: scale(1.1);
}
.pg a::after {
  content: "🔍";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  background: rgba(12, 45, 90, 0.45);
  opacity: 0;
  transition: 0.3s;
}
.pg a:hover::after {
  opacity: 1;
}
.pg .t {
  grid-row: span 2;
}
.pg .w2 {
  grid-column: span 2;
}
.pg .bx {
  grid-column: span 2;
  grid-row: span 2;
}
/* ===== LIGHTBOX ===== */
#lb {
  position: fixed;
  inset: 0;
  background: rgba(5, 20, 45, 0.95);
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
}
#lb.o {
  display: flex;
}
#lb img {
  max-width: 92vw;
  max-height: 74vh;
  border-radius: 12px;
  animation: zi 0.3s;
}
#lb b {
  color: #fff;
  font-size: 1.1rem;
}
#lb button {
  position: absolute;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  transition: 0.3s;
}
#lb button:hover {
  background: var(--g);
}
.lx {
  top: 20px;
  right: 20px;
}
.lp {
  left: 16px;
  top: 50%;
}
.ln {
  right: 16px;
  top: 50%;
}
/* ===== DISCLAIMER PAGE ===== */
.leg {
  max-width: 860px;
  margin: auto;
}
.leg h2 {
  color: var(--bd);
  margin: 28px 0 8px;
  font-size: 1.3rem;
}
.leg p {
  color: var(--mu);
}
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--g);
  outline-offset: 3px;
}
/* ===== KEYFRAMES ===== */
@keyframes kb {
  to {
    transform: scale(1.12);
  }
}
@keyframes up {
  from {
    opacity: 0;
    transform: translateY(35px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes gr {
  from {
    width: 0;
  }
  to {
    width: 150px;
  }
}
@keyframes sc {
  50% {
    transform: translateY(12px);
    opacity: 0.2;
  }
}
@keyframes fl {
  50% {
    transform: translateY(-8px);
  }
}
@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
}
@keyframes zi {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
}
@keyframes pl {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  }
  100% {
    box-shadow: 0 0 0 22px rgba(37, 211, 102, 0);
  }
}
/* ===== RESPONSIVE (mobile) ===== */
@media (max-width: 860px) {
  .hb {
    display: block;
  }
  .nl {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: 78%;
    background: var(--bd);
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    transition: 0.4s;
    z-index: 101;
  }
  .nl.o {
    right: 0;
  }
  .nl a {
    color: #fff !important;
    font-size: 1.1rem;
  }
  .ab,
  .fg {
    grid-template-columns: 1fr;
  }
  .sd {
    display: none;
  }
  section {
    padding: 60px 0;
  }
  .pg {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-auto-rows: 150px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation: none !important;
    transition: none !important;
  }
  .rv,
  .up {
    opacity: 1;
    transform: none;
  }
}

/* ===== FIXES: mobile nav stays sticky (no sideways overflow) ===== */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}
main {
  overflow-x: hidden;
  overflow-x: clip;
}
.bdg {
  right: 16px;
  bottom: -22px;
}

/* ===== CARD CLICK: green outline + proper hover after reveal ===== */
.cd.rv.in:hover {
  transform: translateY(-10px);
}
.rv.done {
  transition:
    transform 0.4s,
    box-shadow 0.4s,
    opacity 0.4s;
  transition-delay: 0s;
}
.cd:active,
.cd.sel {
  box-shadow:
    0 0 0 3px var(--g),
    0 22px 44px rgba(12, 45, 90, 0.2);
}

/* ===== SQUARE (1:1) DESIGN IMAGES ===== */
.sq,
.art .iw {
  aspect-ratio: 1/1;
  height: auto;
}

/* ===== STATS (floating cards) ===== */
.st {
  padding: 0 0 70px;
  background: #fff;
}
.sg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: -64px;
  position: relative;
  z-index: 5;
}
.stc {
  background: #fff;
  border-radius: var(--r);
  padding: 26px 22px;
  box-shadow: var(--sh);
  border-top: 4px solid var(--g);
  position: relative;
  overflow: hidden;
}
.stc i {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--b), var(--bd));
  color: #fff;
  font-size: 1.3rem;
  margin-bottom: 14px;
  transition: 0.5s;
}
.stc b {
  display: block;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  color: var(--bd);
  line-height: 1.15;
}
.stc span {
  color: var(--mu);
  font-size: 0.92rem;
}
.stc::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 0;
  background: var(--b);
  transition: width 1.6s 0.3s;
}
.stc.in::after {
  width: 100%;
}
.stc:hover i {
  background: var(--g);
  transform: rotate(-8deg) scale(1.1);
}
.stc.rv.in:hover {
  transform: translateY(-8px);
}

/* ===== ABOUT (16:9 image, icon points) ===== */
.pic {
  z-index: 0;
}
.pic div {
  aspect-ratio: 16/9;
  box-shadow: var(--sh);
}
.pic::before {
  content: "";
  position: absolute;
  top: -14px;
  left: -14px;
  width: 70%;
  height: 70%;
  border: 3px solid var(--g);
  border-radius: var(--r);
  z-index: -1;
}
.ai {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.ai i {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--b);
  font-size: 1.4rem;
  box-shadow: var(--sh);
  transition: 0.4s;
}
.ai:hover i {
  background: var(--g);
  color: #fff;
  transform: rotate(-8deg);
}
.ai h3 {
  color: var(--bd);
  font-size: 1.05rem;
  margin-bottom: 2px;
}
.ai p {
  margin: 0;
  font-size: 0.92rem;
}

/* ===== WHY CHOOSE US ===== */
.wy {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 28px;
  text-align: left;
}
.wp {
  background: linear-gradient(150deg, var(--bd), var(--b));
  color: #fff;
  border-radius: var(--r);
  padding: 40px 32px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.wp::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 26px solid rgba(140, 185, 47, 0.35);
}
.wp > i {
  font-size: 3rem;
  color: var(--g);
}
.wp h3 {
  font-size: 1.6rem;
  line-height: 1.25;
}
.wp p {
  color: #dbe6f5;
}
.wl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.wi {
  display: flex;
  gap: 16px;
  padding: 24px;
  border-left: 5px solid var(--g);
}
.wi > i {
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--b);
  font-size: 1.25rem;
  transition: 0.4s;
}
.wi:hover > i {
  background: var(--g);
  color: #fff;
  transform: scale(1.12);
}
.wi h3 {
  color: var(--bd);
  font-size: 1rem;
  margin-bottom: 4px;
}
.wi p {
  color: var(--mu);
  font-size: 0.9rem;
  margin: 0;
}

/* ===== REVIEWS ===== */
.rg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 24px;
  text-align: left;
}
.rc {
  padding: 28px;
  position: relative;
}
.rc .q {
  position: absolute;
  top: 22px;
  right: 24px;
  font-size: 2rem;
  color: #dbe7f6;
}
.rc .s {
  color: #f5b301;
  margin-bottom: 12px;
}
.rc p {
  color: var(--tx);
  font-size: 0.95rem;
  margin-bottom: 18px;
}
.rc .u {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rc .u span {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--b);
  color: #fff;
  font-weight: 600;
}
.rc .u b {
  display: block;
  color: var(--bd);
  line-height: 1.2;
}
.rc .u small {
  color: var(--mu);
}

/* ===== FOOTER ICONS + CONTACT DEVELOPER ===== */
.ft i {
  color: var(--g);
  margin-right: 6px;
}
.so a {
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.1rem;
}
.so a i {
  margin: 0;
  color: #fff;
}
.cp {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
}
.dev {
  padding: 9px 20px;
  font-size: 0.85rem;
}
.ft a.btn,
.ft a.btn:hover,
.ft a.btn i {
  color: #fff;
}
.wa {
  font-size: 2.1rem;
  color: #fff;
}

/* ===== FEEDBACK PAGE ===== */
.fb {
  max-width: 760px;
  margin: -50px auto 0;
  position: relative;
  z-index: 5;
  background: #fff;
  border-radius: var(--r);
  box-shadow: var(--sh);
  padding: 28px;
}
.tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: var(--bg);
  padding: 6px;
  border-radius: 50px;
  margin-bottom: 24px;
}
.tabs button {
  padding: 12px 8px;
  border: 0;
  border-radius: 40px;
  background: none;
  font: 600 0.9rem "Poppins";
  color: var(--bd);
  cursor: pointer;
  transition: 0.3s;
}
.tabs button.on {
  background: var(--b);
  color: #fff;
}
.fp {
  display: none;
}
.fp.on {
  display: block;
  animation: pop 0.4s;
}
.fr {
  display: grid;
  gap: 16px;
}
.fr label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--bd);
  margin-bottom: 4px;
}
.fr input,
.fr select,
.fr textarea {
  width: 100%;
  padding: 13px 16px;
  border: 2px solid #d5e0ee;
  border-radius: 12px;
  font: inherit;
  background: #fff;
  outline: 0;
  transition: 0.3s;
}
.fr input:focus,
.fr select:focus,
.fr textarea:focus {
  border-color: var(--g);
}
.fr .bad {
  border-color: #e5484d;
}
.er {
  display: none;
  color: #e5484d;
  font-size: 0.82rem;
  margin-top: 4px;
}
.stz {
  display: flex;
  gap: 6px;
  font-size: 2.2rem;
  color: #d5dbe5;
  cursor: pointer;
}
.stz i {
  transition: 0.2s;
}
.stz i.on {
  color: #f5b301;
  transform: scale(1.12);
}
.rl {
  font-weight: 600;
  color: var(--b);
  min-height: 1.6em;
}
.ok {
  display: none;
  text-align: center;
  padding: 30px 10px;
}
.ok.s {
  display: block;
  animation: pop 0.5s;
}
.ok i {
  font-size: 3.4rem;
  color: var(--g);
}
.ok h3 {
  color: var(--bd);
  margin: 8px 0;
}
.ok p {
  color: var(--mu);
  margin-bottom: 18px;
}

/* ===== RESPONSIVE (new sections) ===== */
@media (max-width: 860px) {
  .sg {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: -50px;
  }
  .wy,
  .wl {
    grid-template-columns: 1fr;
  }
  .pic::before {
    display: none;
  }
  .cp {
    justify-content: center;
    text-align: center;
  }
}
@media (max-width: 420px) {
  .stc {
    padding: 20px 16px;
  }
  .tabs button {
    font-size: 0.78rem;
    padding: 10px 4px;
  }
}