:root{
  --primary:#00A6A6;
  --primary-2:#0BCACA;
  --text:#0f0f0f;
  --text-invert:#ffffff;
  --muted:#667085;

  --ice-1:#FFFFFF; --ice-2:#F8FBFF; --ice-3:#EDF3FF;
  --neu-dark:#d6dee9; --neu-light:#ffffff;

  --g1:#057fc5; --g2:#04a7d6; --g3:#09c0d9; --g4:#11d9df;

  --icon-bg:#EEF7FF;
  --card-border:#E6EDFF;
  --card-bg: rgba(255,255,255,.92);

  --nav-h: 72px;
  --vh: 1vh;
  --radius:18px;

  --container-x: 130px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans";
  color:var(--text);
  background:
    radial-gradient(1200px 820px at 18% -10%, var(--ice-1) 0%, var(--ice-2) 62%, transparent 70%),
    radial-gradient(900px 700px at 115% 110%, #FAFCFF 0%, var(--ice-2) 55%, transparent 70%),
    linear-gradient(180deg, var(--ice-1) 0%, #F5F8FF 38%, var(--ice-3) 100%);
  overflow-x:hidden;
  padding-top: var(--nav-h);
}
body.menu-open{ overflow:hidden; height:100%; touch-action:none; }

/* CONTAINER */
.container{
  width:100%;
  max-width:none;
  margin-inline:0;
  padding-left:max(var(--container-x), env(safe-area-inset-left));
  padding-right:max(var(--container-x), env(safe-area-inset-right));
}

/* NAVBAR */
.navbar{
  position:fixed; inset:0 0 auto 0; z-index:1000; height:var(--nav-h);
  display:grid; align-items:center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
    linear-gradient(135deg, var(--g1), var(--g2) 33%, var(--g3) 66%, var(--g4));
  color:var(--text-invert);
  border-bottom:1px solid rgba(255,255,255,.28);
  box-shadow:0 10px 22px rgba(5,127,197,.18), inset -2px -2px 4px rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.navbar .container{
  display:grid; grid-template-columns:auto 1fr auto auto; gap:16px; align-items:center;
  position:relative;
}
.brand{display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; font-weight:900}
.brand .logo{ width:clamp(42px, 4.2vw, 58px); height:clamp(42px, 4.2vw, 58px); display:grid; place-items:center; border-radius:14px; }
.brand .logo img{width:100%; height:100%; object-fit:cover; border-radius:14px}

.nav-center{justify-self:center}
.menu{display:flex; align-items:center; gap:6px}
.menu a{
  position:relative; color:#fff; text-decoration:none; font-weight:800; letter-spacing:.2px; opacity:.95; font-size:.95rem;
  padding:10px 14px; border-radius:999px; transition: background .2s, opacity .2s, transform .2s;
}
.menu a:hover{opacity:1; background:rgba(255,255,255,.10); transform:translateY(-1px)}
.menu a:focus-visible{outline:2px solid #fff; outline-offset:3px}

/* Desktop only: ikon + BORDER PUTIH khusus tombol “Versi Mobile”.
   Mendukung <a class="menu-pill"> maupun href "mobile.html" sebagai fallback. */
@media (min-width: 861px){
  .navbar .menu a.menu-pill,
  .navbar .menu a[href$="mobile.html"]{
    display:inline-flex; align-items:center; gap:8px;
    border:2px solid #fff; border-radius:999px;
    padding:10px 14px; color:#fff; background:transparent;
    box-shadow:0 0 0 0 rgba(255,255,255,0);
    transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
  }
  .navbar .menu a.menu-pill:hover,
  .navbar .menu a[href$="mobile.html"]:hover{
    background:#fff; color:var(--g1);
    transform:translateY(-1px);
    box-shadow:0 10px 22px rgba(5,127,197,.25);
  }
  .navbar .menu a.menu-pill i.fa-mobile-screen,
  .navbar .menu a[href$="mobile.html"] i.fa-mobile-screen{
    font-size:1.05em; line-height:0; display:inline-block;
  }
}

.nav-right{display:flex; align-items:center; gap:12px}
.link-ghost{
  color:#fff; text-decoration:none; font-weight:800; padding:10px 14px; border-radius:999px;
  transition: background .2s, transform .2s;
}
.link-ghost:hover{ background:rgba(255,255,255,.10); transform:translateY(-1px); }

.btn-outline{
  background:transparent; color:#fff; border:2px solid rgba(255,255,255,.95);
  padding:10px 16px; border-radius:999px; font-weight:900; cursor:pointer;
  transition: transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.btn-outline:hover{
  background:#fff; color:var(--g1); border-color:#fff; transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(5,127,197,.25);
}

.burger{display:none; background:none; border:0; cursor:pointer; justify-self:end;}
.burger .bar{width:26px; height:2px; background:#fff; display:block; position:relative; border-radius:2px}
.burger .bar::before,.burger .bar::after{content:""; position:absolute; left:0; width:26px; height:2px; background:#fff; border-radius:2px}
.burger .bar::before{top:-8px} .burger .bar::after{top:8px}
.burger[aria-expanded="true"] .bar{background:transparent}
.burger[aria-expanded="true"] .bar::before{transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] .bar::after{transform:translateY(-8px) rotate(-45deg)}

/* MOBILE MENU */
.mobile-menu{
  display:none; position:fixed; left:0; right:0; top:var(--nav-h);
  height: calc((var(--vh) * 100) - var(--nav-h));
  background:#fff; box-shadow:0 18px 40px rgba(3,7,18,.35); z-index:980; overflow:auto;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding-bottom:max(16px, env(safe-area-inset-bottom));
}
.mobile-menu a, .mobile-menu button{ display:block; width:100%; text-align:left; padding:14px 20px; font-weight:800; color:var(--text); text-decoration:none; background:#fff; border:0 }
.mobile-menu a + a{border-top:1px solid #e5e7eb}
.mobile-menu.open{display:block}
.scrim{position:fixed; inset:0; background:rgba(2,6,23,.45); opacity:0; pointer-events:none; transition:opacity .2s; z-index:970}
.scrim.open{opacity:1; pointer-events:auto}

/* ================= HERO ================= */
.partner-hero{
  background:
    radial-gradient(1200px 400px at 80% -10%, rgba(17,217,223,.16), transparent 60%),
    linear-gradient(180deg, rgba(5,127,197,.05), transparent 55%);
  padding: clamp(36px, 6vw, 72px) 0;
}
.hero-wrap{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(20px, 4vw, 48px);
  align-items:center;
}

/* === Judul hero: gradient sama dengan navbar, diperkecil === */
.hero-copy h1{
  margin: 0 0 10px;
  line-height: 1.12;
  font-weight: 800;
  background: linear-gradient(135deg, var(--g1), var(--g2) 33%, var(--g3) 66%, var(--g4));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* lebih kecil dari versi sebelumnya */
  font-size: clamp(26px, 3.2vw, 38px);
}
/* Perbesar khusus laptop/desktop (tetap lebih kecil dari versi sebelumnya) */
@media (min-width: 991px){
  .hero-copy h1{ font-size: clamp(36px, 3.6vw, 50px); }
}

.hero-copy .sub{
  color: var(--muted);
  font-size: clamp(15px, 1.6vw, 18px);
}

/* ===== CTA (Get Started) ===== */
.quick-cta{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.quick-cta .btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:12px; font-weight:600; text-decoration:none;
  letter-spacing:.2px; gap:12px;
}
.quick-cta .btn i{ line-height:0; font-size:1em; }
.quick-cta .btn.filled{
  background: linear-gradient(135deg, var(--g1), var(--g4));
  color:#fff; box-shadow: 0 8px 18px rgba(5,127,197,.35);
}
.quick-cta .btn.big{
  padding:14px 22px; border-radius:14px; font-size:1.06rem;
}
.quick-cta .btn.big i{ font-size:1.15em; }
.quick-cta .btn.ghost{
  background:#fff; color: var(--text);
  border:1px solid rgba(0,0,0,.08); box-shadow:0 4px 12px rgba(0,0,0,.04);
}
.hero-art img{
  width:100%; height:auto; display:block;
  max-width:520px; margin-inline:auto;
  filter: drop-shadow(0 18px 48px rgba(3,7,18,.18));
}

/* Tombol lama */
.btn-primary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    linear-gradient(135deg, var(--g1), var(--g2) 33%, var(--g3) 66%, var(--g4));
  color:#fff; border:none;
  padding:10px 16px; border-radius:999px; font-weight:900; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.92rem; box-shadow:0 7px 18px rgba(5,127,197,.20);
}
.btn-primary:hover{ filter:brightness(.96); transform:translateY(-1px); border:none; }

/* LOGO PENDUKUNG */
.support-logos{ margin-top:10px; text-align:left; }
.support-logos p{ margin:0 0 14px 0; color:#294b59; font-weight:600; font-size:.95rem; }
.logos-wrap{ display:inline-block; background:rgba(255,255,255,.62); border:1px solid rgba(6,179,196,.20); padding:6px 8px; border-radius:50px; box-shadow:0 8px 18px rgba(3,7,18,.08); backdrop-filter:saturate(140%) blur(1px); }
.support-logos img{ display:block; width:100%; max-width:260px; height:auto; border-radius:10px; }

/* COUNTDOWN */
.cta-note{ margin:12px 0 10px 0; color:#294b59; opacity:.95; font-size:clamp(0.9rem, 0.8rem + 0.35vw, 1.02rem); }
.countdown{ display:flex; align-items:flex-end; gap:8px; margin:2px 0 14px 0; font-variant-numeric:tabular-nums; }
.cd{ display:flex; flex-direction:column; align-items:center; min-width:60px; }
.num{ font-weight:700; line-height:1; letter-spacing:.3px; font-size:clamp(1.2rem, 0.7rem + 1.7vw, 1.9rem); color:#0b1b2b; }
.label{ font-size:.78rem; color:#64748b; }
.dots{ font-weight:700; font-size:clamp(1.2rem, 0.7rem + 1.7vw, 1.9rem); line-height:1; transform:translateY(-2px); color:#0b1b2b; user-select:none; }

/* FEATURES */
.features{background:#F5F8FF; padding:64px 0}
.features h2{ text-align:center; margin:0 0 28px 0; font-size:clamp(1.6rem, 1rem + 2vw, 2.2rem); color:#0b1b2b }
.features h2 .hl{ background:linear-gradient(transparent 70%, #C6F5FF 0); border-radius:4px; padding:0 .15em; }
.feat-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px}
.features .card{
  background:var(--card-bg); border:1px solid rgba(6,179,196,.10); border-radius:18px; padding:26px;
  box-shadow:6px 6px 12px var(--neu-dark), -6px -6px 12px var(--neu-light);
  text-align:center; transition: transform .18s ease, box-shadow .18s ease, background .22s ease, border-color .22s ease, color .22s ease;
  outline:0;
}
.icon-wrap{ width:86px; height:86px; margin:0 auto 14px auto; display:grid; place-items:center; background:var(--icon-bg); border-radius:22px; transition:background .22s ease; }
.features .card h4{margin:8px 0 6px 0; font-size:1.15rem; color:#0b1b2b; transition:color .2s ease}
.features .card p{margin:0; color:#475569; line-height:1.6; transition:color .2s ease}
.ico{width:40px; height:40px; stroke:var(--g3); fill:none; stroke-width:2; transition:stroke .22s ease}

/* Hover (pointer presisi) */
@media (hover:hover) and (pointer:fine){
  .features .card:hover{
    background:
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
      linear-gradient(135deg, var(--g1), var(--g2) 33%, var(--g3) 66%, var(--g4));
    color:#fff; border-color: transparent;
    transform:translateY(-4px);
    box-shadow:0 18px 38px rgba(5,127,197,.25);
  }
  .features .card:hover h4,
  .features .card:hover p{ color:#fff }
  .features .card:hover .icon-wrap{ background:rgba(255,255,255,.16) }
  .features .card:hover .ico{ stroke:#fff }
}

/* ARTIKEL */
.articles{background:#fff; padding:56px 0}
.articles .head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px}
.articles .head h2{margin:0; font-size:clamp(1.6rem, 1rem + 2vw, 2.1rem); color:#0b1b2b}
.art-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
  align-items:stretch;
}
.a-card{
  position:relative;
  background:#fff; border:1px solid var(--card-border); border-radius:18px;
  box-shadow:6px 6px 12px var(--neu-dark), -6px -6px 12px var(--neu-light);
  transition: transform .18s ease, box-shadow .18s ease;
  overflow:hidden;
  display:flex; flex-direction:column; min-height:100%;
}
.a-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(180deg, var(--g1) 0%, var(--g3) 100%);
  opacity:0; transition:opacity .25s ease; z-index:0;
}
.a-card:hover{ transform: translateY(-4px); box-shadow:0 18px 36px rgba(3,7,18,.12) }
.a-card:hover::before{ opacity:1 }
.a-media{ flex:0 0 auto; width:100%; aspect-ratio:16 / 10; overflow:hidden; background:#e5f5ff }
.a-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease, filter .35s ease; }
.a-card:hover .a-media img{ transform:scale(1.05); filter:brightness(.96); }

.a-body{ position:relative; z-index:1; padding:18px; display:flex; flex-direction:column; gap:10px; flex:1 1 auto; }
.a-tag{ font-size:.78rem; font-weight:800; color: var(--g1); background:#E9FAFF; padding:6px 10px; border-radius:999px; width:max-content; transition: background .2s ease, color .2s ease; }
.a-title{ margin:0; font-size:1.1rem; line-height:1.35; color:#0b1b2b; transition:color .2s ease }
.a-desc{ margin:0; color:#475569; line-height:1.6; transition:color .2s ease }
.a-foot{ margin-top:auto; display:flex; align-items:center; gap:10px; }
.a-foot .meta{ font-size:.9rem; color:#64748b; flex:0 0 auto; }

.btn-read,
.btn-read:hover,
.btn-read:active{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px;
  border:2px solid var(--card-border);
  border-radius:999px;
  background:#fff; color:#0f172a;
  font-weight:800; text-decoration:none; line-height:1;
  box-shadow:0 2px 6px rgba(2,6,23,.06);
  transform:none; filter:none; transition:none;
}
.btn-read:focus-visible{ outline:3px solid var(--g3); outline-offset:2px; }

.a-card:hover .a-title,
.a-card:hover .a-desc,
.a-card:hover .a-foot .meta{ color:#fff }
.a-card:hover .a-tag{ background:#fff; color:var(--g1) }

.a-card[data-href]{ cursor:pointer; }
.a-card[data-href]:focus-visible{ outline:3px solid var(--g3); outline-offset:2px; }

/* TESTIMONIALS */
.testimonials{background:#F5F8FF; padding:64px 0}
.t-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:26px}
.t-head h2{margin:0; font-size:clamp(1.6rem, 1rem + 2vw, 2.1rem); color:#0b1b2b}
.t-nav{display:flex; align-items:center; gap:10px}
.t-btn{
  width:42px; height:42px; border-radius:50%;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
  border: 1px solid rgba(6,179,196,.10);
  display:grid; place-items:center; cursor:pointer; color:#0b1b2b;
  transition: box-shadow .18s ease, transform .12s ease, background .18s ease, color .18s ease, border-color .18s ease;
  box-shadow:6px 6px 12px var(--neu-dark), -6px -6px 12px var(--neu-light);
}
.t-btn:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    linear-gradient(135deg, var(--g1), var(--g2) 33%, var(--g3) 66%, var(--g4));
  color:#fff; border-color: transparent;
  box-shadow: 0 6px 16px rgba(5,127,197,.22); transform: translateY(-1px);
}
.t-btn.filled{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    linear-gradient(135deg, var(--g1), var(--g2) 33%, var(--g3) 66%, var(--g4));
  color:#fff; border-color: transparent;
  box-shadow: 0 6px 16px rgba(5,127,197,.22);
}
.t-carousel{ --t-gap:18px; overflow-x:hidden; overflow-y:visible; padding:18px 32px 18px 0; position:relative; }
.t-track{ display:flex; gap:var(--t-gap); will-change:transform; transform:translateX(0); align-items:stretch; transition:transform .35s ease; }
.t-card{
  flex:0 0 calc((100% - (var(--t-gap) * 2)) / 3); width:auto;
  background: var(--card-bg); border:1px solid rgba(6,179,196,.10); border-radius:16px;
  box-shadow:6px 6px 12px var(--neu-dark), -6px -6px 12px var(--neu-light);
  padding:22px; transition:transform .2s, box-shadow .2s, outline-color .2s, border-color .2s, background .22s, color .22s;
  display:flex; flex-direction:column; min-height:160px;
}
@media (hover:hover) and (pointer:fine){
  .t-card:hover{
    background:
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
      linear-gradient(135deg, var(--g1), var(--g2) 33%, var(--g3) 66%, var(--g4));
    color:#fff;
    border-color: transparent;
    transform: translateY(-4px);
    box-shadow:0 18px 38px rgba(5,127,197,.25);
  }
  .t-card:hover .t-text{ color:#fff; }
  .t-card:hover .person span{ color:#E6FAFF; }
}
.t-card.is-focus:not(:hover){
  background: var(--card-bg);
  border-color: rgba(6,179,196,.10);
  color: inherit;
  transform: none;
  box-shadow: 6px 6px 12px var(--neu-dark), -6px -6px 12px var(--neu-light);
}
.stars{display:flex; gap:6px; margin-bottom:12px}
.stars svg{width:18px;height:18px; fill:#FFB31A}
.t-text{ color:#475569; line-height:1.7; margin:0 0 16px 0; }
.person{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.person img{width:42px; height:42px; border-radius:50%; object-fit:cover}
.person > div{ display:flex; flex-direction:column; line-height:1.25; }
.person b{ display:block; font-weight:700; margin-bottom:2px; }
.person span{ display:block; color:#64748b; font-size:.92rem; }

/* FOOTER */
.site-footer{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
    linear-gradient(135deg, var(--g1), var(--g2) 33%, var(--g3) 66%, var(--g4));
  color:#fff; padding:32px 0 44px
}
.footer-grid{display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:32px; align-items:flex-start}
.footer-brand .brand-inline{display:flex; align-items:center; gap:12px; margin-bottom:8px}
.footer-brand .brand-inline img{width:44px;height:44px;border-radius:12px;object-fit:cover}
.footer-brand h3{margin:8px 0 12px 0; font-size:1.2rem}
.footer-brand p{margin:0 0 10px 0; color:#E6FAFF; line-height:1.6}
.footer-col h4{margin:0 0 12px 0; font-size:1.1rem}

/* >>> Link footer <<< */
.footer-links{list-style:none; padding:0; margin:0}
.footer-links li a{
  display:block; padding:6px 0;
  color:#fff; text-decoration:none;
  font-weight:600;
  transition:font-weight .12s ease;
}
.footer-links li a:hover{ font-weight:800; }
.footer-links li a:focus-visible{
  outline:2px solid rgba(255,255,255,.8); outline-offset:2px; border-radius:6px;
}

.social{display:flex; gap:10px}
.social a{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.12); color:#fff; text-decoration:none}
.social a:hover{background:rgba(255,255,255,.22)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.22); margin-top:18px; padding-top:12px; color:#fff; opacity:.92; font-size:.92rem}

/* =================== RESPONSIF =================== */
@media (max-width: 1200px){
  :root{ --container-x: 96px; }
}

@media (max-width: 990px){
  :root{ --container-x: 48px; }
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .art-grid{grid-template-columns:repeat(2, 1fr)}
  .hero-wrap{ grid-template-columns:1fr; }
  .hero-art img{ max-width:440px; }

  .quick-cta .btn{ padding:9px 15px; font-size:0.9rem; }
  .quick-cta .btn.big{ padding:12px 18px; font-size:0.98rem; }

  .support-logos img{ max-width:240px; }
  .cd{ min-width:52px; }
  .num,.dots{ font-size:clamp(1.1rem, 0.7rem + 1.5vw, 1.6rem); }
  .label{ font-size:.76rem; }
}

@media (max-width: 860px){
  :root{ --container-x: 32px; }
  .nav-center, .nav-right{display:none}
  .burger{
    display:grid; place-items:center;
    position:absolute;
    right:max(8px, env(safe-area-inset-right));
    top:50%;
    transform:translateY(-50%);
    width:44px; height:44px;
    padding:0;
  }
  .burger .bar,
  .burger .bar::before,
  .burger .bar::after{ width:28px; }
  .footer-grid{grid-template-columns:1fr; gap:22px}

  .hero-art img{ max-width:420px; }
  .cta-note{ font-size:.92rem; }
  .cd{ min-width:48px; }
  .num,.dots{ font-size:clamp(1rem, 0.75rem + 1.3vw, 1.45rem); }
}

@media (max-width: 640px){
  :root{ --container-x: 22px; }
  .feat-grid{grid-template-columns:1fr}
  .art-grid{grid-template-columns:1fr}
  .t-card{flex:0 0 100%}
  .support-logos img{ max-width:210px; }
  .hero-copy h1{ margin-top:6px; font-size:clamp(1.35rem, 1rem + 1.4vw, 1.7rem); }
  .hero-copy .sub{ font-size:.9rem; line-height:1.6; }

  .quick-cta .btn{ padding:9px 14px; font-size:0.88rem; }
  .quick-cta .btn.big{ padding:11px 16px; font-size:0.95rem; }

  .cd{ min-width:44px; }
  .num,.dots{ font-size:1.25rem; }
  .label{ font-size:.74rem; }
}

@media (max-width: 420px){
  :root{ --container-x: 16px; }
  .hero-art img{ max-width:360px; }

  .quick-cta .btn{ padding:8px 13px; font-size:0.86rem; }
  .quick-cta .btn.big{ padding:10px 15px; font-size:0.92rem; }

  .cd{ min-width:40px; }
  .num,.dots{ font-size:1.15rem; }
}

/* ====== Sentuhan "hover" terasa di perangkat sentuh ====== */
@media (pointer: coarse) {
  .features .card {
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, filter .18s ease;
  }
  .features .card.touch-hover,
  .features .card:active,
  .features .card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
  }
  .features .card.touch-hover .ico,
  .features .card:active .ico,
  .features .card:focus-visible .ico {
    stroke: #09c0d9;
  }
}