:root{--primary:#3f46d8;--primary2:#23a6df;--navy:#0f2742;--text:#19324a;--muted:#718395;--bg:#f8fafc;--line:#e5eaf0;--green:#0f9f6e}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:#fff;color:var(--text);line-height:1.55}a{text-decoration:none;color:inherit}.container{max-width:1180px;margin:auto;padding:0 24px}
.nav{height:76px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.96);position:sticky;top:0;z-index:50;backdrop-filter:blur(12px)}.navin{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}.logo,.custom-logo{height:50px;width:auto;max-width:220px}.links{display:flex;gap:24px;font-size:14px;color:#56697b}.links a:hover{color:var(--primary)}.actions{display:flex;gap:10px}.btn{border:0;border-radius:10px;padding:12px 18px;font-size:14px;font-weight:750;cursor:pointer;transition:.2s}.btn:hover{transform:translateY(-1px)}.btn.primary{background:linear-gradient(135deg,var(--primary2),var(--primary));color:#fff}.btn.outline{background:#fff;border:1px solid var(--line);color:var(--navy)}
.hero{padding:84px 0 72px;background:linear-gradient(180deg,#fff 0%,#f6f9ff 100%)}.heroGrid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}.kicker{display:inline-flex;align-items:center;gap:8px;background:#eef3ff;color:var(--primary);font-size:12px;font-weight:800;border-radius:999px;padding:7px 11px}.hero h1{font-size:56px;line-height:1.04;letter-spacing:-2.7px;margin:16px 0 18px}.hero p{font-size:18px;color:var(--muted);max-width:590px}.heroCtas{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}.heroVisual{background:#0f2742;border-radius:22px;padding:18px;box-shadow:0 28px 70px rgba(32,57,90,.22)}.visualTop{display:flex;justify-content:space-between;color:#dce6ef;font-size:12px;margin-bottom:14px}.visualBody{background:#f8fafc;border-radius:14px;padding:14px}.smallNav{display:flex;gap:8px;margin-bottom:13px}.smallNav span{height:8px;width:62px;border-radius:8px;background:#d9e2ea}.smallNav .active{width:78px;background:linear-gradient(90deg,var(--primary2),var(--primary))}.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}.kpi span{font-size:10px;color:var(--muted)}.kpi b{display:block;font-size:22px;margin:4px 0}.kpi small{font-size:10px;color:var(--primary)}
section{padding:78px 0}.center{text-align:center}.eyebrow{font-size:12px;font-weight:850;letter-spacing:1.3px;text-transform:uppercase;color:var(--primary)}.title{font-size:38px;letter-spacing:-1.5px;margin:8px 0 12px}.sub{max-width:700px;margin:0 auto 34px;color:var(--muted)}
.featureGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.featureCard{background:#fff;border:1px solid var(--line);border-radius:15px;padding:20px;min-height:170px}.featureCard h4{margin:10px 0 7px}.featureCard ul{padding-left:18px;color:var(--muted);font-size:13px;margin:0}.icon{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#eaf7ff,#efedff);display:grid;place-items:center;color:var(--primary);font-weight:900;margin-bottom:16px}
.highlight{background:#fff}.tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}.tab{padding:10px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:700;color:#5a6c7c;cursor:pointer;font-family:inherit}.tab.active{background:linear-gradient(135deg,var(--primary2),var(--primary));color:#fff;border-color:transparent}.highlightGrid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}.mock{background:#fff;border:1px solid var(--line);border-radius:17px;padding:17px;box-shadow:0 15px 40px rgba(17,39,66,.06)}.mockHead{display:flex;justify-content:space-between;align-items:center;padding-bottom:11px;border-bottom:1px solid var(--line);margin-bottom:12px}.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:10px}.badge.ok{background:#e9f7f2;color:var(--green)}.badge.wait{background:#fff4dc;color:#966800}.badge.blue{background:#eaf4ff;color:#1769aa}table{width:100%;border-collapse:collapse;font-size:12px}th,td{padding:9px 7px;border-bottom:1px solid #eef2f5;text-align:left}th{background:#fafbfc;color:#7b8a99}.bullets{display:grid;gap:10px;margin-top:18px}.bullets div{color:#556a7b;font-size:14px}.bullets div:before{content:"✓";display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#eef4ff;color:var(--primary);font-weight:900;margin-right:8px}
.value{background:#f8fafc}.valueGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valueCard,.road,.price,.faqItem{background:#fff;border:1px solid var(--line);border-radius:15px;padding:23px}.valueCard b{display:block;font-size:17px;margin-bottom:7px}.valueCard p,.road p,.faqItem p{margin:0;color:var(--muted);font-size:14px}.roadGrid,.priceGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.road span{font-size:11px;color:var(--primary);font-weight:800}.road h3{margin:6px 0 8px}.pricing{background:#f8fafc}.price{position:relative}.price.pop{border:2px solid var(--primary)}.ribbon{position:absolute;top:-12px;right:18px;background:var(--primary);color:#fff;border-radius:999px;padding:5px 10px;font-size:10px;font-weight:800}.amount{font-size:30px;font-weight:900;margin:9px 0}.price ul{padding-left:18px;color:#5f7180;font-size:13px}.faqItem{margin-bottom:10px}.faqItem b{display:block;margin-bottom:5px}.cta{padding:66px 0;background:linear-gradient(135deg,#1769aa,#5145d8);color:#fff;text-align:center}.cta p{color:#e4ecf5}
.footer{background:#0f2742;color:#fff;padding:46px 0}.footerGrid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:36px}.footer img,.footer .custom-logo{height:58px;background:#fff;padding:4px;border-radius:8px}.footer p{color:#9eb0bd;font-size:13px;max-width:300px}.footer a{display:block;color:#aab9c4;font-size:13px;margin:8px 0}.copy{border-top:1px solid #ffffff18;margin-top:28px;padding-top:18px;color:#8799a7;font-size:12px}
.modal{display:none;position:fixed;inset:0;background:#071827b8;z-index:70;align-items:center;justify-content:center;padding:18px}.modal.show{display:flex}.modalBox{background:#fff;width:min(540px,100%);max-height:90vh;overflow:auto;border-radius:18px;padding:26px;position:relative}.close{position:absolute;right:16px;top:10px;border:0;background:none;font-size:26px;cursor:pointer}.form{display:grid;gap:11px}.form label{font-size:12px;font-weight:700}.form input,.form textarea,.form select{width:100%;padding:11px;border:1px solid var(--line);border-radius:9px;font:inherit}.form textarea{min-height:85px}.success{display:none;background:#edf7ff;color:#1769aa;padding:11px;border-radius:8px;font-size:13px}.success.show{display:block}.form-intro{color:var(--muted);font-size:13px}.generic-page{padding:60px 24px}
@media(max-width:900px){.links{display:none}.heroGrid,.highlightGrid{grid-template-columns:1fr}.valueGrid,.roadGrid,.priceGrid{grid-template-columns:1fr 1fr}.featureGrid{grid-template-columns:1fr 1fr}.footerGrid{grid-template-columns:1fr 1fr}.hero h1{font-size:45px}}
@media(max-width:560px){.container{padding:0 18px}.hero{padding:56px 0}.hero h1{font-size:37px}.heroCtas{flex-direction:column}.valueGrid,.roadGrid,.priceGrid,.featureGrid,.footerGrid,.kpis{grid-template-columns:1fr}.title{font-size:31px}.nav .actions .outline{display:none}}

.dashboardImageWrap{background:#fff;border-radius:14px;padding:8px;overflow:hidden}
.dashboardImage{display:block;width:100%;height:auto;border-radius:10px}
.heroVisual--image{padding:16px}
.heroVisual--image .visualTop{margin-bottom:12px}

/* v1.3 - Featured tab custom images */
.featureImageCard{
  background:#fff;
  border:1px solid var(--line);
  border-radius:17px;
  padding:17px;
  box-shadow:0 15px 40px rgba(17,39,66,.06);
}
.featureImageWrap{
  width:100%;
  min-height:320px;
  max-height:520px;
  border-radius:13px;
  overflow:hidden;
  background:#f8fafc;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #edf1f5;
}
.featureImage{
  display:block;
  width:100%;
  height:100%;
  max-height:520px;
}
.featureImageWrap--contain .featureImage{object-fit:contain}
.featureImageWrap--cover .featureImage{object-fit:cover}
@media(max-width:900px){
  .featureImageWrap{min-height:240px}
}
@media(max-width:560px){
  .featureImageWrap{min-height:180px}
}

/* v1.5 - Floating WhatsApp */
.rumara-wa{
  position:fixed;
  bottom:24px;
  z-index:90;
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:#25D366;
  color:#fff;
  padding:12px 16px;
  border-radius:999px;
  box-shadow:0 12px 30px rgba(20,60,40,.22);
  font-weight:800;
  font-size:13px;
  transition:.2s ease;
}
.rumara-wa:hover{
  transform:translateY(-2px);
  box-shadow:0 15px 34px rgba(20,60,40,.28);
  color:#fff;
}
.rumara-wa--right{right:24px}
.rumara-wa--left{left:24px}
.rumara-wa__icon{
  width:28px;
  height:28px;
  border-radius:50%;
  background:#fff;
  color:#25D366;
  display:grid;
  place-items:center;
}
.rumara-wa__icon svg{display:block}
@media(max-width:560px){
  .rumara-wa{
    width:54px;
    height:54px;
    padding:0;
    justify-content:center;
    bottom:18px;
  }
  .rumara-wa--right{right:18px}
  .rumara-wa--left{left:18px}
  .rumara-wa__label{display:none}
  .rumara-wa__icon{
    background:transparent;
    color:#fff;
    width:30px;
    height:30px;
  }
}

/* v1.6 - Fix featured copy visibility beside image */
.feature-highlight-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;
  align-items:center;
}
.featureCopy{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  color:var(--text);
  min-width:0;
}
.featureCopyEyebrow{
  display:inline-block;
  margin-bottom:8px;
  font-size:12px;
  font-weight:850;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--primary);
}
.featureCopy h3{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  margin:0 0 12px;
  font-size:31px;
  line-height:1.15;
  letter-spacing:-1px;
  color:var(--text);
}
.featureCopyDesc{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
}
.featureCopy .bullets,
.featureCopy .bullets div{
  visibility:visible !important;
  opacity:1 !important;
}
.featureVisual{
  min-width:0;
  width:100%;
}
.featureImageCard,
.featureVisual .mock{
  width:100%;
}
@media(max-width:900px){
  .feature-highlight-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .featureCopy h3{
    font-size:27px;
  }
}