:root{
  --pink:#FF4D8D;
  --rose:#E84393;
  --purple:#9B51E0;
  --violet:#5B2EFF;
  --black:#0F0F0F;
  --bg:#FFFFFF;
  --bg-soft:#FBF7FF;
  --gradient: linear-gradient(90deg, var(--pink), var(--rose), var(--purple), var(--violet));
  --radius:14px;
  --shadow: 0 8px 24px rgba(91,46,255,.12);
}
*{box-sizing:border-box}
body{margin:0;font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--black);line-height:1.55}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0 0 .5rem;font-weight:700}
p{margin:0 0 1rem}
.container{max-width:1180px;margin:0 auto;padding:0 24px}
.btn{display:inline-block;padding:12px 26px;border-radius:999px;font-weight:600;border:none;cursor:pointer;font-size:15px;transition:.2s transform,.2s box-shadow}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--gradient);color:#fff;box-shadow:var(--shadow)}
.btn-outline{background:#fff;color:var(--violet);border:2px solid var(--purple)}
.btn-dark{background:var(--black);color:#fff}
.btn-sm{padding:7px 16px;font-size:13px;border-radius:8px}
.btn-danger{background:#fff;color:#d63031;border:2px solid #d63031}

/* ---------- Navbar ---------- */
.navbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid #f1e6fb}
.navbar .container{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{font-size:22px;font-weight:800;background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-wrap{display:inline-flex;align-items:center;gap:10px}
.brand-mark{flex-shrink:0;display:block}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-weight:500;color:var(--black)}
.nav-links a:hover{color:var(--rose)}

/* ---------- Hero ---------- */
.hero{padding:90px 0 70px;background:radial-gradient(circle at 80% -10%, #ffe1ee 0%, #fff 55%)}
.hero h1{font-size:44px;line-height:1.15;max-width:680px}
.hero .highlight{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:18px;color:#444;max-width:560px}
.hero-actions{display:flex;gap:14px;margin-top:24px}

/* ---------- Sections ---------- */
.section{padding:70px 0}
.section-title{text-align:center;max-width:640px;margin:0 auto 46px}
.section-title span.tag{display:inline-block;background:var(--bg-soft);color:var(--violet);font-weight:700;font-size:13px;padding:6px 16px;border-radius:999px;margin-bottom:12px}

.grid{display:grid;gap:24px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr}}

/* ---------- Cards ---------- */
.card{background:#fff;border:1px solid #f1e6fb;border-radius:var(--radius);padding:26px;box-shadow:0 2px 10px rgba(15,15,15,.04)}
.module-card{border-radius:var(--radius);padding:28px;background:var(--bg-soft);border:1px solid #f1e6fb;transition:.2s}
.module-card:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.module-card .icon{width:52px;height:52px;border-radius:14px;background:var(--gradient);display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;margin-bottom:16px}
.module-card ul{margin:14px 0 0;padding-left:18px;font-size:14px;color:#444}
.module-card ul li{margin-bottom:4px}
.module-block{padding:16px 0;border-bottom:1px solid #f4eefc}
.module-block:last-child{border-bottom:none;padding-bottom:0}
.module-block:first-child{padding-top:0}
.module-block-title{font-weight:700;font-size:14.5px;color:#2a2a2a;margin-bottom:10px}
.quicklink-grid{display:flex;flex-wrap:wrap;gap:8px}
.quicklink-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;background:var(--bg-soft);border:1px solid #f1e6fb;color:#444;font-size:13px;font-weight:600;text-decoration:none;transition:.15s}
.quicklink-btn svg{color:var(--violet);flex-shrink:0}
.quicklink-btn:hover{background:var(--gradient);color:#fff;border-color:transparent;transform:translateY(-1px)}
.quicklink-btn:hover svg{color:#fff}
.mini-stat{background:var(--bg-soft);border:1px solid #f1e6fb;border-radius:12px;padding:14px;text-align:center}
.mini-stat b{display:block;font-size:18px;color:var(--violet);margin-bottom:2px}
.mini-stat span{font-size:12px;color:#888}
.event-link-label{font-size:12.5px;font-weight:700;color:#555;margin-bottom:6px}
.event-link-box{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.event-link-box input{flex:1;min-width:220px;padding:9px 12px;border:1px solid #f1e6fb;border-radius:9px;background:var(--bg-soft);font-size:12.5px;color:#555}
.btn-copy-inline{border:none;background:none;cursor:pointer;color:#999;padding:2px 4px;vertical-align:middle;border-radius:5px}
.btn-copy-inline:hover{color:var(--violet);background:var(--bg-soft)}

.pricing-card{border-radius:var(--radius);padding:32px 26px;border:2px solid #f1e6fb;position:relative;background:#fff}
.pricing-card.featured{border-color:var(--purple);box-shadow:var(--shadow)}
.pricing-card .price{font-size:34px;font-weight:800;color:var(--violet);margin:12px 0}
.pricing-card .price small{font-size:14px;color:#888;font-weight:500}
.pricing-card ul{list-style:none;padding:0;margin:18px 0;font-size:14px}
.pricing-card ul li{padding:6px 0;border-bottom:1px dashed #eee}
.badge{position:absolute;top:-12px;right:24px;background:var(--gradient);color:#fff;font-size:12px;font-weight:700;padding:5px 14px;border-radius:999px}

footer{background:var(--black);color:#ddd;padding:50px 0 24px;margin-top:40px}
footer a{color:#ddd}
footer .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px}
.foot-copy{text-align:center;color:#888;font-size:13px;margin-top:30px}

/* ---------- Forms ---------- */
.form-group{margin-bottom:18px}
label{display:block;font-weight:600;margin-bottom:6px;font-size:14px}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=date],input[type=datetime-local],select,textarea{
  width:100%;padding:12px 14px;border:1.5px solid #e6d9f5;border-radius:10px;font-size:15px;font-family:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--purple)}
.pw-field{position:relative}
.pw-field input[type=password],.pw-field input[type=text]{padding-right:44px}
.pw-toggle{position:absolute;top:50%;right:5px;transform:translateY(-50%);background:none;border:none;padding:7px;margin:0;cursor:pointer;color:#aaa;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:.15s color,.15s background}
.pw-toggle:hover{color:var(--violet);background:var(--bg-soft)}
.pw-toggle:focus-visible{outline:2px solid var(--purple);outline-offset:1px}
.auth-wrap{max-width:440px;margin:70px auto;padding:36px;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid #f1e6fb}
.alert{padding:12px 16px;border-radius:10px;margin-bottom:18px;font-size:14px}
.alert-success{background:#eafff2;color:#0a8a3f;border:1px solid #b7f0cd}
.alert-error{background:#fff0f0;color:#c0392b;border:1px solid #ffd2d2}
.alert-info{background:var(--bg-soft);color:var(--violet);border:1px solid #ecd9ff}

/* ---------- Dashboard layout ---------- */
.dash{display:flex;min-height:100vh}
.dash-sidebar{width:260px;background:var(--black);color:#eee;padding:24px 0;flex-shrink:0}
.dash-sidebar .brand{padding:0 24px 20px;display:flex;align-items:center;gap:10px}
.dash-sidebar .brand .brand-mark{flex-shrink:0}
.dash-sidebar .brand span{font-weight:800;font-size:19px;background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.dash-sidebar a{display:flex;align-items:center;gap:12px;padding:10px 20px;color:#aaa;font-size:14px;border-left:3px solid transparent;transition:.15s background,.15s color}
.dash-sidebar a .menu-icon{flex-shrink:0;opacity:.65;transition:.15s opacity,.15s transform}
.dash-sidebar a:hover{background:#1a1a1a;color:#fff}
.dash-sidebar a:hover .menu-icon{opacity:1;transform:translateX(1px)}
.dash-sidebar a.active{background:linear-gradient(90deg, rgba(255,77,141,.14), rgba(91,46,255,.05));color:#fff;border-left-color:var(--pink)}
.dash-sidebar a.active .menu-icon{opacity:1;color:var(--pink)}
.dash-sidebar .group-label{padding:18px 20px 6px;font-size:10.5px;text-transform:uppercase;color:#666;letter-spacing:.09em;font-weight:700}
.dash-sidebar .group-label.nav-group-toggle{padding-right:22px;position:relative;cursor:pointer}
.dash-sidebar .group-label.nav-group-toggle:hover{color:#999}
.dash-sidebar .group-label .chev{position:absolute;right:18px;top:15px;opacity:.6}
.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--pink);color:#fff;font-size:10px;font-weight:800;line-height:1}
.dash-main{flex:1;background:#fdfbff;padding:28px 34px;min-width:0}
.dash-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;margin-bottom:28px}
.stat-card{background:#fff;border-radius:var(--radius);padding:20px;border:1px solid #f1e6fb}
.stat-card .num{font-size:28px;font-weight:800;color:var(--violet)}
.stat-card .label{font-size:13px;color:#777}

table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden}
table th,table td{padding:12px 14px;text-align:left;font-size:14px;border-bottom:1px solid #f1e6fb}
table th{background:var(--bg-soft);color:var(--violet);font-weight:700}
.table-wrap{overflow-x:auto;border:1px solid #f1e6fb;border-radius:var(--radius)}
.pill{display:inline-block;padding:3px 12px;border-radius:999px;font-size:12px;font-weight:700}
.pill-green{background:#eafff2;color:#0a8a3f}
.pill-yellow{background:#fff8e1;color:#b8860b}
.pill-red{background:#fff0f0;color:#c0392b}
.pill-purple{background:var(--bg-soft);color:var(--violet)}
.pill-gray{background:#f2f2f4;color:#777}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px;flex-wrap:wrap}

/* ---------- Public event pages ---------- */
.event-banner{height:320px;background-size:cover;background-position:center;position:relative}
.event-banner .overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.65),rgba(0,0,0,.15));display:flex;align-items:flex-end}
.event-banner .overlay .container{padding-bottom:30px;color:#fff}
.ticket-box{border:2px dashed var(--purple);border-radius:var(--radius);padding:26px;text-align:center;background:var(--bg-soft)}
.leaderboard-row{display:flex;justify-content:space-between;padding:12px 16px;border-radius:10px;margin-bottom:8px;background:#fff;border:1px solid #f1e6fb}
.leaderboard-row.top1{background:var(--gradient);color:#fff;font-weight:700}
.wall-post{background:#fff;border:1px solid #f1e6fb;border-radius:var(--radius);padding:16px;margin-bottom:12px}
.center-note{text-align:center;color:#888;padding:40px 0}

/* Wedding theme */
.wedding-hero{min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--gradient);color:#fff;padding:60px 20px}
.wedding-hero h1{font-family:Georgia,serif;font-size:42px}
.timeline-item{display:flex;gap:20px;margin-bottom:26px}
.timeline-item .dot{width:14px;height:14px;border-radius:50%;background:var(--gradient);margin-top:6px;flex-shrink:0}

@media (max-width:800px){
  .dash{flex-direction:column}
  .dash-sidebar{width:100%}
  .hero h1{font-size:30px}
}

/* Sub Client self-service portal (public/subclient/*.php) */
.sc-topbar{background:#fff;border-bottom:1px solid #f1e6fb;padding:12px 0}
.sc-topbar .container{display:flex;justify-content:space-between;align-items:center}
.sc-topbar .who{font-size:13.5px;color:#555}
.sc-topbar .who b{color:var(--violet)}
.sc-tabs{display:flex;gap:4px;flex-wrap:wrap;background:#fff;border-bottom:1px solid #f1e6fb;padding:0}
.sc-tabs .container{display:flex;gap:4px;flex-wrap:wrap}
.sc-tabs a{padding:13px 16px;font-size:13.5px;font-weight:600;color:#777;border-bottom:2.5px solid transparent;transition:.15s;white-space:nowrap}
.sc-tabs a:hover{color:var(--violet)}
.sc-tabs a.active{color:var(--violet);border-bottom-color:var(--violet)}

/* ===================== Page-level section tabs =====================
   Used for pages that group several distinct areas together (e.g. the
   Reseller "Sub Client" page: daftar sub client, pendaftaran mandiri,
   rekening, permintaan sewa perangkat) so each area reads as its own
   clear destination instead of one long confusing scroll. */
.page-tabs{display:flex;gap:6px;flex-wrap:wrap;background:var(--bg-soft);border-radius:14px;padding:6px;margin-bottom:22px}
.page-tabs button{display:inline-flex;align-items:center;gap:9px;padding:7px 16px 7px 7px;border-radius:12px;border:none;background:transparent;color:#666;font-family:inherit;font-weight:600;font-size:13.5px;cursor:pointer;transition:.18s;white-space:nowrap}
.page-tabs button svg{width:30px;height:30px;padding:7px;border-radius:10px;background:#fff;color:var(--violet);box-shadow:0 1px 3px rgba(91,46,255,.14);transition:.18s;flex-shrink:0}
.page-tabs button:hover{color:var(--violet)}
.page-tabs button:hover svg{background:#f1e6fb;transform:translateY(-1px)}
.page-tabs button.active{background:#fff;color:var(--violet);box-shadow:0 2px 8px rgba(91,46,255,.14)}
.page-tabs button.active svg{background:var(--gradient);color:#fff;box-shadow:0 3px 10px rgba(91,46,255,.35)}
.page-tabs button .tab-badge{background:var(--gradient);color:#fff;border-radius:999px;font-size:10.5px;font-weight:700;padding:1px 7px;line-height:1.5}
.page-tab-panel{display:none}
.page-tab-panel.active{display:block;animation:pageTabFade .18s ease}
@keyframes pageTabFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* ===================== Service tabs (pill/icon cards) =====================
   Used to separate distinct sellable services (Sewa Sistem, Sewa Perangkat,
   Manpower, Blasting WA/Email) that used to be crammed into one shared
   grid of price fields -- each service now gets its own icon, its own tab,
   and its own short explanation of what it means before the price field. */
.svc-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
@media (max-width:760px){.svc-tabs{grid-template-columns:repeat(2,1fr)}}
.svc-tab{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px 14px 12px;border-radius:14px;border:1.5px solid #f1e6fb;background:#fff;cursor:pointer;text-align:left;font-family:inherit;transition:.15s;position:relative}
.svc-tab:hover{border-color:var(--purple);transform:translateY(-2px)}
.svc-tab.active{border-color:var(--violet);background:var(--bg-soft);box-shadow:0 6px 18px rgba(91,46,255,.14)}
.svc-tab .svc-ico{width:38px;height:38px;border-radius:11px;background:var(--gradient);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.svc-tab .svc-ico svg{width:19px;height:19px}
.svc-tab b{font-size:13px;color:var(--black)}
.svc-tab span.svc-sub{font-size:11px;color:#999;font-weight:500}
.svc-tab .svc-check{position:absolute;top:10px;right:10px;width:18px;height:18px;border-radius:50%;background:#0a8a3f;color:#fff;display:none;align-items:center;justify-content:center;font-size:11px}
.svc-tab.svc-active-price .svc-check{display:flex}
.svc-panel{display:none;background:var(--bg-soft);border:1px solid #f1e6fb;border-radius:14px;padding:18px}
.svc-panel.active{display:block;animation:pageTabFade .18s ease}
.svc-panel .svc-panel-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.svc-panel .svc-panel-head .svc-ico{width:44px;height:44px;border-radius:12px;background:var(--gradient);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;box-shadow:0 4px 12px rgba(91,46,255,.25)}
.svc-panel .svc-panel-head .svc-ico svg{width:22px;height:22px}
.svc-panel .svc-panel-head h4{margin:0;font-size:15px}
.svc-panel .svc-panel-head p{margin:2px 0 0;font-size:12px;color:#888}

/* ---- Price mode: harga manual vs markup dari harga dasar Juara Event ---- */
.price-base-ref{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e6d9f5;border-radius:12px;padding:10px 14px;margin-bottom:14px}
.price-base-ref .price-base-ico{width:32px;height:32px;border-radius:9px;background:var(--gradient);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.price-base-ref .price-base-ico svg{width:16px;height:16px}
.price-base-ref b{color:var(--violet);font-size:14.5px}
.price-base-ref span{font-size:11.5px;color:#888;display:block}
.price-mode{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.price-mode label{flex:1;min-width:140px;display:flex;align-items:center;gap:7px;padding:9px 12px;border:1.5px solid #e6d9f5;border-radius:10px;background:#fff;cursor:pointer;font-weight:600;font-size:12.5px;color:#666}
.price-mode input{width:auto;margin:0}
.price-mode label:has(input:checked){border-color:var(--violet);background:var(--bg-soft);color:var(--violet)}
.price-markup-fields{display:none;gap:12px;align-items:flex-end;margin-bottom:10px}
.price-markup-fields.active{display:flex;flex-wrap:wrap}
.price-final-preview{font-size:12.5px;color:#777}
.price-final-preview b{color:#0a8a3f;font-size:15px}

/* ---- Quick-start cards on Ringkasan (dashboard/subscription.php & dashboard/reseller/sub_clients.php) ---- */
.lt-quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.lt-quick-card{border:1px solid #f1e6fb;border-radius:14px;padding:16px;cursor:pointer;text-align:left;background:#fff;transition:.15s}
.lt-quick-card:hover{border-color:var(--purple);box-shadow:var(--shadow)}
.lt-quick-card .lt-quick-icon{width:38px;height:38px;border-radius:10px;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;color:var(--violet);margin-bottom:10px}
.lt-quick-card b{display:block;margin-bottom:4px;font-size:14.5px}
.lt-quick-card span{color:#777;font-size:12.5px}

/* ===================== Role-access permission grid =====================
   Checklist used in "Akun & Akses Pengguna" for a Client Admin to pick
   exactly which menus one Staff account may open. */
.perm-lock-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg-soft);border:1px solid #f1e6fb;border-radius:12px;padding:12px 14px;margin-bottom:12px}
.perm-lock-toggle .txt b{display:block;font-size:13px}
.perm-lock-toggle .txt span{font-size:11.5px;color:#888}
.switch{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:#ddd;border-radius:999px;transition:.2s;cursor:pointer}
.switch .slider:before{content:"";position:absolute;height:16px;width:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked + .slider{background:var(--violet)}
.switch input:checked + .slider:before{transform:translateX(18px)}
.perm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (max-width:520px){.perm-grid{grid-template-columns:1fr}}
.perm-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;border:1.5px solid #f1e6fb;background:#fff;cursor:pointer;transition:.15s}
.perm-item:hover{border-color:var(--purple)}
.perm-item.checked{border-color:var(--violet);background:var(--bg-soft)}
.perm-item .p-ico{width:28px;height:28px;border-radius:8px;background:var(--gradient);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.perm-item .p-ico svg{width:15px;height:15px}
.perm-item span{font-size:12.5px;font-weight:600;flex:1}
.perm-item input{width:16px;height:16px;accent-color:var(--violet);flex-shrink:0}
.perm-group-label{font-size:11px;font-weight:700;color:#aaa;text-transform:uppercase;letter-spacing:.04em;margin:14px 0 8px}
.perm-group-label:first-child{margin-top:0}
.role-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px}
.role-chip.role-admin{background:#eef1ff;color:#3949ab}
.role-chip.role-staff{background:#fff4e0;color:#b8860b}

/* ---------- Wedding Digital System — featured elegant module card ----------
   Scoped to .module-card-wed only; every selector below is prefixed so this
   block cannot affect the other 5 module cards or any other page. */
.module-card-wed{
  grid-column: 1 / -1;
  background: linear-gradient(155deg, #FFF9F6 0%, #FBF2EC 60%, #FFF9F6 100%);
  border: 1px solid #EFD9CE;
  position: relative;
  overflow: hidden;
  padding: 32px 34px;
}
.module-card-wed::before{
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(rgba(183,110,121,.10) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
.module-card-wed:hover{ box-shadow: 0 16px 36px rgba(183,110,121,.18); }
.module-card-wed > *{ position: relative; z-index: 1; }
.module-card-wed .icon-wed{
  background: linear-gradient(135deg, #B76E79, #D4AF37);
  box-shadow: 0 8px 20px rgba(183,110,121,.32);
}
.module-card-wed h3{ font-family:'Playfair Display', Georgia, serif; color:#3B2E2A; }
.module-card-wed p{ color:#7a6b65; max-width: 640px; }

.feature-chip-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin: 22px 0 4px;
}
.feature-chip{
  display: flex; align-items: center; gap: 10px;
  background: #fff;
  border: 1px solid #EFD9CE;
  border-radius: 12px;
  padding: 10px 12px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feature-chip:hover{
  border-color: #B76E79;
  box-shadow: 0 8px 18px rgba(183,110,121,.16);
  transform: translateY(-2px);
}
.feature-chip-ic{
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(183,110,121,.16), rgba(212,175,55,.16));
  color: #B76E79;
}
.feature-chip-label{ font-size: 13px; font-weight: 600; color: #3B2E2A; line-height: 1.3; }
.feature-chip-cta{
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 16px;
  font-weight: 700; font-size: 14px; color: #B76E79;
}
.feature-chip-cta svg{ transition: transform .18s ease; }
.feature-chip-cta:hover svg{ transform: translate(3px, -2px); }

@media (max-width: 640px){
  .module-card-wed{ padding: 24px 20px; }
  .feature-chip-grid{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}