*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:#f7f9fc;color:#0d1726}.container{width:min(1180px,calc(100% - 40px));margin:auto}.site-header{position:sticky;top:0;z-index:60;background:rgba(248,250,253,.94);backdrop-filter:blur(16px);border-bottom:1px solid rgba(13,23,38,.07)}.nav-wrap{height:72px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#0d1726}.brand-mark{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#15233a,#1377ff);color:#fff;font-weight:800;font-size:20px}.brand strong{display:block;font-size:15px;letter-spacing:.08em}.brand small{display:block;font-size:8px;letter-spacing:.18em;color:#738196;margin-top:2px}.nav{display:flex;align-items:center;gap:28px}.nav>a{color:#36445a;text-decoration:none;font-size:14px;font-weight:600}.menu-toggle{display:none;border:0;background:none;font-size:22px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:13px;text-decoration:none;font-weight:700;font-size:14px;border:1px solid transparent}.btn-sm{min-height:39px;padding:0 14px;border-radius:10px;font-size:12px}.btn-primary{background:linear-gradient(135deg,#0f69ff,#16a0ff);color:#fff}.btn-secondary{background:#fff;color:#122038;border-color:#dce4ef}.btn-dark{background:#0e1727;color:#fff}.btn-outline{border-color:#d8e1ec;background:#fff;color:#17243a!important}.hero{background:radial-gradient(circle at 72% 20%,rgba(27,166,255,.14),transparent 30%),linear-gradient(180deg,#f9fbff,#f3f7fb);padding:76px 0 82px}.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:58px}.eyebrow{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.18em;color:#1478ff;margin-bottom:15px}.hero h1,.section h2{letter-spacing:-.045em;margin:0}.hero h1{font-size:clamp(46px,6vw,70px);line-height:1.02}.hero h1 span{background:linear-gradient(90deg,#0c72ff,#00a985);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy>p{font-size:17px;line-height:1.72;color:#5b6a80;max-width:670px;margin:24px 0}.hero-actions{display:flex;gap:11px;flex-wrap:wrap}.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}.hero-stats div{padding-top:14px;border-top:1px solid #dbe4ef}.hero-stats strong{display:block}.hero-stats span{font-size:11px;color:#7b8798}.hero-visual{position:relative;min-height:455px;display:grid;place-items:center}.glow{position:absolute;width:78%;height:65%;border-radius:50%;background:rgba(14,119,255,.18);filter:blur(60px)}.device-card{position:relative;z-index:2;width:100%;max-width:515px;border-radius:27px;background:#fff;border:1px solid #eef1f5;box-shadow:0 28px 70px rgba(20,41,73,.16);padding:18px}.card-top{display:flex;gap:6px;border-bottom:1px solid #e9eef5;padding-bottom:14px}.dot{width:8px;height:8px;border-radius:50%}.red{background:#ff6b6b}.yellow{background:#ffc857}.green{background:#2ecc8a}.mini-label{margin-left:auto;font-size:8px;letter-spacing:.18em;color:#8692a3;font-weight:800}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:15px}.dash-box{min-height:114px;border-radius:17px;background:#f2f6fb;padding:15px;display:flex;flex-direction:column;gap:6px}.dash-box.wide{grid-column:1/-1;background:linear-gradient(135deg,#0c1526,#112d52);color:#fff}.dash-box.wide small{color:#7cb8ff}.dash-box strong{font-size:13px}.dash-box small{font-size:10px;color:#7f8da1}.mini-icon{font-size:23px}.bar{height:6px;border-radius:20px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:12px}.bar span{display:block;height:100%;width:82%;background:linear-gradient(90deg,#20dbb4,#3aa7ff)}.section{padding:82px 0}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:45px;margin-bottom:36px}.section-heading.compact{margin-bottom:28px}.section-heading h2,.section h2{font-size:clamp(34px,4vw,47px);line-height:1.12}.section-heading>p{max-width:390px;color:#6d7b90;line-height:1.65}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.product-card{position:relative;background:#fff;border:1px solid #e5ebf2;border-radius:21px;padding:23px;display:flex;flex-direction:column;min-height:390px}.product-card.featured{border-color:#b7d4ff}.product-icon{width:56px;height:56px;border-radius:16px;background:#eef5ff;display:grid;place-items:center;font-size:27px;margin-bottom:18px;overflow:hidden}.image-icon img{width:100%;height:100%;object-fit:cover}.pill{position:absolute;right:18px;top:18px;font-size:9px;font-weight:800;background:#e8f2ff;color:#126ef7;padding:7px 9px;border-radius:30px}.product-card h3{margin:0 0 10px;font-size:20px}.product-card p{margin:0;color:#65748a;line-height:1.62;font-size:13.5px}.product-card ul{margin:18px 0 21px;padding-left:18px;color:#47566b;font-size:12.5px;line-height:1.8}.card-actions{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}.text-link{font-size:11.5px;font-weight:700;color:#1477ff;text-decoration:none}.badge-soft{display:inline-flex;background:#edf3f8;color:#4b5c73;padding:7px 9px;border-radius:9px;font-size:10px;font-weight:700}.section-alt{background:#0f1828;color:#fff}.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.solution-card{padding:23px;border:1px solid rgba(255,255,255,.09);border-radius:19px;background:rgba(255,255,255,.035)}.solution-card span{font-size:10px;color:#44b7ff;font-weight:800}.solution-card h3{font-size:19px}.solution-card p{color:#9baabd;font-size:13px}.about-card{background:linear-gradient(135deg,#eef6ff,#f6fbff);border:1px solid #ddebf8;border-radius:27px;padding:44px;display:grid;grid-template-columns:1fr 1fr;gap:52px}.about-card p{color:#65748a;line-height:1.72}.about-points{display:grid;grid-template-columns:1fr 1fr;gap:11px}.about-points div{padding:17px;border-radius:15px;background:#fff;border:1px solid #e6edf5}.about-points span{font-size:11px;color:#78869a}.contact{padding-top:20px}.contact-card{background:linear-gradient(135deg,#086dff,#07386f 64%,#061a34);color:#fff;border-radius:29px;padding:46px;display:flex;align-items:center;justify-content:space-between;gap:40px}.contact-card h2{font-size:clamp(34px,4vw,48px)}.contact-card p{color:#c8dcf7}.eyebrow.light{color:#8cd5ff}.contact-actions{display:flex;flex-direction:column;gap:10px;min-width:245px}.btn-white{background:#fff;color:#0d4ea0}.btn-ghost-white{border-color:rgba(255,255,255,.3);color:#fff}.footer-grid{min-height:105px;display:flex;align-items:center;justify-content:space-between;gap:22px}.footer-grid p,.footer-links a{font-size:11px;color:#8793a3}.footer-links{display:flex;gap:20px}
@media(max-width:960px){.nav{position:absolute;left:20px;right:20px;top:64px;display:none;flex-direction:column;align-items:stretch;background:#fff;border:1px solid #e5ebf2;border-radius:18px;padding:18px}.nav.open{display:flex}.menu-toggle{display:block}.hero-grid{grid-template-columns:1fr}.product-grid,.solution-grid{grid-template-columns:1fr 1fr}.section-heading{flex-direction:column;align-items:flex-start}.about-card{grid-template-columns:1fr}.contact-card{flex-direction:column;align-items:flex-start}.contact-actions{width:100%;flex-direction:row}.contact-actions .btn{flex:1}}
@media(max-width:640px){.container{width:min(100% - 24px,1180px)}.nav-wrap{height:62px}.hero{padding:32px 0 50px}.hero h1{font-size:39px}.hero-copy>p{font-size:15px}.hero-stats{grid-template-columns:1fr 1fr}.hero-visual{min-height:315px}.section{padding:54px 0}.product-grid,.solution-grid,.about-points{grid-template-columns:1fr}.product-card{min-height:0}.about-card{padding:26px 20px}.contact-card{padding:28px 20px}.contact-actions{flex-direction:column}.footer-grid{flex-direction:column;align-items:flex-start;padding:26px 0}}


/* V1.2.1 — clickable product cards */
.clickable-card{
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.clickable-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 42px rgba(24,45,75,.10);
  border-color:#c9d9ee;
}
.clickable-card:focus-visible{
  outline:3px solid rgba(20,119,255,.22);
  outline-offset:3px;
}
.clickable-card a,
.clickable-card button{
  position:relative;
  z-index:2;
}

/* V1.3 FINAL BRANDING */
.brand-logo-img{
  display:block;
  width:188px;
  max-height:50px;
  object-fit:contain;
  object-position:left center;
}
.footer-brand .brand-logo-img{width:170px}
.mini-img{
  width:28px;height:28px;display:block;
  border-radius:8px;overflow:hidden
}
.mini-img img{
  width:100%;height:100%;object-fit:cover;display:block
}
.product-icon.image-icon{
  background:transparent;padding:0
}
.product-icon.image-icon img{
  width:100%;height:100%;object-fit:cover;
  border-radius:16px;display:block
}
@media(max-width:640px){
  .brand-logo-img{width:150px;max-height:40px}
  .footer-brand .brand-logo-img{width:150px}
}

/* V1.4 RC FINALIZATION */
@media(min-width:641px){
  .brand-logo-img{
    width:208px!important;
    max-width:208px!important;
    height:52px!important;
    max-height:52px!important;
  }
  .footer-brand .brand-logo-img{
    width:184px!important;
    max-width:184px!important;
  }
}
.footer-grid{
  border-top:1px solid rgba(13,23,38,.06);
}
.footer-links a:hover{
  color:#1477ff;
}
@media(max-width:640px){
  .site-header{backdrop-filter:blur(12px)}
  .nav-wrap{height:64px}
  .contact-card{border-radius:24px}
  .footer-grid{gap:14px}
}

/* V1.4.1 CONTACT EMAIL INTEGRATION */
.btn-email{
  background:#ffffff;
  color:#0b4f9d;
  border-color:rgba(255,255,255,.65);
  font-size:12px;
}
.btn-email-secondary{
  background:rgba(255,255,255,.08);
  color:#ffffff;
  border-color:rgba(255,255,255,.28);
  font-size:12px;
}
.btn-email:hover,
.btn-email-secondary:hover{
  transform:translateY(-1px);
}
.footer-contact-block{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:7px;
}
.footer-contact-email{
  font-size:11px;
  color:#5f6f84;
  text-decoration:none;
}
.footer-contact-email:hover{
  color:#1477ff;
}
@media(max-width:960px){
  .contact-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:640px){
  .contact-actions{
    grid-template-columns:1fr!important;
  }
  .footer-contact-block{
    align-items:flex-start;
  }
}

/* V1.4.3 FINAL UI POLISH */
.about-grid .mini-card,
.about-card .mini-card,
.about-grid > div,
.about-card > div{
  min-width:0;
}

.about-grid .mini-card strong,
.about-card .mini-card strong,
.about-grid > div > strong,
.about-card > div > strong{
  display:block!important;
  margin-bottom:6px!important;
  line-height:1.25!important;
}

.about-grid .mini-card small,
.about-card .mini-card small,
.about-grid > div > small,
.about-card > div > small{
  display:block!important;
  line-height:1.45!important;
  color:#6b7b91!important;
}

.about-grid .mini-card,
.about-card .mini-card{
  padding:18px!important;
}

@media(max-width:640px){
  .about-grid .mini-card,
  .about-card .mini-card{
    padding:16px!important;
  }
}

/* V1.4.4 ABOUT CARDS FIX */
.about-points{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.about-points > div{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-height:96px;
  padding:18px 20px;
  box-sizing:border-box;
}
.about-points > div > strong{
  display:block;
  margin-bottom:7px;
  line-height:1.2;
}
.about-points > div > span{
  display:block;
  line-height:1.45;
  color:#6b7b91;
}
@media(max-width:640px){
  .about-points{
    grid-template-columns:1fr;
  }
}

/* V1.5 PRODUCT EXPANSION */
.product-card .product-icon{
  overflow:hidden;
}
.product-card .pill{
  white-space:nowrap;
}
@media(min-width:1200px){
  .product-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:959px){
  .product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:640px){
  .product-grid{
    grid-template-columns:1fr;
  }
}

/* V1.5.1 PRODUCT FILTER */
.product-filter-wrap{
  margin:0 0 26px;
  padding:18px 20px;
  background:#ffffff;
  border:1px solid #dfe8f3;
  border-radius:20px;
  box-shadow:0 10px 30px rgba(18,38,63,.04);
}
.product-filter-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:14px;
}
.product-filter-head > div{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.filter-label{
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  color:#1477ff;
}
.product-filter-head strong{
  font-size:17px;
  line-height:1.25;
  color:#0d1726;
}
.filter-count{
  font-size:12px;
  font-weight:700;
  color:#617188;
  white-space:nowrap;
}
.product-filter-bar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.filter-btn{
  appearance:none;
  border:1px solid #dbe6f2;
  background:#f5f8fc;
  color:#3b4a5f;
  border-radius:999px;
  padding:9px 14px;
  font:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:.18s ease;
}
.filter-btn:hover{
  border-color:#a9c9ef;
  color:#0b63ce;
  transform:translateY(-1px);
}
.filter-btn.active{
  background:#1477ff;
  color:#fff;
  border-color:#1477ff;
  box-shadow:0 7px 18px rgba(20,119,255,.20);
}
.product-card.filter-hidden{
  display:none!important;
}
.product-card.filter-visible{
  animation:garasiFilterIn .22s ease both;
}
@keyframes garasiFilterIn{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:translateY(0)}
}
@media(max-width:640px){
  .product-filter-wrap{
    padding:15px;
    border-radius:17px;
  }
  .product-filter-head{
    align-items:flex-start;
  }
  .product-filter-bar{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:4px;
    scrollbar-width:thin;
  }
  .filter-btn{
    flex:0 0 auto;
  }
}

/* V1.5.2 NEW PRODUCT ICON POLISH
   LOCK: applies only to icons injected into the 9 new products */
.product-icon-img-v152{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:contain!important;
  border-radius:inherit!important;
}

/* V1.5.3 RUMAH TANGGA APK DOWNLOAD */
.btn-apk,
.btn-apk-detail{
  background:#1477ff!important;
  color:#fff!important;
  border:1px solid #1477ff!important;
  box-shadow:0 8px 20px rgba(20,119,255,.18);
}
.btn-apk:hover,
.btn-apk-detail:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(20,119,255,.24);
}
.btn-apk-detail{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

/* =========================================================
   GARASI V2.0 MODERN TECH REFRESH
   Homepage visual refresh only
   ========================================================= */

:root{
  --gdi-blue:#1477ff;
  --gdi-blue-2:#0b5ee8;
  --gdi-cyan:#18c8ff;
  --gdi-navy:#081426;
  --gdi-navy-2:#0d1d33;
  --gdi-soft:#f5f8fc;
  --gdi-border:#dce6f2;
  --gdi-text:#0c1728;
  --gdi-muted:#66758a;
}

html{
  scroll-behavior:smooth;
}

body{
  background:
    radial-gradient(circle at 85% 8%, rgba(24,200,255,.08), transparent 24rem),
    radial-gradient(circle at 15% 16%, rgba(20,119,255,.07), transparent 28rem),
    #f7f9fc;
}

.site-header{
  background:rgba(255,255,255,.82)!important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(210,223,238,.8)!important;
  position:sticky!important;
  top:0;
  z-index:999;
}

.site-header .nav-wrap{
  min-height:72px;
}

.site-header .nav a{
  transition:.18s ease;
}

.site-header .nav a:hover{
  color:var(--gdi-blue)!important;
}

.tech-trust-bar{
  background:linear-gradient(90deg,#0a1a30,#0d2545 55%,#0a1a30);
  color:#dbeaff;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.tech-trust-inner{
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
}

.tech-trust-dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:#31d6a4;
  box-shadow:0 0 0 5px rgba(49,214,164,.10);
}

.hero{
  position:relative;
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 76% 36%, rgba(20,119,255,.12), transparent 22rem),
    radial-gradient(circle at 85% 42%, rgba(24,200,255,.09), transparent 18rem);
}

.hero > .container{
  position:relative;
  z-index:1;
}

.hero h1{
  letter-spacing:-.04em;
  text-wrap:balance;
}

.hero p{
  max-width:650px;
}

.hero-actions .btn{
  min-height:46px;
  border-radius:13px!important;
  transition:.2s ease;
}

.hero-actions .btn:hover{
  transform:translateY(-2px);
}

.hero-tech-chips{
  margin-top:20px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.hero-tech-chips span{
  padding:8px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(194,211,230,.86);
  color:#31445e;
  font-size:11px;
  font-weight:750;
  box-shadow:0 7px 20px rgba(31,53,82,.04);
  backdrop-filter:blur(8px);
}

.hero-panel,
.hero-visual,
.mockup,
.device,
.dashboard-preview{
  box-shadow:0 30px 70px rgba(27,61,100,.12)!important;
}

#produk,
.products-section,
.section-products{
  position:relative;
}

#produk::before,
.products-section::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#cfe0f3,transparent);
}

.featured-products-v2{
  margin:0 0 22px;
  padding:20px;
  border-radius:22px;
  background:
    linear-gradient(145deg,rgba(8,20,38,.98),rgba(15,42,77,.98));
  box-shadow:0 22px 55px rgba(10,28,52,.16);
  border:1px solid rgba(255,255,255,.07);
  overflow:hidden;
  position:relative;
}

.featured-products-v2::after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  border-radius:50%;
  right:-90px;
  top:-120px;
  background:radial-gradient(circle,rgba(24,200,255,.16),transparent 65%);
  pointer-events:none;
}

.featured-v2-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:15px;
  position:relative;
  z-index:1;
}

.featured-kicker{
  font-size:10px;
  font-weight:850;
  letter-spacing:.15em;
  color:#53cfff;
}

.featured-v2-head h3{
  color:#fff;
  margin:4px 0 0;
  font-size:20px;
}

.featured-note{
  color:#9eb7d4;
  font-size:11px;
}

.featured-v2-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  position:relative;
  z-index:1;
}

.featured-v2-card{
  text-decoration:none;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.08);
  transition:.2s ease;
}

.featured-v2-card:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.10);
  border-color:rgba(83,207,255,.28);
}

.featured-v2-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(135deg,#1477ff,#18c8ff);
  color:#fff;
  font-weight:850;
  font-size:11px;
}

.featured-v2-card strong{
  display:block;
  color:#fff;
  font-size:13px;
  margin-bottom:3px;
}

.featured-v2-card div span{
  display:block;
  color:#9eb7d4;
  font-size:10.5px;
  line-height:1.45;
}

.featured-v2-card b{
  color:#6dd8ff;
  font-size:18px;
}

.product-filter-wrap{
  background:rgba(255,255,255,.86)!important;
  backdrop-filter:blur(14px);
  border:1px solid rgba(208,222,238,.95)!important;
  box-shadow:0 18px 45px rgba(27,61,100,.07)!important;
}

.product-search-v2{
  position:relative;
  display:flex;
  align-items:center;
  margin:4px 0 14px;
}

.product-search-v2 input{
  width:100%;
  min-height:44px;
  border:1px solid #d9e5f1;
  background:#f7faff;
  border-radius:14px;
  padding:0 42px 0 40px;
  outline:none;
  font:inherit;
  font-size:12.5px;
  color:#17253a;
  transition:.18s ease;
}

.product-search-v2 input:focus{
  background:#fff;
  border-color:#87baff;
  box-shadow:0 0 0 4px rgba(20,119,255,.08);
}

.product-search-icon{
  position:absolute;
  left:14px;
  color:#70839b;
  font-size:17px;
  z-index:2;
}

#productSearchClearV2{
  position:absolute;
  right:10px;
  width:28px;
  height:28px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#718198;
  font-size:18px;
  cursor:pointer;
}

#productSearchClearV2:hover{
  background:#eaf2fb;
  color:#1d4f88;
}

.filter-btn{
  border-radius:999px!important;
  transition:.18s ease!important;
}

.filter-btn.active{
  background:linear-gradient(135deg,#1477ff,#0a64e8)!important;
  box-shadow:0 8px 20px rgba(20,119,255,.20)!important;
}

.product-card{
  background:rgba(255,255,255,.92)!important;
  border:1px solid rgba(212,224,238,.96)!important;
  box-shadow:0 12px 30px rgba(27,61,100,.055)!important;
  border-radius:20px!important;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease!important;
  overflow:hidden;
}

.product-card:hover{
  transform:translateY(-5px);
  box-shadow:0 24px 50px rgba(27,61,100,.11)!important;
  border-color:#b9d6f7!important;
}

.product-card h3{
  letter-spacing:-.02em;
}

.product-card .btn{
  border-radius:11px!important;
}

.product-card .pill,
.product-card .badge-soft{
  border-radius:999px!important;
}

.section-heading h2,
#produk h2{
  letter-spacing:-.035em;
}

.cta-card{
  background:
    radial-gradient(circle at 82% 18%,rgba(24,200,255,.16),transparent 18rem),
    linear-gradient(135deg,#071425,#0e2a4b)!important;
  box-shadow:0 28px 70px rgba(7,20,37,.18)!important;
  border:1px solid rgba(255,255,255,.07)!important;
}

.footer{
  border-top:1px solid #dce6f2;
}

.v2-search-empty{
  display:none;
  grid-column:1/-1;
  padding:28px;
  border-radius:18px;
  background:#fff;
  border:1px dashed #cbd9e8;
  color:#66758a;
  text-align:center;
  font-size:13px;
}

.v2-search-empty.show{
  display:block;
}

@media(max-width:900px){
  .featured-v2-grid{
    grid-template-columns:1fr;
  }
  .featured-v2-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .featured-note{
    display:none;
  }
}

@media(max-width:640px){
  .tech-trust-inner{
    justify-content:flex-start;
    overflow-x:auto;
    white-space:nowrap;
    padding-top:8px;
    padding-bottom:8px;
  }
  .featured-products-v2{
    padding:16px;
    border-radius:18px;
  }
  .featured-v2-head h3{
    font-size:18px;
  }
  .hero-tech-chips{
    gap:6px;
  }
  .hero-tech-chips span{
    font-size:10px;
    padding:7px 9px;
  }
  .product-card:hover{
    transform:none;
  }
}

/* =========================================================
   GARASI V2.0.1 HERO NAVBAR POLISH
   Scope: navbar + hero polish only
   ========================================================= */

.site-header .nav-wrap{
  min-height:64px!important;
  padding-top:4px!important;
  padding-bottom:4px!important;
}

.site-header .brand{
  display:flex;
  align-items:center;
}

.site-header .brand-logo-img{
  width:auto!important;
  height:46px!important;
  object-fit:contain!important;
}

.site-header .nav{
  gap:24px!important;
}

.site-header .nav a{
  font-size:12px!important;
  font-weight:650!important;
}

.site-header .nav .btn,
.site-header .nav a:last-child{
  border-radius:12px!important;
}

.tech-trust-bar{
  position:relative;
  z-index:3;
}

.hero{
  padding-top:64px!important;
  padding-bottom:58px!important;
}

.hero .container,
.hero-grid{
  align-items:center!important;
}

.hero h1{
  max-width:680px!important;
  line-height:1.04!important;
}

.hero p{
  margin-top:18px!important;
}

.hero-tech-chips{
  margin-top:16px!important;
}

.hero .stats,
.hero-stats{
  margin-top:28px!important;
}

.hero::after{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  right:7%;
  top:14%;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(20,119,255,.14) 0%,
    rgba(24,200,255,.08) 38%,
    transparent 70%
  );
  filter:blur(8px);
  pointer-events:none;
  z-index:0;
}

.hero-visual,
.hero-panel,
.mockup,
.dashboard-preview,
.device{
  position:relative!important;
  z-index:1!important;
  transform:translateY(-4px);
  filter:drop-shadow(0 28px 45px rgba(25,57,94,.14));
}

.hero-visual::before,
.hero-panel::before,
.mockup::before,
.dashboard-preview::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:32px;
  background:linear-gradient(
    145deg,
    rgba(20,119,255,.12),
    rgba(24,200,255,.05),
    transparent 62%
  );
  z-index:-1;
  pointer-events:none;
  filter:blur(14px);
}

#produk,
.products-section,
.section-products{
  margin-top:0!important;
}

.hero + section,
.hero + .section{
  margin-top:0!important;
}

@media(max-width:900px){
  .site-header .brand-logo-img{
    height:42px!important;
  }

  .hero{
    padding-top:44px!important;
    padding-bottom:42px!important;
  }

  .hero-visual,
  .hero-panel,
  .mockup,
  .dashboard-preview,
  .device{
    transform:none;
  }

  .hero::after{
    width:360px;
    height:360px;
    right:-60px;
    top:24%;
  }
}

@media(max-width:640px){
  .site-header .nav-wrap{
    min-height:60px!important;
  }

  .site-header .brand-logo-img{
    height:38px!important;
  }

  .hero{
    padding-top:34px!important;
    padding-bottom:34px!important;
  }

  .hero h1{
    line-height:1.08!important;
  }

  .tech-trust-inner{
    min-height:32px!important;
  }
}

/* =========================================================
   GARASI V2.1.1 PRODUCT FILTER REFRESH
   Fixed safe version
   ========================================================= */

.featured-products-v2{
  margin-bottom:18px!important;
  border-radius:24px!important;
  padding:22px!important;
}

.featured-v2-grid{
  gap:12px!important;
}

.featured-v2-card{
  min-height:82px;
  background:rgba(255,255,255,.075)!important;
  border:1px solid rgba(255,255,255,.10)!important;
}

.featured-v2-card:hover{
  box-shadow:0 14px 32px rgba(0,0,0,.12);
}

.product-filter-wrap{
  border-radius:22px!important;
  padding:18px 20px!important;
  margin-bottom:16px!important;
}

.product-filter-head{
  margin-bottom:12px!important;
}

.product-filter-head strong{
  font-size:18px!important;
  letter-spacing:-.015em;
}

.filter-count{
  padding:7px 10px;
  border-radius:999px;
  background:#f0f5fb;
  color:#52647c!important;
  border:1px solid #dfebf7;
}

.product-search-v2{
  margin:4px 0 12px!important;
}

.product-search-v2 input{
  min-height:46px!important;
  background:#f8fbff!important;
  border-radius:15px!important;
}

.product-filter-bar{
  gap:7px!important;
}

.filter-btn{
  min-height:36px;
  padding:8px 13px!important;
  background:#f8fafc!important;
  border-color:#dce6f1!important;
  color:#40526a!important;
}

.filter-btn:hover{
  background:#eef5fd!important;
  border-color:#bcd5f2!important;
}

.filter-btn.active{
  color:#fff!important;
  background:linear-gradient(135deg,#1477ff,#0b66e8 60%,#0aa8cb)!important;
  border-color:transparent!important;
}

.product-result-meta-v21{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  margin:22px 0 14px;
}

.product-result-meta-v21 > div{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.product-result-kicker{
  font-size:10px;
  font-weight:850;
  letter-spacing:.14em;
  color:#1477ff;
}

.product-result-meta-v21 strong{
  color:#0b1728;
  font-size:18px;
  letter-spacing:-.02em;
}

#productResultCountV21{
  font-size:11px;
  font-weight:700;
  color:#728197;
  white-space:nowrap;
}

.product-grid{
  gap:16px!important;
}

.product-card{
  position:relative;
  padding:20px!important;
  min-height:340px;
  display:flex!important;
  flex-direction:column;
}

.product-card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:linear-gradient(90deg,transparent,transparent,transparent);
  transition:.22s ease;
}

.product-card:hover::before{
  background:linear-gradient(90deg,#1477ff,#18c8ff);
}

.product-card .product-icon{
  width:50px!important;
  height:50px!important;
  border-radius:15px!important;
  margin-bottom:14px!important;
  box-shadow:0 8px 20px rgba(27,61,100,.09);
}

.product-card h3{
  font-size:18px!important;
  line-height:1.22!important;
  margin-bottom:9px!important;
}

.product-card > p{
  color:#607086!important;
  line-height:1.62!important;
  min-height:58px;
}

.product-card ul{
  margin-top:10px!important;
  margin-bottom:18px!important;
  color:#40516a;
}

.product-card ul li{
  margin-bottom:5px;
}

.product-card .card-actions{
  margin-top:auto!important;
  padding-top:8px;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.product-card .btn{
  min-height:36px;
  padding:8px 13px!important;
  font-size:11px!important;
  font-weight:750!important;
}

.product-card .badge-soft,
.product-card .pill{
  font-size:9.5px!important;
  font-weight:750!important;
}

.product-card .pill{
  position:absolute;
  top:14px;
  right:14px;
}

.product-card[data-href="school-pickup/"]{
  border-color:#abd0ff!important;
  box-shadow:0 18px 44px rgba(20,119,255,.09)!important;
}

.product-card[data-href="rumah-tangga/"] .btn-apk{
  background:linear-gradient(135deg,#1477ff,#0c68e8)!important;
}

.product-card[data-href="rumah-tangga/"] .btn-apk::before{
  content:"↓";
  margin-right:5px;
  font-weight:900;
}

.v2-search-empty{
  border-radius:20px!important;
  padding:34px!important;
  background:linear-gradient(180deg,#fff,#f8fbff)!important;
}

@media(max-width:959px){
  .product-card{
    min-height:320px;
  }
}

@media(max-width:640px){
  .featured-products-v2{
    padding:16px!important;
  }

  .product-filter-wrap{
    padding:15px!important;
    border-radius:18px!important;
  }

  .product-result-meta-v21{
    align-items:flex-start;
    flex-direction:column;
    margin-top:18px;
  }

  .product-card{
    min-height:0;
    padding:17px!important;
  }

  .product-card > p{
    min-height:0;
  }

  .product-card .pill{
    top:12px;
    right:12px;
  }
}

/* =========================================================
   GARASI V2.2 SOLUTION ABOUT CAPABILITY
   ========================================================= */

.v22-solution-suite{
  padding:78px 0 72px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 8%,rgba(20,119,255,.07),transparent 24rem),
    radial-gradient(circle at 88% 24%,rgba(24,200,255,.07),transparent 22rem),
    linear-gradient(180deg,#f7f9fc,#ffffff 48%,#f8fbff);
}

.v22-solution-suite::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(13,40,75,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(13,40,75,.025) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom,transparent,black 12%,black 70%,transparent);
  pointer-events:none;
}

.v22-solution-suite > .container{
  position:relative;
  z-index:1;
}

.v22-section-head{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:46px;
  align-items:end;
  margin-bottom:26px;
}

.v22-kicker{
  display:inline-block;
  font-size:10px;
  font-weight:850;
  letter-spacing:.15em;
  color:#1477ff;
  margin-bottom:8px;
}

.v22-section-head h2,
.v22-capability-copy h2,
.v22-about-copy h2{
  margin:0;
  color:#0b1728;
  font-size:clamp(30px,3.2vw,48px);
  line-height:1.06;
  letter-spacing:-.045em;
  text-wrap:balance;
}

.v22-section-head p,
.v22-capability-copy p,
.v22-about-copy p{
  margin:0;
  color:#68788f;
  font-size:14px;
  line-height:1.75;
}

.v22-solution-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:28px;
}

.v22-solution-card{
  position:relative;
  min-height:260px;
  padding:22px;
  border-radius:22px;
  background:rgba(255,255,255,.91);
  border:1px solid #dce7f3;
  box-shadow:0 14px 34px rgba(28,60,98,.055);
  overflow:hidden;
  transition:.22s ease;
}

.v22-solution-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 48px rgba(28,60,98,.10);
  border-color:#b8d6f7;
}

.v22-solution-card::after{
  content:"";
  position:absolute;
  width:130px;
  height:130px;
  right:-48px;
  bottom:-58px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(20,119,255,.10),transparent 68%);
}

.v22-card-no{
  position:absolute;
  top:18px;
  right:18px;
  font-size:10px;
  font-weight:800;
  color:#8ca0b9;
}

.v22-card-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:15px;
  margin-bottom:18px;
  background:linear-gradient(135deg,#1477ff,#18c8ff);
  color:#fff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.05em;
  box-shadow:0 10px 24px rgba(20,119,255,.16);
}

.v22-solution-card h3{
  margin:0 0 9px;
  color:#0e1b2e;
  font-size:18px;
  letter-spacing:-.02em;
}

.v22-solution-card p{
  margin:0;
  color:#66758a;
  font-size:12px;
  line-height:1.65;
}

.v22-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:18px;
}

.v22-tags span{
  padding:6px 8px;
  border-radius:999px;
  background:#f2f7fc;
  border:1px solid #e0eaf4;
  color:#50647d;
  font-size:9.5px;
  font-weight:750;
}

.v22-capability-panel{
  margin:28px 0;
  padding:30px;
  border-radius:28px;
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:34px;
  align-items:center;
  background:
    radial-gradient(circle at 88% 12%,rgba(24,200,255,.14),transparent 18rem),
    linear-gradient(135deg,#081629,#0e2949);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 28px 60px rgba(9,25,47,.15);
}

.v22-capability-copy .v22-kicker{
  color:#5ad9ff;
}

.v22-capability-copy h2{
  color:#fff;
  font-size:clamp(28px,3vw,42px);
}

.v22-capability-copy p{
  margin-top:14px;
  color:#a9bdd4;
}

.v22-capability-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.v22-capability-item{
  padding:16px;
  border-radius:16px;
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.08);
  min-height:88px;
  transition:.18s ease;
}

.v22-capability-item:hover{
  background:rgba(255,255,255,.095);
  transform:translateY(-2px);
}

.v22-capability-item strong{
  display:block;
  color:#fff;
  font-size:13px;
  margin-bottom:5px;
}

.v22-capability-item span{
  display:block;
  color:#94abc5;
  font-size:10.5px;
  line-height:1.5;
}

.v22-about-panel{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:34px;
  align-items:stretch;
  margin-top:28px;
}

.v22-about-copy{
  padding:30px;
  border-radius:26px;
  background:#fff;
  border:1px solid #dce7f3;
  box-shadow:0 14px 38px rgba(27,61,100,.06);
}

.v22-about-copy h2{
  font-size:clamp(28px,3vw,42px);
}

.v22-about-copy p{
  margin-top:14px;
}

.v22-about-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:24px;
}

.v22-about-metrics div{
  padding:14px;
  border-radius:16px;
  background:#f7faff;
  border:1px solid #e2ebf5;
}

.v22-about-metrics strong{
  display:block;
  color:#0b1728;
  font-size:22px;
  line-height:1;
  margin-bottom:5px;
}

.v22-about-metrics span{
  color:#718197;
  font-size:9.5px;
  line-height:1.35;
}

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

.v22-flow-step{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:14px;
  align-items:center;
  padding:18px;
  border-radius:19px;
  background:#fff;
  border:1px solid #dce7f3;
  box-shadow:0 10px 28px rgba(27,61,100,.045);
  transition:.18s ease;
}

.v22-flow-step:hover{
  transform:translateX(4px);
  border-color:#bfd8f4;
}

.v22-flow-step > span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:linear-gradient(135deg,#1477ff,#0ba5cb);
  color:#fff;
  font-weight:850;
  font-size:10px;
}

.v22-flow-step strong{
  display:block;
  color:#0d1b2e;
  font-size:15px;
  margin-bottom:3px;
}

.v22-flow-step p{
  margin:0;
  color:#6f7f93;
  font-size:11px;
  line-height:1.5;
}

.v22-reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s ease,transform .55s ease;
}

.v22-reveal.v22-in{
  opacity:1;
  transform:none;
}

@media(max-width:1000px){
  .v22-solution-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .v22-capability-panel,
  .v22-about-panel{
    grid-template-columns:1fr;
  }
}

@media(max-width:760px){
  .v22-solution-suite{
    padding:54px 0 50px;
  }

  .v22-section-head{
    grid-template-columns:1fr;
    gap:14px;
    align-items:start;
  }

  .v22-solution-grid{
    grid-template-columns:1fr;
  }

  .v22-capability-panel,
  .v22-about-copy{
    padding:22px;
    border-radius:22px;
  }

  .v22-capability-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:520px){
  .v22-capability-grid{
    grid-template-columns:1fr;
  }

  .v22-about-metrics{
    grid-template-columns:1fr;
  }

  .v22-flow-step{
    grid-template-columns:46px 1fr;
    padding:15px;
  }
}

/* =========================================================
   GARASI V2.2.1 SECTION REPLACEMENT
   ========================================================= */

.v221-solution{
  padding:78px 0 70px;
  background:
    radial-gradient(circle at 12% 10%,rgba(20,119,255,.08),transparent 23rem),
    radial-gradient(circle at 88% 16%,rgba(24,200,255,.07),transparent 21rem),
    linear-gradient(180deg,#071425,#0c2039 58%,#0a1a30);
  color:#fff;
  position:relative;
  overflow:hidden;
}

.v221-solution::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:36px 36px;
  pointer-events:none;
}

.v221-solution > .container,
.v221-about > .container{
  position:relative;
  z-index:1;
}

.v221-section-head{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
  gap:42px;
  align-items:end;
  margin-bottom:28px;
}

.v221-kicker{
  display:inline-block;
  font-size:10px;
  font-weight:850;
  letter-spacing:.15em;
  color:#38cfff;
  margin-bottom:8px;
}

.v221-section-head h2,
.v221-capability-copy h2,
.v221-about-copy h2{
  margin:0;
  font-size:clamp(30px,3.2vw,48px);
  line-height:1.06;
  letter-spacing:-.045em;
  text-wrap:balance;
}

.v221-section-head p{
  margin:0;
  color:#9eb3cc;
  line-height:1.75;
  font-size:13px;
}

.v221-solution-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.v221-solution-card{
  position:relative;
  min-height:250px;
  padding:22px;
  border-radius:22px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.09);
  transition:.2s ease;
  overflow:hidden;
}

.v221-solution-card:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.085);
  border-color:rgba(56,207,255,.23);
}

.v221-number{
  position:absolute;
  right:18px;
  top:18px;
  color:#7993af;
  font-size:10px;
  font-weight:850;
}

.v221-icon{
  width:48px;
  height:48px;
  border-radius:15px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
  background:linear-gradient(135deg,#1477ff,#18c8ff);
  color:#fff;
  font-size:10px;
  font-weight:900;
  box-shadow:0 12px 28px rgba(20,119,255,.18);
}

.v221-solution-card h3{
  color:#fff;
  margin:0 0 9px;
  font-size:17px;
}

.v221-solution-card p{
  color:#a8bad0;
  margin:0;
  font-size:11.5px;
  line-height:1.65;
}

.v221-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:17px;
}

.v221-tags span{
  padding:6px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.075);
  color:#c0d0e2;
  font-size:9px;
  font-weight:700;
}

.v221-capability{
  margin-top:22px;
  padding:28px;
  border-radius:26px;
  background:
    radial-gradient(circle at 88% 8%,rgba(24,200,255,.13),transparent 16rem),
    rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.09);
  display:grid;
  grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
  gap:30px;
  align-items:center;
}

.v221-capability-copy h2{
  color:#fff;
  font-size:clamp(27px,2.7vw,40px);
}

.v221-capability-copy p{
  color:#9db3cb;
  font-size:12px;
  line-height:1.7;
  margin:13px 0 0;
}

.v221-capability-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}

.v221-capability-grid > div{
  padding:15px;
  border-radius:15px;
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.075);
}

.v221-capability-grid strong{
  display:block;
  color:#fff;
  font-size:12px;
  margin-bottom:4px;
}

.v221-capability-grid span{
  display:block;
  color:#90a7c0;
  font-size:9.7px;
  line-height:1.45;
}

.v221-about{
  padding:72px 0;
  background:
    radial-gradient(circle at 10% 20%,rgba(20,119,255,.06),transparent 22rem),
    linear-gradient(180deg,#f7faff,#fff);
}

.v221-about-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:28px;
  align-items:stretch;
}

.v221-about-copy{
  padding:30px;
  border-radius:26px;
  background:#fff;
  border:1px solid #dce7f3;
  box-shadow:0 16px 42px rgba(27,61,100,.06);
}

.v221-about-copy .v221-kicker{
  color:#1477ff;
}

.v221-about-copy h2{
  color:#0b1728;
  font-size:clamp(28px,3vw,42px);
}

.v221-about-copy p{
  color:#68788f;
  font-size:13px;
  line-height:1.75;
  margin:14px 0 0;
}

.v221-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin-top:24px;
}

.v221-metrics > div{
  padding:14px;
  border-radius:15px;
  background:#f6f9fd;
  border:1px solid #e1eaf4;
}

.v221-metrics strong{
  display:block;
  color:#0d1a2d;
  font-size:18px;
  margin-bottom:4px;
}

.v221-metrics span{
  color:#75849a;
  font-size:9px;
}

.v221-delivery{
  display:grid;
  gap:10px;
}

.v221-delivery article{
  display:grid;
  grid-template-columns:50px 1fr;
  gap:14px;
  align-items:center;
  padding:18px;
  border-radius:18px;
  background:#fff;
  border:1px solid #dce7f3;
  box-shadow:0 10px 26px rgba(27,61,100,.045);
  transition:.18s ease;
}

.v221-delivery article:hover{
  transform:translateX(4px);
  border-color:#bcd7f5;
}

.v221-delivery article > span{
  width:42px;
  height:42px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#1477ff,#0aa8cb);
  color:#fff;
  font-size:10px;
  font-weight:850;
}

.v221-delivery strong{
  display:block;
  color:#0c192b;
  font-size:14px;
  margin-bottom:3px;
}

.v221-delivery p{
  margin:0;
  color:#708096;
  font-size:10.5px;
  line-height:1.5;
}

.v221-reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .5s ease,transform .5s ease;
}

.v221-reveal.v221-in{
  opacity:1;
  transform:none;
}

@media(max-width:1000px){
  .v221-solution-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .v221-capability,
  .v221-about-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:760px){
  .v221-solution{
    padding:56px 0;
  }

  .v221-section-head{
    grid-template-columns:1fr;
    gap:14px;
  }

  .v221-solution-grid{
    grid-template-columns:1fr;
  }

  .v221-capability-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .v221-about{
    padding:54px 0;
  }
}

@media(max-width:520px){
  .v221-capability{
    padding:20px;
  }

  .v221-capability-grid,
  .v221-metrics{
    grid-template-columns:1fr;
  }

  .v221-about-copy{
    padding:22px;
  }
}

/* =========================================================
   GARASI V2.3 FINAL POLISH
   Footer + CTA + micro interaction + mobile polish
   ========================================================= */

body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a,
button{
  -webkit-tap-highlight-color:transparent;
}

::selection{
  background:rgba(20,119,255,.18);
  color:#081426;
}

/* CTA polish */
.cta{
  padding-top:28px!important;
  padding-bottom:54px!important;
}

.cta-card{
  position:relative;
  overflow:hidden;
  border-radius:28px!important;
  padding:34px 40px!important;
  background:
    radial-gradient(circle at 12% 12%,rgba(24,200,255,.14),transparent 16rem),
    linear-gradient(135deg,#126fe9 0%,#0c4c9d 44%,#071c35 100%)!important;
}

.cta-card::before{
  content:"";
  position:absolute;
  width:340px;
  height:340px;
  right:-110px;
  top:-160px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.12),transparent 66%);
  pointer-events:none;
}

.cta-card > *{
  position:relative;
  z-index:1;
}

.cta-card h2{
  letter-spacing:-.04em!important;
  line-height:1.08!important;
}

.cta-card .cta-actions{
  gap:9px!important;
}

.cta-card .btn{
  min-height:42px;
  border-radius:12px!important;
  font-weight:750!important;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.cta-card .btn:hover{
  transform:translateY(-2px);
}

.cta-card .btn-white:hover{
  box-shadow:0 12px 26px rgba(255,255,255,.12);
}

/* Footer polish */
.footer{
  background:#071425!important;
  color:#dce9f8!important;
  border-top:1px solid rgba(255,255,255,.07)!important;
  padding-top:30px!important;
  padding-bottom:30px!important;
}

.footer .container,
.footer-grid{
  align-items:center!important;
}

.footer .brand-logo-img{
  filter:brightness(1.08);
}

.footer p{
  color:#8fa7c2!important;
  font-size:11px!important;
}

.footer a{
  color:#bcd0e7!important;
  transition:.18s ease;
}

.footer a:hover{
  color:#fff!important;
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:12px!important;
}

.detail-footer-contact{
  gap:8px!important;
}

.detail-footer-email{
  font-size:10.5px!important;
}

/* Global section rhythm */
section{
  scroll-margin-top:96px;
}

.v221-about,
.v221-solution,
.products-section,
.section-products,
#produk{
  scroll-margin-top:104px;
}

/* Soft focus ring */
a:focus-visible,
button:focus-visible,
input:focus-visible{
  outline:3px solid rgba(20,119,255,.22)!important;
  outline-offset:3px!important;
}

/* Card micro interaction */
.product-card,
.v221-solution-card,
.v221-delivery article,
.featured-v2-card{
  will-change:transform;
}

/* Back to top */
.back-to-top-v23{
  position:fixed;
  right:22px;
  bottom:22px;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#1477ff,#0aa8cb);
  color:#fff;
  font-size:18px;
  font-weight:850;
  box-shadow:0 14px 34px rgba(20,119,255,.24);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:.2s ease;
  z-index:1000;
}

.back-to-top-v23.show{
  opacity:1;
  visibility:visible;
  transform:none;
}

.back-to-top-v23:hover{
  transform:translateY(-2px);
}

/* Reveal utility */
.v23-reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .48s ease, transform .48s ease;
}

.v23-reveal.v23-in{
  opacity:1;
  transform:none;
}

/* Mobile polish */
@media(max-width:900px){
  .cta-card{
    padding:28px!important;
  }

  .footer-grid{
    gap:18px!important;
  }
}

@media(max-width:640px){
  body{
    overflow-x:hidden;
  }

  .site-header .nav-wrap{
    padding-left:16px!important;
    padding-right:16px!important;
  }

  .hero,
  .v221-solution,
  .v221-about{
    overflow:hidden;
  }

  .hero h1{
    font-size:clamp(40px,11vw,58px)!important;
  }

  .hero p{
    font-size:14px!important;
    line-height:1.7!important;
  }

  .hero-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
  }

  .hero-actions .btn{
    width:100%!important;
    justify-content:center!important;
  }

  .product-filter-wrap{
    margin-left:0!important;
    margin-right:0!important;
  }

  .product-search-v2 input{
    font-size:16px!important;
  }

  .product-card .card-actions{
    align-items:stretch!important;
  }

  .product-card .card-actions .btn{
    flex:1 1 auto;
  }

  .product-card[data-href="rumah-tangga/"] .btn-apk{
    flex:1 1 100%!important;
    justify-content:center!important;
  }

  .cta{
    padding-left:0!important;
    padding-right:0!important;
  }

  .cta-card{
    padding:24px 20px!important;
    border-radius:22px!important;
  }

  .cta-card .cta-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
  }

  .cta-card .btn{
    width:100%!important;
    justify-content:center!important;
  }

  .footer{
    text-align:left!important;
  }

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

  .footer-links{
    gap:10px!important;
  }

  .back-to-top-v23{
    right:14px;
    bottom:14px;
    width:42px;
    height:42px;
    border-radius:13px;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }

  .v23-reveal{
    opacity:1!important;
    transform:none!important;
  }
}

/* =========================================================
   GARASI V2.4 INTERACTIVE PRODUCT CARDS
   ========================================================= */

.product-card{
  cursor:pointer;
}

.product-card::after{
  content:"Klik untuk lihat detail";
  position:absolute;
  right:16px;
  bottom:14px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.02em;
  color:#7a8ca3;
  opacity:0;
  transform:translateY(4px);
  transition:.18s ease;
  pointer-events:none;
}

.product-card:hover::after{
  opacity:1;
  transform:none;
}

.product-card.v24-opening{
  transform:translateY(-8px) scale(1.015)!important;
  box-shadow:0 30px 70px rgba(20,55,95,.17)!important;
}

.product-modal-v24{
  position:fixed;
  inset:0;
  z-index:4000;
  display:grid;
  place-items:center;
  padding:28px;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease,visibility .22s ease;
}

.product-modal-v24.is-open{
  pointer-events:auto;
  opacity:1;
  visibility:visible;
}

.product-modal-v24-backdrop{
  position:absolute;
  inset:0;
  background:rgba(3,12,25,.68);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.product-modal-v24-panel{
  position:relative;
  z-index:1;
  width:min(920px,94vw);
  max-height:min(760px,88vh);
  overflow:auto;
  border-radius:28px;
  background:
    radial-gradient(circle at 90% 0%,rgba(24,200,255,.08),transparent 20rem),
    #ffffff;
  border:1px solid rgba(205,220,236,.95);
  box-shadow:0 44px 110px rgba(2,16,34,.34);
  padding:30px;
  transform:translateY(22px) scale(.965);
  opacity:0;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .22s ease;
  outline:none;
}

.product-modal-v24.is-open .product-modal-v24-panel{
  transform:none;
  opacity:1;
}

.product-modal-v24-close{
  position:absolute;
  top:16px;
  right:16px;
  width:38px;
  height:38px;
  border:1px solid #dce7f2;
  border-radius:12px;
  background:#f7faff;
  color:#334760;
  font-size:22px;
  cursor:pointer;
  transition:.18s ease;
}

.product-modal-v24-close:hover{
  background:#edf5fd;
  color:#0f66d4;
  transform:rotate(4deg);
}

.product-modal-v24-top{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px;
  align-items:start;
  padding-right:48px;
}

.product-modal-v24-icon{
  width:72px;
  height:72px;
  border-radius:20px;
  display:grid;
  place-items:center;
  background:#f1f6fc;
  box-shadow:0 12px 30px rgba(29,62,100,.08);
  overflow:hidden;
}

.product-modal-v24-icon img,
.product-modal-v24-icon .product-icon-img-v152{
  width:100%;
  height:100%;
  object-fit:contain;
}

.product-modal-v24-heading{
  min-width:0;
}

.product-modal-v24-eyebrow,
.product-modal-v24-label{
  display:block;
  font-size:10px;
  font-weight:850;
  letter-spacing:.14em;
  color:#1477ff;
}

.product-modal-v24-heading h2{
  margin:6px 0 8px;
  font-size:clamp(28px,3.6vw,42px);
  line-height:1.04;
  letter-spacing:-.04em;
  color:#0b1728;
}

.product-modal-v24-heading p{
  margin:0;
  color:#617189;
  font-size:13px;
  line-height:1.7;
  max-width:680px;
}

.product-modal-v24-status{
  padding:8px 10px;
  border-radius:999px;
  background:#eef5fd;
  border:1px solid #dce7f2;
  color:#45627f;
  font-size:9.5px;
  font-weight:800;
  white-space:nowrap;
}

.product-modal-v24-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px;
  gap:22px;
  margin-top:26px;
}

.product-modal-v24-features{
  padding:22px;
  border-radius:20px;
  background:#f8fbff;
  border:1px solid #e1ebf5;
}

.product-modal-v24-features ul{
  margin:14px 0 0;
  padding-left:18px;
}

.product-modal-v24-features li{
  color:#344a64;
  margin-bottom:10px;
  font-size:12px;
  line-height:1.55;
}

.product-modal-v24-meta{
  display:grid;
  gap:10px;
}

.product-modal-v24-meta > div{
  padding:16px;
  border-radius:16px;
  background:#fff;
  border:1px solid #e1eaf4;
  box-shadow:0 8px 24px rgba(28,60,98,.04);
}

.product-modal-v24-meta span{
  display:block;
  color:#8090a5;
  font-size:9.5px;
  margin-bottom:5px;
}

.product-modal-v24-meta strong{
  display:block;
  color:#142237;
  font-size:12px;
}

.product-modal-v24-actions{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid #e5edf6;
}

.product-modal-v24-actions a{
  min-height:42px;
  padding:10px 16px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:11px;
  font-weight:800;
  transition:.18s ease;
}

.product-modal-v24-actions .v24-primary{
  background:linear-gradient(135deg,#1477ff,#0b67e7);
  color:#fff;
  box-shadow:0 10px 24px rgba(20,119,255,.18);
}

.product-modal-v24-actions .v24-secondary{
  background:#f6f9fd;
  color:#29405c;
  border:1px solid #dbe7f2;
}

.product-modal-v24-actions .v24-apk{
  background:linear-gradient(135deg,#0aa76d,#08c58a);
  color:#fff;
}

.product-modal-v24-actions a:hover{
  transform:translateY(-2px);
}

body.v24-modal-open{
  overflow:hidden;
}

@media(max-width:760px){
  .product-card::after{
    display:none;
  }

  .product-modal-v24{
    align-items:end;
    padding:0;
  }

  .product-modal-v24-panel{
    width:100%;
    max-height:88vh;
    border-radius:24px 24px 0 0;
    padding:22px 18px 20px;
    transform:translateY(100%);
  }

  .product-modal-v24.is-open .product-modal-v24-panel{
    transform:none;
  }

  .product-modal-v24-top{
    grid-template-columns:58px 1fr;
    gap:13px;
    padding-right:42px;
  }

  .product-modal-v24-icon{
    width:58px;
    height:58px;
    border-radius:16px;
  }

  .product-modal-v24-status{
    grid-column:1 / -1;
    justify-self:start;
  }

  .product-modal-v24-heading h2{
    font-size:28px;
  }

  .product-modal-v24-body{
    grid-template-columns:1fr;
  }

  .product-modal-v24-meta{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .product-modal-v24-meta > div{
    padding:12px;
  }

  .product-modal-v24-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .product-modal-v24-actions a{
    width:100%;
  }
}

@media(max-width:480px){
  .product-modal-v24-meta{
    grid-template-columns:1fr;
  }
}

@media(prefers-reduced-motion:reduce){
  .product-modal-v24,
  .product-modal-v24-panel,
  .product-card{
    transition:none!important;
  }
}

/* GARASI V2.4.1 CLICK CAPTURE HOTFIX */
.product-card{
  cursor:pointer!important;
}
.product-card:active{
  transform:translateY(-2px) scale(.997)!important;
}

/* GARASI V2.4.2 HARD FIX */
.product-modal-card{
  cursor:pointer!important;
}
.product-modal-card:hover{
  transform:translateY(-5px)!important;
}
.product-modal-card:active{
  transform:translateY(-2px) scale(.997)!important;
}

/* GARASI V2.4.3 RECOVERY INLINE MODAL */
.product-card{
  cursor:pointer!important;
}

.product-card:hover{
  transform:translateY(-5px)!important;
}

.product-card.v24-opening{
  transform:translateY(-7px) scale(1.012)!important;
  box-shadow:0 30px 70px rgba(20,55,95,.17)!important;
}

/* =========================================================
   GARASI V2.4.4 RICH PRODUCT DETAIL
   ========================================================= */

.product-modal-v24-panel{
  width:min(1060px,95vw)!important;
  max-height:90vh!important;
}

.product-modal-v244-body{
  grid-template-columns:minmax(0,1fr) 235px!important;
}

.product-modal-v244-main{
  display:grid;
  gap:14px;
}

.product-modal-v244-block{
  padding:18px;
  border-radius:18px;
  background:#f8fbff;
  border:1px solid #e1ebf5;
}

.product-modal-v244-overview{
  margin:11px 0 0;
  color:#4f6178;
  font-size:12px;
  line-height:1.7;
}

.product-modal-v244-audience{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:12px;
}

.product-modal-v244-audience span{
  padding:7px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid #dbe7f2;
  color:#405873;
  font-size:10px;
  font-weight:700;
}

.product-modal-v244-feature-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}

.product-modal-v244-feature-grid > div{
  position:relative;
  padding:10px 11px 10px 29px;
  border-radius:12px;
  background:#fff;
  border:1px solid #dfe9f4;
  color:#334a64;
  font-size:10.5px;
  font-weight:650;
  line-height:1.35;
}

.product-modal-v244-feature-grid > div::before{
  content:"✓";
  position:absolute;
  left:10px;
  top:9px;
  width:14px;
  height:14px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#e7f3ff;
  color:#1477ff;
  font-size:8px;
  font-weight:900;
}

.product-modal-v244-benefits{
  margin:12px 0 0;
  padding-left:18px;
}

.product-modal-v244-benefits li{
  margin-bottom:8px;
  color:#40556f;
  font-size:11px;
  line-height:1.55;
}

.product-modal-v244-meta{
  align-self:start;
  position:sticky;
  top:0;
}

@media(max-width:760px){
  .product-modal-v244-body{
    grid-template-columns:1fr!important;
  }

  .product-modal-v244-feature-grid{
    grid-template-columns:1fr;
  }

  .product-modal-v244-meta{
    position:static;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:480px){
  .product-modal-v244-meta{
    grid-template-columns:1fr!important;
  }

  .product-modal-v244-block{
    padding:15px;
  }
}