/*
Theme Name: HPY Web
Theme URI: https://hpysolution.com
Author: HPY Solution
Description: Block theme (FSE) untuk HPY Solution — semua konten diedit dari wp-admin, tanpa plugin pihak ketiga.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: hpy-web
*/

/* ============ Tokens (brand hpysolution.com) ============ */
:root{
  --bg:#f8f9fc; --surface:#fff; --surface2:#f1f4fa; --surface3:#e8edf8;
  --orange:#E5850B; --orange-dark:#C96F05; --orange-light:#fff6ea; --orange-soft:#FBEBD1;
  --blue:#3b6fd4; --blue-dark:#2d56b0; --blue-light:#eef3fc;
  --green:#22c55e; --red:#e84040;
  --text:#16202E; --text2:#334155; --muted:#64748b; --muted2:#94a3b8;
  --icon-chip:#F1F4F8; --border:#e5e7eb; --border2:#d1d5db;
  --sh-sm:0 1px 3px rgba(16,32,46,.06),0 1px 2px rgba(16,32,46,.05);
  --sh-md:0 4px 16px rgba(16,32,46,.07),0 2px 6px rgba(16,32,46,.05);
  --sh-lg:0 10px 40px rgba(16,32,46,.10),0 4px 12px rgba(16,32,46,.06);
  --sh-orange:0 8px 30px rgba(229,133,11,.26);
  --sh-blue:0 8px 30px rgba(59,111,212,.22);
  --sora:"Sora","Plus Jakarta Sans",sans-serif;
  --r:16px;
}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--text);background:var(--bg);overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--sora);text-wrap:balance}
a{transition:color .2s}
img{max-width:100%;height:auto}
mark.has-inline-color{background:transparent}

/* ============ Layout helpers ============ */
.hpy-sec{padding:96px 24px;position:relative}
.hpy-sec--tight{padding:36px 24px}
.hpy-sec--white{background:var(--surface)}
.hpy-sec--soft{background:var(--surface2)}
.hpy-sec-head{max-width:720px;margin:0 auto 52px}
.hpy-sec-head>*+*{margin-top:12px}
.hpy-eyebrow{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.14em;color:var(--orange);text-transform:uppercase;margin:0}
.has-text-align-center.hpy-eyebrow{display:block}
.hpy-eyebrow--muted{color:var(--muted)}
.hpy-lead{color:var(--muted);font-size:1.08rem;line-height:1.75;margin:0}
.hpy-muted{color:var(--muted)}
.hpy-grid.hpy-grid{gap:20px}
.hpy-grid--2.hpy-grid--2{gap:18px}
.hpy-grid--price.hpy-grid--price{gap:18px;margin-bottom:36px}

/* ============ Buttons ============ */
.wp-block-button .wp-block-button__link{font-weight:700;font-size:.95rem;padding:13px 26px;border-radius:10px;transition:transform .2s,box-shadow .2s,background .2s,color .2s,border-color .2s}
.wp-block-button.hpy-btn-primary .wp-block-button__link{background:var(--orange);color:#fff;box-shadow:var(--sh-orange)}
.wp-block-button.hpy-btn-primary .wp-block-button__link:hover{background:var(--orange-dark);transform:translateY(-2px);box-shadow:0 12px 36px rgba(229,133,11,.38)}
.wp-block-button.hpy-btn-ghost .wp-block-button__link{background:transparent;color:var(--text2);border:1.5px solid var(--border2);box-shadow:none}
.wp-block-button.hpy-btn-ghost .wp-block-button__link:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light)}
.wp-block-button.hpy-btn-white .wp-block-button__link{background:#fff;color:var(--blue-dark);box-shadow:var(--sh-md)}
.wp-block-button.hpy-btn-white .wp-block-button__link:hover{background:var(--blue-light);transform:translateY(-2px)}
.wp-block-button.hpy-btn-sm .wp-block-button__link{padding:10px 20px;font-size:.85rem}
.wp-block-button.hpy-btn-block{width:100%}
.wp-block-button.hpy-btn-block .wp-block-button__link{width:100%;text-align:center}

/* ============ Header ============ */
.hpy-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 24px;transition:box-shadow .3s}
.hpy-header.is-scrolled{box-shadow:var(--sh-sm)}
.hpy-header-inner{min-height:68px;gap:24px}
.hpy-logo img{height:36px;width:auto;max-width:150px;object-fit:contain}
.hpy-nav{flex:1;justify-content:center}
.hpy-nav .wp-block-navigation-item__content{color:var(--muted);font-size:14px;font-weight:500;letter-spacing:.01em;padding:6px 2px;text-decoration:none}
.hpy-nav .wp-block-navigation-item__content:hover,.hpy-nav .current-menu-item>.wp-block-navigation-item__content{color:var(--text)}
.hpy-nav .wp-block-navigation__container{gap:26px}
.hpy-nav .wp-block-navigation__responsive-container.is-menu-open{padding:80px 32px;background:#fff}
.hpy-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{font-size:1.2rem;font-family:var(--sora);font-weight:700;color:var(--text)}
.hpy-header-cta{margin:0}
@media(max-width:781px){
  .hpy-header-cta{display:none!important}
  .hpy-nav{flex:0 0 auto;justify-content:flex-end}
  /* paksa mode hamburger sampai 781px (bawaan WP hanya <600px) */
  .hpy-nav .wp-block-navigation__responsive-container-open{display:flex!important}
  .hpy-nav .wp-block-navigation__responsive-container:not(.is-menu-open){display:none!important}
}

/* ============ Hero ============ */
.hpy-hero{background:linear-gradient(160deg,#fff 0%,#f8f9fc 60%,#eef3fc 100%);padding:80px 24px 90px;min-height:min(calc(100vh - 68px),820px);display:flex;align-items:center;overflow:hidden}
.hpy-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(0,0,0,.06) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 60% 50%,#000 10%,transparent 80%);mask-image:radial-gradient(ellipse 80% 70% at 60% 50%,#000 10%,transparent 80%);pointer-events:none}
.hpy-hero::after{content:"";position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(245,166,35,.10) 0%,transparent 70%);top:-220px;right:-120px;pointer-events:none}
.hpy-hero>*{position:relative;z-index:1;width:100%}
.hpy-hero-cols.hpy-hero-cols{gap:56px}
.hpy-badge{display:inline-flex;align-items:center;gap:8px;background:var(--orange-light);border:1px solid rgba(245,166,35,.3);color:var(--orange-dark);padding:5px 14px;border-radius:100px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px}
.hpy-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);animation:hpyPulse 2s infinite}
@keyframes hpyPulse{0%,100%{opacity:1}50%{opacity:.3}}
.hpy-hero h1{font-size:clamp(34px,4vw,52px);margin:0 0 6px}
.hpy-hero .hpy-lead{max-width:480px}
.hpy-hero .wp-block-buttons{margin-top:10px}
.hpy-stats{gap:32px;margin-top:22px;padding-top:28px;border-top:1px solid var(--border)}
.hpy-stat p{margin:0}
.hpy-stat-num{font-family:var(--sora);font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.hpy-stat-label{font-size:12px;color:var(--muted);margin-top:5px!important;font-weight:500}
.hpy-stats--boxed{gap:14px!important;margin:0 auto 40px;max-width:900px}
.hpy-stats--boxed .hpy-stat{background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px 16px;text-align:center;box-shadow:var(--sh-sm)}
.hpy-stats--boxed .hpy-stat-num{color:var(--orange);font-size:34px}

/* Hero — ERP integration hub */
.hpy-hub{position:relative;width:100%;max-width:470px;margin:0 auto;aspect-ratio:1/.92}
.hpy-hub::before{content:"";position:absolute;inset:-8%;background:radial-gradient(40% 48% at 74% 26%,rgba(245,166,35,.32),transparent 70%),radial-gradient(46% 55% at 26% 80%,rgba(59,111,212,.28),transparent 72%);filter:blur(48px);animation:hpyAura 7s ease-in-out infinite;pointer-events:none}
@keyframes hpyAura{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.hpy-hub-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.hpy-hub-lines .base path{stroke:rgba(100,116,139,.22);stroke-width:.5;fill:none}
.hpy-hub-lines .flow path{stroke:url(#hpyLine);stroke-width:.9;fill:none;stroke-linecap:round;stroke-dasharray:2.5 4.5;animation:hpyFlow 1.4s linear infinite}
.hpy-hub-lines .flow path:nth-child(2){animation-delay:.2s}.hpy-hub-lines .flow path:nth-child(3){animation-delay:.4s}.hpy-hub-lines .flow path:nth-child(4){animation-delay:.6s}.hpy-hub-lines .flow path:nth-child(5){animation-delay:.8s}.hpy-hub-lines .flow path:nth-child(6){animation-delay:1s}.hpy-hub-lines .flow path:nth-child(7){animation-delay:1.2s}.hpy-hub-lines .flow path:nth-child(8){animation-delay:1.4s}
@keyframes hpyFlow{to{stroke-dashoffset:-7}}
.hpy-hub-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:136px;height:110px;border-radius:26px;z-index:3;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;padding:20px 22px;box-shadow:0 16px 44px rgba(229,133,11,.32),0 6px 16px rgba(16,32,46,.12)}
.hpy-hub-core img{width:100%;height:auto;object-fit:contain}
.hpy-hub-core::before,.hpy-hub-core::after{content:"";position:absolute;inset:-6px;border-radius:30px;border:1.5px solid rgba(229,133,11,.4);animation:hpyRing 2.8s ease-out infinite}
.hpy-hub-core::after{animation-delay:1.4s}
@keyframes hpyRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.4);opacity:0}}
.hpy-node{position:absolute;transform:translate(-50%,-50%);z-index:4;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:8px 13px 8px 9px;box-shadow:var(--sh-md);font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap;animation:hpyNode 5.5s ease-in-out infinite}
.hpy-node:nth-child(odd){animation-delay:-2.7s}
@keyframes hpyNode{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 7px))}}
.hpy-node .ico{width:27px;height:27px;border-radius:8px;background:var(--icon-chip);color:var(--text2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hpy-node .ico svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hpy-node.n1 .ico{background:#EAF1FE;color:#3B82F6}.hpy-node.n2 .ico{background:#E7F6EC;color:#22A45D}.hpy-node.n3 .ico{background:#FDECEA;color:#E5533D}.hpy-node.n4 .ico{background:#FEF6E0;color:#E1A100}
.hpy-node.n5 .ico{background:#F1EAFE;color:#7C3AED}.hpy-node.n6 .ico{background:#E6F7F8;color:#0891B2}.hpy-node.n7 .ico{background:#FFF1E6;color:#E5850B}.hpy-node.n8 .ico{background:#EAF1FE;color:#2D56B0}
@media(max-width:600px){.hpy-node{font-size:11px;padding:6px 10px 6px 7px}.hpy-hub-core{width:110px;height:90px}}

/* ============ Trust bar ============ */
.hpy-trust{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.hpy-trust .hpy-eyebrow{margin-bottom:14px}
.hpy-chips{gap:10px!important}
.hpy-chip{margin:0;font-size:.9rem;font-weight:600;color:var(--text2);background:var(--surface2);border:1px solid var(--border);padding:7px 16px;border-radius:100px}

/* ============ Cards (layanan, pajak, fitur) ============ */
.hpy-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:28px 26px 24px;box-shadow:var(--sh-sm);transition:transform .25s,box-shadow .25s,border-color .25s;overflow:hidden}
.hpy-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:rgba(59,111,212,.35)}
.hpy-card h3{margin:0 0 10px;font-size:17px}
.hpy-card p{font-size:13.5px;color:var(--muted);line-height:1.7;margin:0}
.hpy-card>*+*{margin-top:10px}
.hpy-card .hpy-more{margin-top:14px}
.hpy-more a{font-weight:700;font-size:13px;color:var(--orange);text-decoration:none}
.hpy-more a:hover{color:var(--orange-dark);text-decoration:underline}
.hpy-card--big{grid-column:span 2;background:linear-gradient(135deg,#fff 0%,var(--blue-light) 100%)}
@media(max-width:700px){.hpy-card--big{grid-column:auto}}

/* Ikon chip: .hpy-ic + .hpy-ic-<nama> (mask SVG, warna mengikuti currentColor) */
.hpy-ic{--ic-size:48px;--ic-bg:var(--icon-chip);--ic-color:var(--text2)}
.hpy-card.hpy-ic,.hpy-product-card.hpy-ic{padding-top:calc(28px + var(--ic-size) + 16px)}
.hpy-ic{isolation:isolate}
.hpy-ic>h3,.hpy-ic>h4,.hpy-ic>p,.hpy-ic>div{position:relative;z-index:1}
/* chip */
.hpy-ic::after{content:"";position:absolute;top:28px;left:26px;width:var(--ic-size);height:var(--ic-size);border-radius:12px;background:var(--ic-bg);transition:background .25s}
/* ikon di atas chip */
.hpy-ic::before{content:"";position:absolute;z-index:1;top:calc(28px + (var(--ic-size) - 24px)/2);left:calc(26px + (var(--ic-size) - 24px)/2);width:24px;height:24px;background:var(--ic-color);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;transition:background .25s}
.hpy-card.hpy-ic:hover::after{background:var(--orange-soft)}
.hpy-card.hpy-ic:hover::before{background:var(--orange-dark)}
.hpy-card{border-top:3px solid transparent}
.hpy-card:hover{border-top-color:var(--orange)}
.hpy-ic-building{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2' ry='2'/%3E%3Cpath d='M9 22v-4h6v4'/%3E%3Cpath d='M8 6h.01'/%3E%3Cpath d='M16 6h.01'/%3E%3Cpath d='M12 6h.01'/%3E%3Cpath d='M12 10h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 10h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 10h.01'/%3E%3Cpath d='M8 14h.01'/%3E%3C/svg%3E")}
.hpy-ic-cart{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E")}
.hpy-ic-cog{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.hpy-ic-phone{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='20' x='5' y='2' rx='2' ry='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E")}
.hpy-ic-bag{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E")}
.hpy-ic-grad{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z'/%3E%3Cpath d='M22 10v6'/%3E%3Cpath d='M6 12.5V16a6 3 0 0 0 12 0v-3.5'/%3E%3C/svg%3E")}
.hpy-ic-scale{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E")}
.hpy-ic-shield{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E")}
.hpy-ic-book{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4'/%3E%3Cpath d='M10 10h4'/%3E%3Cpath d='M10 14h4'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E")}
.hpy-ic-box{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E")}
.hpy-ic-wallet{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E")}
.hpy-ic-factory{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7 5V8l-7 5V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M17 18h1'/%3E%3Cpath d='M12 18h1'/%3E%3Cpath d='M7 18h1'/%3E%3C/svg%3E")}
.hpy-ic-receipt{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8'/%3E%3Cpath d='M12 17.5v-11'/%3E%3C/svg%3E")}
.hpy-ic-chart{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpolyline points='16 7 22 7 22 13'/%3E%3C/svg%3E")}
.hpy-ic-link{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E")}
.hpy-ic-users{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")}
.hpy-ic-store{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7'/%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/%3E%3Cpath d='M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4'/%3E%3Cpath d='M2 7h20'/%3E%3C/svg%3E")}
.hpy-ic-clock{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E")}
.hpy-ic-pin{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}
.hpy-ic-mail{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E")}
.hpy-ic-phone-call{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E")}

/* ============ Kenapa HPY ============ */
.hpy-why-cols.hpy-why-cols{gap:64px}
.hpy-why .hpy-lead{margin-top:14px}
.hpy-why-list{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.hpy-why-item{position:relative;background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 18px 16px 58px;transition:border-color .2s,box-shadow .2s}
.hpy-why-item:hover{border-color:var(--orange);box-shadow:0 4px 16px rgba(245,166,35,.12)}
.hpy-why-item::before{content:"";position:absolute;left:18px;top:18px;width:26px;height:26px;border-radius:50%;background:var(--orange-light);border:1px solid rgba(229,133,11,.35)}
.hpy-why-item::after{content:"";position:absolute;left:25px;top:25px;width:12px;height:12px;background:var(--orange-dark);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat}
.hpy-why-item h4{margin:0 0 3px;font-size:13.5px}
.hpy-why-item p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.6}
.hpy-orbit-wrap{position:relative;width:100%;max-width:420px;aspect-ratio:1;margin:0 auto}
.hpy-orbit-rings{position:absolute;inset:40px;border-radius:50%}
.hpy-orbit-rings .ring{position:absolute;border-radius:50%;border:1.5px solid}
.hpy-orbit-rings .r1{inset:0;border-color:rgba(245,166,35,.25);animation:hpySpin 18s linear infinite}
.hpy-orbit-rings .r2{inset:32px;border-color:rgba(59,111,212,.2);border-style:dashed;animation:hpySpin 28s linear infinite reverse}
@keyframes hpySpin{to{transform:rotate(360deg)}}
.hpy-orbit{position:absolute;inset:0;border-radius:50%;animation:hpySpin 14s linear infinite}
.hpy-orbit.o2{inset:32px;animation-duration:19s;animation-direction:reverse;animation-delay:-7s}
.hpy-orbit.o3{inset:14px;animation-duration:24s;animation-delay:-13s}
.hpy-orbit i{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:12px;height:12px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(229,133,11,.2)}
.hpy-orbit.o2 i{background:var(--blue);box-shadow:0 0 0 4px rgba(59,111,212,.2)}
.hpy-orbit.o3 i{background:var(--green);box-shadow:0 0 0 4px rgba(34,197,94,.2)}
.hpy-orbit-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150px;height:150px;border-radius:50%;background:linear-gradient(155deg,#1e293b,#0f172a);display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--sora);font-size:13px;font-weight:800;color:#fff;line-height:1.4;box-shadow:0 20px 50px rgba(16,32,46,.35)}
.hpy-float{position:absolute;background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px 14px;box-shadow:var(--sh-md);font-size:12.5px;animation:hpyFloaty 5s ease-in-out infinite}
.hpy-float b{font-weight:700}
.hpy-float.f1{top:0;left:0;color:var(--orange);border-left:3px solid var(--orange)}
.hpy-float.f2{bottom:30px;right:0;color:var(--blue);border-left:3px solid var(--blue);animation-delay:1.1s}
.hpy-float.f3{bottom:0;left:20px;color:var(--green);border-left:3px solid var(--green);animation-delay:2.2s}
@keyframes hpyFloaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ============ Modul produk ============ */
.hpy-product-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:28px;box-shadow:var(--sh-sm);transition:transform .25s,box-shadow .25s,border-color .25s}
.hpy-product-card:hover{transform:translateY(-4px);border-color:var(--blue);box-shadow:var(--sh-blue)}
.hpy-product-card.hpy-ic{--ic-bg:var(--blue-light);--ic-color:var(--blue)}
.hpy-product-card .hpy-num{position:absolute;top:22px;right:26px;font-family:var(--sora);font-size:40px;font-weight:800;color:var(--surface3);margin:0;line-height:1}
.hpy-product-card h3{margin:0 0 8px;font-size:19px}
.hpy-product-card>p{font-size:13.5px;color:var(--muted);line-height:1.7;margin:0}
.hpy-tags{gap:7px!important;margin-top:16px}
.hpy-tag{margin:0;font-size:11.5px;font-weight:700;color:var(--blue-dark);background:var(--blue-light);padding:4px 11px;border-radius:100px}

/* ============ Harga ============ */
.hpy-price-group{margin:0 0 16px;font-size:1rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.hpy-price{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:26px 24px;box-shadow:var(--sh-sm);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s,border-color .25s}
.hpy-price:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.hpy-price.is-featured{border:2px solid var(--orange);box-shadow:var(--sh-orange)}
.hpy-price.is-free{border-color:rgba(34,197,94,.5)}
.hpy-price>*{margin:0}
.hpy-badge--solid{position:absolute;top:-12px;left:20px;background:var(--orange);color:#fff;border:0;padding:4px 12px;font-size:11px}
.is-free .hpy-badge--solid{background:var(--green)}
.hpy-price-name{font-size:18px;margin-bottom:6px!important}
.hpy-price-desc{font-size:13px;color:var(--muted);line-height:1.6;min-height:42px;margin-bottom:18px!important}
.hpy-price-num{font-family:var(--sora);font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--text);line-height:1.1}
.is-featured .hpy-price-num{color:var(--orange)}
.hpy-price-unit{font-size:12px;color:var(--muted);margin:4px 0 20px!important}
.hpy-price .wp-block-buttons{margin-top:auto}
.hpy-includes{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:26px 24px;box-shadow:var(--sh-sm)}
.hpy-includes h4{margin:0 0 16px;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hpy-includes-list{gap:10px!important}
.hpy-inc{margin:0;font-size:13px;font-weight:600;color:var(--text2);padding:7px 14px 7px 32px;border-radius:100px;background:var(--surface2);position:relative}
.hpy-inc::before{content:"";position:absolute;left:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;background:var(--green);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/70% no-repeat,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/70% no-repeat,linear-gradient(#000,#000);mask-composite:exclude}
.hpy-price-help{margin-top:28px;gap:16px!important;background:var(--orange-light);border:1px solid rgba(229,133,11,.25);border-radius:14px;padding:18px 22px}
.hpy-price-help p{margin:0;color:var(--text2);font-size:.95rem}

/* ============ Klien ============ */
.hpy-client-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 24px}
.hpy-tab{font:inherit;font-size:13px;font-weight:600;color:var(--muted);background:#fff;border:1px solid var(--border);padding:8px 16px;border-radius:100px;cursor:pointer;transition:.2s}
.hpy-tab:hover{color:var(--text);border-color:var(--border2)}
.hpy-tab.is-active{background:var(--text);color:#fff;border-color:var(--text)}
.hpy-grid--logos.hpy-grid--logos{gap:14px}
.hpy-logo-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px 14px;text-align:center;transition:transform .25s,box-shadow .25s,border-color .25s}
.hpy-logo-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--border2)}
.hpy-logo-card .wp-block-image{margin:0 auto 10px;height:64px;display:flex;align-items:center;justify-content:center}
.hpy-logo-card .wp-block-image img{max-height:64px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.8;transition:.25s}
.hpy-logo-card:hover img{filter:none;opacity:1}
.hpy-logo-card p{margin:0}
.hpy-logo-name{font-size:12.5px;font-weight:700;color:var(--text);line-height:1.3}
.hpy-logo-ind{font-size:11px;color:var(--muted);margin-top:3px!important}

/* ============ Testimoni ============ */
.hpy-testi{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:26px;box-shadow:var(--sh-sm);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.hpy-testi:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.hpy-testi>*{margin:0}
.hpy-stars{color:var(--orange);font-size:14px;letter-spacing:2px;margin-bottom:12px!important}
.hpy-testi-text{font-size:14px;color:var(--text2);line-height:1.75;font-style:italic;margin-bottom:18px!important;flex:1}
.hpy-testi-author{gap:10px!important;align-items:center}
.hpy-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--orange),var(--blue));color:#fff;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;margin:0;flex-shrink:0}
.hpy-testi-meta p{margin:0}
.hpy-testi-name{font-size:13px;font-weight:700}
.hpy-testi-role{font-size:11px;color:var(--muted)}
.hpy-join{margin-top:40px;gap:18px!important}
.hpy-join p{margin:0;font-weight:600;color:var(--text2)}

/* ============ FAQ ============ */
.hpy-faq .hpy-sec-head{margin-bottom:36px}
.hpy-faq-list{display:flex;flex-direction:column;gap:12px}
.hpy-faq-item{background:#fff;border:1px solid var(--border);border-radius:14px;padding:0;transition:border-color .2s,box-shadow .2s}
.hpy-faq-item[open]{border-color:rgba(245,166,35,.45);box-shadow:var(--sh-sm)}
.hpy-faq-item summary{cursor:pointer;list-style:none;font-weight:700;font-size:15px;padding:18px 56px 18px 22px;position:relative;transition:color .2s}
.hpy-faq-item summary::-webkit-details-marker{display:none}
.hpy-faq-item summary:hover{color:var(--orange-dark)}
.hpy-faq-item summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:var(--surface2);color:var(--text2);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;transition:.25s}
.hpy-faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg);background:var(--orange);color:#fff}
.hpy-faq-item p{margin:0;padding:0 22px 20px;color:var(--muted);font-size:14px;line-height:1.75}

/* ============ CTA ============ */
.hpy-cta-sec{padding:40px 24px 96px;background:var(--surface)}
.hpy-cta{position:relative;overflow:hidden;background:linear-gradient(135deg,#3b6fd4 0%,#2d56b0 100%);color:#fff;border-radius:24px;padding:64px 40px;text-align:center;box-shadow:var(--sh-blue)}
.hpy-cta::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.14) 1px,transparent 1px);background-size:24px 24px;pointer-events:none}
.hpy-cta::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(229,133,11,.45),transparent 70%);right:-160px;bottom:-200px;pointer-events:none}
.hpy-cta>*{position:relative;z-index:1}
.hpy-cta h2{color:#fff;margin:0 0 12px}
.hpy-cta .hpy-lead{color:#dbeafe;margin:0 auto 28px;max-width:600px}

/* ============ Kontak ============ */
.hpy-contact-cols.hpy-contact-cols{gap:56px}
.hpy-contact-info h2{margin:12px 0 12px}
.hpy-contact-info .hpy-lead{margin-bottom:28px;font-size:1rem}
.hpy-contact-item{position:relative;padding:4px 0 4px 60px;margin-bottom:20px;--ic-size:44px}
.hpy-contact-item::after{top:0;left:0;border-radius:11px}
.hpy-contact-item::before{top:calc((var(--ic-size) - 22px)/2);left:calc((var(--ic-size) - 22px)/2);width:22px;height:22px}
.hpy-contact-item h4{margin:0 0 3px;font-size:14px}
.hpy-contact-item p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6}
.hpy-contact-item a{color:var(--text2);text-decoration:none;font-weight:600}
.hpy-contact-item a:hover{color:var(--orange-dark)}
.hpy-contact-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:34px;box-shadow:var(--sh-lg)}
.hpy-contact-card h3{margin:0 0 4px}
.hpy-contact-card .hpy-muted{margin:0 0 22px;font-size:.9rem}
.hpy-contact-form label{display:block;font-size:12.5px;font-weight:700;color:var(--text2);margin-bottom:14px}
.hpy-contact-form input,.hpy-contact-form select,.hpy-contact-form textarea{display:block;width:100%;margin-top:6px;padding:12px 14px;border:1px solid var(--border2);border-radius:10px;font:inherit;font-size:14px;font-weight:400;color:var(--text);background:#fff;transition:border-color .2s,box-shadow .2s}
.hpy-contact-form input:focus,.hpy-contact-form select:focus,.hpy-contact-form textarea:focus{outline:0;border-color:var(--orange);box-shadow:0 0 0 3px rgba(229,133,11,.15)}
.hpy-contact-form textarea{resize:vertical}
.hpy-form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:600px){.hpy-form-row{grid-template-columns:1fr}}
.hpy-hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.hpy-form-submit{width:100%;background:var(--orange);color:#fff;border:0;border-radius:10px;padding:14px 20px;font:inherit;font-size:15px;font-weight:700;cursor:pointer;box-shadow:var(--sh-orange);transition:.2s}
.hpy-form-submit:hover{background:var(--orange-dark);transform:translateY(-2px)}
.hpy-form-submit:disabled{opacity:.6;cursor:wait;transform:none}
.hpy-form-msg{margin:12px 0 0;font-weight:600;color:var(--green);text-align:center;font-size:.9rem;min-height:1.2em}
.hpy-form-msg.is-error{color:var(--red)}
.hpy-form-alt{margin:12px 0 0;text-align:center;font-size:12.5px;color:var(--muted)}
.hpy-form-alt a{font-weight:700;color:var(--blue);text-decoration:none}

/* ============ Halaman biasa / blog ============ */
.hpy-page{padding:64px 24px 96px}
.hpy-page-hero{background:linear-gradient(160deg,#fff 0%,#f8f9fc 60%,#eef3fc 100%);padding:80px 24px 64px;text-align:center}
.hpy-page-hero h1{font-size:clamp(2rem,4vw,3rem);margin:12px 0 14px}
.hpy-page-hero .hpy-lead{max-width:640px;margin:0 auto 28px}
.hpy-post-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-sm);transition:transform .25s,box-shadow .25s}
.hpy-post-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.hpy-post-card>*{padding:0 22px}
.hpy-post-card .wp-block-post-featured-image{padding:0;margin:0 0 16px}
.hpy-post-card .wp-block-post-title{font-size:1.15rem;margin:4px 0 8px}
.hpy-post-card .wp-block-post-title a{color:var(--text);text-decoration:none}
.hpy-post-card .wp-block-post-excerpt{padding-bottom:22px;font-size:.9rem;color:var(--muted)}
.hpy-post-date{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.hpy-blog h1{margin:8px 0 40px}
.hpy-single .wp-block-post-title{margin:8px 0 24px}
.hpy-single .wp-block-post-featured-image{margin-bottom:32px;border-radius:var(--r);overflow:hidden}
.hpy-post-nav{margin-top:48px;padding-top:24px;border-top:1px solid var(--border)}
.hpy-404{text-align:center;padding:120px 24px}

/* ============ Footer ============ */
.hpy-footer{background:#0f172a;color:#cbd5e1;padding:64px 24px 28px;font-size:14px}
.hpy-footer h4{color:#fff;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 16px}
.hpy-footer p{color:#94a3b8;line-height:1.7}
.hpy-footer-logo img{height:32px;width:auto;filter:brightness(0) invert(1);opacity:.9}
.hpy-footer-address{font-size:13px}
.hpy-footer-links{list-style:none;padding:0;margin:0}
.hpy-footer-links li{margin:0 0 9px}
.hpy-footer-links a,.hpy-footer-contact a{color:#cbd5e1;text-decoration:none;font-size:13.5px}
.hpy-footer-links a:hover,.hpy-footer-contact a:hover{color:var(--orange)}
.hpy-footer-contact{line-height:2!important}
.hpy-footer .wp-block-buttons{margin-top:14px}
.hpy-footer-bottom{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);gap:12px}
.hpy-footer-bottom p{margin:0;font-size:12.5px;color:#64748b}

/* ============ Tombol WhatsApp melayang ============ */
.hpy-wa-float{position:fixed;bottom:24px;right:24px;display:flex;align-items:center;gap:10px;background:#25D366;color:#fff;padding:12px 18px 12px 14px;border-radius:999px;font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 8px 24px rgba(37,211,102,.4);z-index:9999;transition:transform .2s,box-shadow .2s}
.hpy-wa-float:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(37,211,102,.5);color:#fff}
@media(max-width:600px){.hpy-wa-float span{display:none}.hpy-wa-float{padding:14px}}

/* ============ Motion / a11y ============ */
.hpy-reveal{opacity:0}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.hpy-reveal{opacity:1}}

/* ============ Responsive ============ */
@media(max-width:781px){
  .hpy-sec{padding:64px 20px}
  .hpy-hero{padding:56px 20px 64px;min-height:0}
  .hpy-hero-cols.hpy-hero-cols{gap:40px}
  .hpy-stats{gap:20px}
  .hpy-orbit-wrap{max-width:340px}
  .hpy-cta{padding:48px 24px}
}

/* ============ Editor tweaks (biar mirip frontend di wp-admin) ============ */
.editor-styles-wrapper .hpy-sec{padding:64px 24px}
.editor-styles-wrapper .hpy-reveal{opacity:1}
.editor-styles-wrapper .hpy-hp{position:static;opacity:1;height:auto;width:auto}

/* ============ v1.2 — Ekosistem produk (light, futuristik lembut) ============ */
.hpy-sec--dark{background:linear-gradient(180deg,#f8f9fc 0%,#eef3fc 100%);position:relative;overflow:hidden}
.hpy-sec--dark::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(16,32,46,.08) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 80%);mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 80%);pointer-events:none}
.hpy-sec--dark::after{content:"";position:absolute;width:820px;height:820px;border-radius:50%;left:50%;top:-560px;transform:translateX(-50%);background:radial-gradient(circle,rgba(59,111,212,.16),rgba(229,133,11,.08) 45%,transparent 70%);filter:blur(30px);pointer-events:none}
.hpy-sec--dark>*{position:relative;z-index:1}
.hpy-grid--suite.hpy-grid--suite{gap:18px}
.hpy-suite-card{position:relative;background:rgba(255,255,255,.85);border:1px solid var(--border);border-radius:20px;padding:22px 22px 24px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:var(--sh-sm);transition:transform .3s,border-color .3s,box-shadow .3s;display:flex;flex-direction:column}
.hpy-suite-card::before{content:"";position:absolute;inset:-1px;border-radius:21px;padding:1.5px;background:linear-gradient(135deg,var(--orange),var(--blue));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s;pointer-events:none}
.hpy-suite-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg),0 0 50px rgba(59,111,212,.12)}
.hpy-suite-card:hover::before{opacity:1}
.hpy-suite-card.is-featured{grid-column:span 2;background:linear-gradient(135deg,#fff 0%,var(--blue-light) 100%)}
@media(max-width:700px){.hpy-suite-card.is-featured{grid-column:auto}}
.hpy-suite-card>*{margin:0}
.hpy-suite-logo{margin:0 0 16px!important;min-height:96px;display:flex;align-items:center;justify-content:center}
.hpy-suite-logo img{display:block;width:100%;max-width:280px;height:auto;margin:0 auto;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(16,32,46,.12))}
.is-featured .hpy-suite-logo{min-height:150px}
.is-featured .hpy-suite-logo img{max-width:380px}
.hpy-suite-tag{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:8px!important}
.hpy-suite-desc{font-size:13.5px;color:var(--muted);line-height:1.7;margin-bottom:14px!important}
.hpy-suite-list{list-style:none;padding:0;margin:0 0 16px!important;display:grid;gap:7px}
.is-featured .hpy-suite-list{grid-template-columns:1fr 1fr}
.hpy-suite-list li{font-size:13px;color:var(--text2);padding-left:22px;position:relative}
.hpy-suite-list li::before{content:"";position:absolute;left:0;top:5px;width:12px;height:12px;background:linear-gradient(135deg,var(--orange),var(--blue));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/100% no-repeat}
.hpy-suite-card .hpy-more{margin-top:auto!important}
.hpy-suite-strip{margin-top:36px;gap:10px!important}
.hpy-suite-chip{margin:0;font-size:12.5px;font-weight:600;color:var(--text2);background:#fff;border:1px solid var(--border);padding:7px 14px;border-radius:100px}
/* Halaman produk (hero terang) */
.hpy-product-hero{padding:72px 24px 64px;text-align:center;background:linear-gradient(160deg,#fff 0%,#f8f9fc 60%,#eef3fc 100%)}
.hpy-product-hero-logo{margin:0 auto 12px!important;max-width:520px}
.hpy-product-hero-logo img{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(16,32,46,.15))}
.hpy-product-hero h1{font-size:clamp(2rem,4vw,3rem);margin:8px 0 14px}
.hpy-product-hero .hpy-lead{max-width:640px;margin:0 auto 28px}
.hpy-product-hero .wp-block-button.hpy-btn-white .wp-block-button__link{border:1.5px solid var(--border2);box-shadow:none;color:var(--text2)}

/* ============ Banner cookie ============ */
.hpy-cookie{position:fixed;left:20px;bottom:20px;z-index:9998;width:min(720px,calc(100% - 240px));background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--sh-lg);padding:16px 20px;display:flex;align-items:center;gap:18px;font-size:13.5px;color:var(--text2);line-height:1.6}
.hpy-cookie[hidden]{display:none!important}
.hpy-cookie p{margin:0;flex:1}
.hpy-cookie a{color:var(--blue);font-weight:600}
.hpy-cookie-actions{display:flex;gap:8px;flex-shrink:0}
.hpy-cookie-btn{font:inherit;font-size:13px;font-weight:700;padding:9px 18px;border-radius:999px;border:1.5px solid var(--border2);background:#fff;color:var(--text2);cursor:pointer;transition:.2s}
.hpy-cookie-btn:hover{border-color:var(--text)}
.hpy-cookie-btn.is-primary{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}
.hpy-cookie-btn.is-primary:hover{background:var(--blue)}
@media(max-width:781px){.hpy-cookie{flex-direction:column;align-items:stretch;left:12px;bottom:12px;width:calc(100% - 24px)}.hpy-cookie-actions{justify-content:flex-end}.hpy-cookie-open .hpy-wa-float{display:none}}

/* ============ Artikel blog ============ */
.hpy-single .wp-block-post-content>*{margin-top:0;margin-bottom:1.1em}
.hpy-single .wp-block-post-content h2{margin-top:2em;font-size:1.5rem}
.hpy-single .wp-block-post-content h3{margin-top:1.6em;font-size:1.2rem}
.hpy-single .wp-block-post-content li{margin-bottom:.4em}
.hpy-single .hpy-lead{font-size:1.15rem;color:var(--text2)}
.hpy-callout{background:var(--orange-light);border-left:4px solid var(--orange);border-radius:12px;padding:16px 20px;margin:1.5em 0}
.hpy-callout p{margin:0;color:var(--text2)}
.hpy-sign{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px 20px;margin:0 0 12px;box-shadow:var(--sh-sm)}
.hpy-sign-num{flex-shrink:0;width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--orange),var(--blue));color:#fff;font-family:var(--sora);font-weight:800;display:flex;align-items:center;justify-content:center;margin:0!important}
.hpy-sign-body>*{margin:0 0 .4em}
.hpy-sign-body h3{font-size:1.05rem}
.hpy-sign-body p{font-size:.95rem;color:var(--muted)}
.hpy-table{width:100%;border-collapse:collapse;font-size:.92rem}
.hpy-table th,.hpy-table td{border:1px solid var(--border);padding:10px 12px;text-align:left;vertical-align:top}
.hpy-table th{background:var(--surface2);font-weight:700}
.hpy-single .wp-block-post-content .wp-block-quote{border-left:4px solid var(--blue);background:var(--blue-light);padding:14px 20px;border-radius:0 12px 12px 0}
.hpy-post-card .wp-block-post-featured-image:empty{display:none}
.hpy-sign.hpy-sign{display:flex!important;flex-direction:row;gap:16px}
.hpy-sign>.hpy-sign-body{margin:0;flex:1}
.hpy-post-meta{gap:10px!important;align-items:center;margin-bottom:6px}
.hpy-post-cat a{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-dark);background:var(--orange-light);padding:3px 10px;border-radius:100px;text-decoration:none}
.hpy-post-card .hpy-post-meta{padding:0 22px;margin-top:6px}
.hpy-single .hpy-post-meta{margin-bottom:12px}
.hpy-single .wp-block-post-content .hpy-sign-body h3{margin-top:0}
.hpy-sign>.hpy-sign-body{margin:0!important}
.hpy-single .wp-block-post-content .hpy-sign-body h2,.hpy-single .wp-block-post-content .hpy-callout h2{margin-top:0;font-size:1.15rem}

/* ============ Logo HPY berdenyut (hero hub) ============ */
.hpy-hub-core{animation:hpyCorePulse 2.8s ease-in-out infinite}
.hpy-hub-core img{animation:hpyLogoPulse 2.8s ease-in-out infinite;transform-origin:center}
@keyframes hpyCorePulse{0%,100%{box-shadow:0 16px 44px rgba(229,133,11,.32),0 6px 16px rgba(16,32,46,.12)}50%{box-shadow:0 16px 60px rgba(229,133,11,.55),0 0 0 10px rgba(229,133,11,.08),0 6px 16px rgba(16,32,46,.12)}}
@keyframes hpyLogoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.hpy-hub-core,.hpy-hub-core img{animation:none}}
/* logo hub 2x lebih besar */
.hpy-hub{max-width:600px}
.hpy-hub-core{width:272px;height:220px;border-radius:40px;padding:28px 32px}
.hpy-hub-core::before,.hpy-hub-core::after{inset:-8px;border-radius:46px}
.hpy-node.n2{margin:-22px 0 0 22px}.hpy-node.n4{margin:22px 0 0 22px}.hpy-node.n6{margin:22px 0 0 -22px}.hpy-node.n8{margin:-22px 0 0 -22px}
.hpy-node.n1{margin-top:-10px}.hpy-node.n5{margin-top:10px}.hpy-node.n3{margin-left:10px}.hpy-node.n7{margin-left:-10px}
@media(max-width:600px){.hpy-hub-core{width:200px;height:162px;border-radius:30px;padding:20px 24px}}
.hpy-hub-core{width:256px;height:208px}
.hpy-node.n2{margin:-40px 0 0 40px}.hpy-node.n4{margin:40px 0 0 40px}.hpy-node.n6{margin:40px 0 0 -40px}.hpy-node.n8{margin:-40px 0 0 -40px}
.hpy-node.n1{margin-top:-16px}.hpy-node.n5{margin-top:16px}.hpy-node.n3{margin-left:16px}.hpy-node.n7{margin-left:-16px}
/* ikon node hub via CSS mask (SVG inline bisa dibuang oleh kses saat simpan) */
.hpy-node .ico::before{content:"";width:15px;height:15px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.hpy-node .ico svg{display:none}
.hpy-node.n1{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7 5V8l-7 5V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M17 18h1'/%3E%3Cpath d='M12 18h1'/%3E%3Cpath d='M7 18h1'/%3E%3C/svg%3E")}
.hpy-node.n2{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpolyline points='16 7 22 7 22 13'/%3E%3C/svg%3E")}
.hpy-node.n3{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8'/%3E%3Cpath d='M12 17.5v-11'/%3E%3C/svg%3E")}
.hpy-node.n4{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E")}
.hpy-node.n5{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")}
.hpy-node.n6{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M9 14l2 2 4-4'/%3E%3C/svg%3E")}
.hpy-node.n7{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E")}
.hpy-node.n8{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E")}

/* ============ Hero video background ============ */
.hpy-hero{isolation:isolate}
.hpy-hero-video{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hpy-hero-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(1.05)}
.hpy-hero-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.9) 38%,rgba(255,255,255,.55) 65%,rgba(238,243,252,.35) 100%)}
.hpy-hero::before,.hpy-hero::after{z-index:1}
.hpy-hero>.wp-block-columns{position:relative;z-index:2}
.hpy-hero-cols .wp-block-column:first-child{position:relative}
.hpy-hub-core{box-shadow:0 16px 44px rgba(229,133,11,.32),0 6px 16px rgba(16,32,46,.12),0 0 0 1px rgba(255,255,255,.6)}
.hpy-node{background:rgba(255,255,255,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@media(max-width:781px){.hpy-hero-veil{background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.85) 55%,rgba(255,255,255,.7) 100%)}}
@media(prefers-reduced-motion:reduce){.hpy-hero-video video{display:none}.hpy-hero-video{background:url() center/cover}}
.hpy-hero>.hpy-hero-video{position:absolute!important;inset:0;width:100%!important;max-width:none!important;margin:0!important;z-index:0!important}
.hpy-hero-video .hpy-hero-veil{display:block;position:absolute;inset:0;z-index:1}
.hpy-hero-video video{z-index:0}
.hpy-hero-cols .wp-block-column{position:relative;z-index:2}
.hpy-hero-video{background:center/cover no-repeat}
@media(prefers-reduced-motion:reduce){.hpy-hero-video video{display:none}}
/* hero tanpa hub: veil lebih ringan di kanan agar video terlihat */
.hpy-hero-veil{background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.92) 40%,rgba(255,255,255,.45) 62%,rgba(255,255,255,.12) 100%)}
.hpy-hero{min-height:min(calc(100vh - 68px),760px)}

/* Logo topbar berdenyut */
.hpy-header .hpy-logo img{animation:hpyLogoPulse 2.8s ease-in-out infinite;transform-origin:center}
@media(prefers-reduced-motion:reduce){.hpy-header .hpy-logo img{animation:none}}

/* ============ Marquee logo klien ============ */
.hpy-marquee{overflow:hidden;position:relative;padding:10px 0;margin:8px 0 20px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hpy-marquee-track{display:flex;flex-wrap:nowrap;gap:56px!important;align-items:center;width:max-content;animation:hpyMarquee 45s linear infinite;will-change:transform}
.hpy-marquee:hover .hpy-marquee-track{animation-play-state:paused}
@keyframes hpyMarquee{to{transform:translateX(-50%)}}
.hpy-marquee-logo{margin:0!important;flex-shrink:0}
.hpy-marquee-logo img{height:56px;width:auto;max-width:170px;object-fit:contain;filter:grayscale(1);opacity:.75;transition:.25s}
.hpy-marquee-logo:hover img{filter:none;opacity:1}
.hpy-clients--marquee .hpy-more{margin-top:8px}
@media(prefers-reduced-motion:reduce){.hpy-marquee-track{animation:none}}
/* logo topbar +75% */
.hpy-header .hpy-logo img{height:63px;max-width:263px}
.hpy-header-inner{min-height:76px}
@media(max-width:781px){.hpy-header .hpy-logo img{height:48px}}

/* ============ Banner value proposition (harga) ============ */
.hpy-value-banner{position:relative;overflow:hidden;background:linear-gradient(135deg,#fff 0%,var(--orange-light) 100%);border:1.5px solid rgba(229,133,11,.35);border-radius:20px;padding:36px 32px;margin:0 0 40px;text-align:center;box-shadow:var(--sh-md)}
.hpy-value-banner::after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(229,133,11,.14),transparent 70%);right:-120px;top:-160px;pointer-events:none}
.hpy-value-banner>*{position:relative;z-index:1}
.hpy-value-eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-dark);margin:0 0 8px}
.hpy-value-title{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:0 0 12px}
.hpy-value-text{color:var(--text2);max-width:680px;margin:0 auto 18px;font-size:1rem;line-height:1.75}
.hpy-value-points{gap:10px!important;margin-bottom:22px}

/* ============ Social footer ============ */
.hpy-social{margin-top:14px;gap:10px!important}
.hpy-social-link{margin:0}
.hpy-social-link a{display:inline-flex;align-items:center;gap:9px;color:#cbd5e1;font-size:13.5px;font-weight:600;text-decoration:none;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:8px 15px 8px 10px;border-radius:100px;transition:.2s}
.hpy-social-link a:hover{color:#fff;border-color:var(--orange);background:rgba(229,133,11,.15)}
.hpy-social-link a::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.hpy-social-ig a{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='20' x='2' y='2' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' x2='17.51' y1='6.5' y2='6.5'/%3E%3C/svg%3E")}
.hpy-footer-company{color:#fff!important;font-family:var(--sora);font-weight:700;font-size:15px;margin:14px 0 4px!important}
.hpy-footer-tagline{margin-top:0!important;font-size:13.5px}
.hpy-price-unit{font-weight:600;color:var(--text2)}
.hpy-avatar-img{margin:0!important;width:44px;height:44px;flex-shrink:0}
.hpy-avatar-img img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--orange-light);box-shadow:0 2px 8px rgba(16,32,46,.15)}

/* Grid dengan jumlah kartu sedikit: pakai auto-fit agar tidak menyisakan kolom kosong (center) */
.hpy-tax .hpy-grid.hpy-grid,
.hpy-tax-detail .hpy-grid.hpy-grid,
.hpy-testimonials .hpy-grid.hpy-grid,
.hpy-grid--price.hpy-grid--price{grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}

/* ============ Peta lokasi klien ============ */
.hpy-map{position:relative;max-width:980px;margin:8px auto 36px}
.hpy-map img{width:100%;height:auto;display:block;filter:drop-shadow(0 8px 24px rgba(59,111,212,.18))}
.hpy-pin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;pointer-events:none}
.hpy-pin i{width:12px;height:12px;border-radius:50% 50% 50% 0;background:var(--orange);transform:rotate(-45deg);box-shadow:0 2px 6px rgba(201,111,5,.5);position:relative}
.hpy-pin i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#fff}
.hpy-pin::after{content:"";position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);width:14px;height:5px;border-radius:50%;background:rgba(16,32,46,.15)}
.hpy-pin b{order:-1;font-size:11px;font-weight:700;color:var(--text);background:#fff;border:1px solid var(--border);border-radius:100px;padding:2px 9px;margin-bottom:4px;white-space:nowrap;box-shadow:var(--sh-sm)}
.hpy-pin i{animation:hpyPinDrop 2.6s ease-in-out infinite}
@keyframes hpyPinDrop{0%,100%{transform:rotate(-45deg) translate(0,0)}50%{transform:rotate(-45deg) translate(-2px,-2px)}}
@media(max-width:600px){.hpy-pin b{font-size:9px;padding:1px 6px}}
@media(prefers-reduced-motion:reduce){.hpy-pin i{animation:none}}
.hpy-pin.is-below b{order:1;margin:4px 0 0}
.hpy-pin.is-below{transform:translate(-50%,-14px)}
/* Peta: sembunyikan nama kota (muncul hanya saat hover pin) */
.hpy-pin{pointer-events:auto}
.hpy-pin b{display:none}
.hpy-pin:hover b,.hpy-pin.is-below:hover b{display:block;position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);margin:0;order:0}
/* Filter klien: auto-fit supaya kartu yang tersisa melebar & rata (tidak menyisakan kolom kosong) */
.hpy-grid--logos.hpy-grid--logos{grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr))}
.hpy-grid--logos .hpy-logo-card img{max-height:64px}