.gft{
  --gft-accent:#3f9bb5; --gft-ink:#2f4a56; --gft-text:#4d5a62; --gft-red:#d62839;
  position:relative; max-width:1200px; margin:24px auto; padding:70px 24px 50px; box-sizing:border-box;
  font-family:"Maven Pro","Helvetica Neue",Arial,sans-serif; color:var(--gft-text);
  background:linear-gradient(180deg,#ffffff 0%,#eef7fc 55%,#cfe7f6 100%); border-radius:14px;
}
.gft--clear{background:none}
.gft *,.gft *::before,.gft *::after{box-sizing:border-box}
.gft .gft-head h3,.gft .gft-item,.gft .gft-body p,.gft .gft-hint,.gft .gft-badge{font-family:"Maven Pro","Helvetica Neue",Arial,sans-serif}

.gft .gft-blob{position:absolute;border-radius:50%;filter:blur(14px);opacity:.5;pointer-events:none}
.gft .gft-b1{width:240px;height:240px;left:2%;top:60px;background:#7cc4dc}
.gft .gft-b2{width:220px;height:220px;left:38%;top:240px;background:#b9a8e8}
.gft .gft-b3{width:200px;height:200px;right:3%;top:90px;background:#9be0c4}
.gft .gft-b4{width:180px;height:180px;right:30%;bottom:10px;background:#f2a9b0}

.gft .gft-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:26px}

.gft .gft-tile{position:relative;height:430px;perspective:1100px;outline:none}
.gft .gft-face{position:absolute;inset:0;border-radius:26px;display:flex;flex-direction:column;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .8s cubic-bezier(.4,.2,.2,1);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 16px 34px rgba(40,90,130,.2),inset 0 1px 0 rgba(255,255,255,.9)}
.gft .gft-front{border:1px solid rgba(255,255,255,.9);transform:rotateY(0)}
.gft .gft-back{border:1px solid rgba(255,255,255,.35);transform:rotateY(-180deg);color:#fff;
  background:linear-gradient(150deg,rgba(23,75,150,.82),rgba(12,38,82,.9));
  box-shadow:0 16px 34px rgba(15,47,94,.38),inset 0 1px 0 rgba(255,255,255,.35)}
@media (hover:hover){
  .gft .gft-tile:hover .gft-front{transform:rotateY(180deg)}
  .gft .gft-tile:hover .gft-back{transform:rotateY(0)}
}
.gft .gft-tile:focus-visible .gft-front,.gft .gft-tile.gft-flipped .gft-front{transform:rotateY(180deg)}
.gft .gft-tile:focus-visible .gft-back,.gft .gft-tile.gft-flipped .gft-back{transform:rotateY(0)}
.gft .gft-tile:focus-visible .gft-face{outline:3px solid var(--gft-accent);outline-offset:3px}

.gft .gft-badge{position:absolute;left:50%;top:-30px;transform:translateX(-50%);width:62px;height:62px;border-radius:50%;
  display:grid;place-items:center;font-size:30px;font-weight:700;line-height:1;color:#fff;z-index:2;
  background:linear-gradient(145deg,#7cc4dc,var(--gft-accent));border:3px solid rgba(255,255,255,.9);box-shadow:0 8px 16px rgba(63,155,181,.35)}
.gft .gft-back .gft-badge{background:linear-gradient(145deg,#ee4a5a,var(--gft-red));box-shadow:0 8px 16px rgba(214,40,57,.4)}

.gft .gft-head{padding:42px 18px 20px;text-align:center;border-radius:26px 26px 0 0}
.gft .gft-front .gft-head{background:rgba(255,255,255,.72);border-bottom:1px solid rgba(255,255,255,.9)}
.gft .gft-back .gft-head{background:rgba(255,255,255,.08);border-bottom:3px solid var(--gft-red)}
.gft .gft-head h3{margin:0;padding:0;font-size:19px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;line-height:1.25}
.gft .gft-front h3{color:var(--gft-accent)}
.gft .gft-back h3{color:#fff}

.gft .gft-body{flex:1;padding:14px 22px 10px;display:flex;flex-direction:column}
.gft .gft-front .gft-body{background:linear-gradient(160deg,rgba(124,196,220,.34),rgba(63,155,181,.2));border-radius:0 0 26px 26px}
.gft .gft-back .gft-body{justify-content:center}
.gft .gft-body p{margin:0;font-size:16px;line-height:1.7;color:rgba(255,255,255,.95)}

.gft .gft-item{display:flex;align-items:center;gap:13px;padding:15px 0;font-size:16px;line-height:1.4;color:var(--gft-ink);border-bottom:1px solid rgba(255,255,255,.9)}
.gft .gft-item:last-of-type{border-bottom:0}
.gft .gft-item strong{font-weight:700}
.gft .gft-ico{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#7cc4dc,var(--gft-accent));box-shadow:0 3px 8px rgba(63,155,181,.35)}
.gft .gft-ico svg{width:16px;height:16px}

.gft .gft-hint{margin-top:auto;padding:8px 0 6px;text-align:center;font-size:13px;color:var(--gft-accent);letter-spacing:.3px}
.gft .gft-t{display:none}
@media (hover:none){.gft .gft-m{display:none}.gft .gft-t{display:inline}}

@media (max-width:1060px){.gft .gft-grid{grid-template-columns:repeat(2,1fr);row-gap:60px}}
@media (max-width:560px){.gft{padding:60px 18px 40px}.gft .gft-grid{grid-template-columns:1fr;row-gap:56px}.gft .gft-tile{height:410px}}
@media (prefers-reduced-motion:reduce){.gft .gft-face{transition:none}}