/* Premium polish over site.css + scenes.css: same layout, colors and sections the client approved,
   refined type, calmer frames, softer surfaces, more breathing room. Loaded last. */
:root{
  --ink-2:#55537A;--ink-3:#7C7A9C;
  --f-d:'Plus Jakarta Sans','Inter',-apple-system,'Segoe UI',sans-serif;
  --r:20px;
  --shadow:0 1px 2px rgba(43,40,70,.04),0 12px 32px -14px rgba(84,70,170,.18);
  --shadow-2:0 2px 6px rgba(43,40,70,.05),0 30px 70px -24px rgba(84,70,170,.32);
}
@media (prefers-color-scheme: dark){:root{--ink-2:#BDB8DD;--ink-3:#938DB8;--shadow:0 12px 32px -14px rgba(0,0,0,.55);--shadow-2:0 30px 70px -24px rgba(0,0,0,.7)}}
::selection{background:color-mix(in srgb,var(--c-crm) 22%,transparent)}

/* ---------- Type ---------- */
h1,h2,h3,.h2,.h3,.price-h,.card h3,.price .amt,.price .name{font-family:var(--f-d)}
.hero h1{font-weight:700;letter-spacing:-.032em;line-height:1.04;max-width:15ch;text-wrap:balance}
.h2{font-weight:700;letter-spacing:-.028em;line-height:1.08;text-wrap:balance}
.h3,.price-h{font-weight:700;letter-spacing:-.02em}
.card h3{font-weight:700;letter-spacing:-.025em}
.tone-blue .kicker{color:#C9B8FF}
.crm-login{border:0!important;background:var(--bg-2)!important;border-radius:20px!important}
.lead,.hero .sub,.card p,.ben span,.fitfor p{text-wrap:pretty}
.hero .sub{max-width:40em;line-height:1.65}
.lead{line-height:1.7;max-width:44em}
.kicker{font-weight:700;letter-spacing:.14em;font-size:.74rem}
.sec-head .kicker::before{content:"";width:18px;height:1.5px;border-radius:2px;background:currentColor;opacity:.6}
.sec-head.center .kicker::after{content:"";width:18px;height:1.5px;border-radius:2px;background:currentColor;opacity:.6}

/* ---------- Rhythm ---------- */
.sec{padding:clamp(80px,9vw,128px) 0}
.hero{padding:clamp(56px,7vw,96px) 0 clamp(72px,8vw,112px)}
.h3{margin:clamp(56px,6vw,80px) 0 22px}
.price-h{margin:clamp(64px,7vw,96px) 0 24px}

/* ---------- Violet bands: soft light instead of stripes and dots ---------- */
.tone-blue{background:
  radial-gradient(900px 420px at 50% -8%,rgba(160,140,255,.28),transparent 70%),
  radial-gradient(700px 500px at 100% 100%,rgba(217,70,122,.12),transparent 70%),
  linear-gradient(175deg,#3A3070 0%,#2B2350 55%,#241D45 100%)}
#solusi::before,#cs::before,#automation::before{background:none}
.tone-blue::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);pointer-events:none}

/* ---------- Product frames: thin gradient ring + depth instead of a thick rainbow border ---------- */
.scn-frame{padding:8px;border-radius:24px;border:1px solid transparent;
  background:linear-gradient(color-mix(in srgb,var(--bg) 70%,transparent),color-mix(in srgb,var(--bg) 70%,transparent)) padding-box,
    linear-gradient(135deg,color-mix(in srgb,var(--c-crm) 70%,transparent),color-mix(in srgb,var(--c-web) 45%,transparent) 50%,color-mix(in srgb,var(--c-cs) 70%,transparent)) border-box;
  box-shadow:0 2px 6px rgba(43,40,70,.05),0 40px 90px -30px rgba(109,90,230,.45),0 18px 40px -24px rgba(217,70,122,.25)}
.scn-win{border-radius:17px;box-shadow:0 0 0 1px var(--line)}
.tone-blue .scn-frame{border-color:transparent;background:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.1)) padding-box,linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.12)) border-box;box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
@media (max-width:900px){.scn-frame{padding:5px;border-radius:18px}.scn-win{border-radius:14px}}

/* ---------- Cards ---------- */
.card{border-radius:24px;padding:32px;border:1px solid var(--line);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
a.card:hover{box-shadow:var(--shadow-2);border-color:color-mix(in srgb,var(--cyan) 35%,var(--line))}
.card .ic{width:48px;height:48px;border-radius:14px}
.card .hook{font-size:1.06rem;line-height:1.5}
.card .best{border:0;background:var(--bg-2);padding:.85rem 1rem}
.tone-blue .card{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border-color:rgba(255,255,255,.14);backdrop-filter:blur(6px)}
.tone-blue a.card:hover{border-color:rgba(255,255,255,.32);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.tone-blue .card .best{background:rgba(255,255,255,.06)}
.card .rec{font-size:.72rem;letter-spacing:.02em}

/* "Yang berubah": quiet surfaces, numbers as soft chips */
.ben{border:1px solid var(--line);background:linear-gradient(180deg,var(--bg),var(--bg-2));padding:28px;border-radius:20px}
.ben .n{border:0;background:color-mix(in srgb,var(--cyan) 12%,transparent);width:32px;height:32px;border-radius:10px;font-size:.82rem}
.ben b{font-family:var(--f-d);font-size:1.12rem;letter-spacing:-.015em}
.tone-blue .ben{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.tone-blue .ben .n{background:rgba(255,255,255,.14);color:#fff}

/* "Cocok untuk": filled panel instead of dashed outline */
.fitfor{border:0;background:var(--bg-2);border-radius:24px;padding:32px 36px}
.tone-blue .fitfor{background:rgba(255,255,255,.06)}
.chips span{border-color:var(--line-2)}

/* ---------- Prices ---------- */
.price{border-radius:24px;padding:34px;border:1px solid var(--line-2)}
.price .amt{font-weight:700;letter-spacing:-.045em;font-size:2.4rem}
.sec:not(.tone-blue) .price.pick{border:1.5px solid transparent;box-shadow:var(--shadow-2)}
.tone-blue .price{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border-color:rgba(255,255,255,.18)}
.tone-blue .price.pick{border:1.5px solid rgba(255,255,255,.55);box-shadow:0 30px 70px -30px rgba(0,0,0,.65)}
/* A single package spans the row: details left, what you get right */
@media (min-width:901px){
  .prices:has(> .price:only-child){max-width:none}
  .prices > .price:only-child{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;align-content:start}
  .prices > .price:only-child > *{grid-column:1}
  .prices > .price:only-child > .checks{grid-column:2;grid-row:1 / span 4;align-self:center;padding-left:56px;border-left:1px solid var(--line)}
  .prices > .price:only-child > .fine2{grid-column:2}
}
.ptable{border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}
.ptable .tr{padding:20px 26px}

/* ---------- Buttons ---------- */
.btn{transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s,background .2s,border-color .2s,color .2s}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.wa{background:linear-gradient(180deg,#22A85C,#1B8F4E);border-color:transparent;box-shadow:0 6px 16px -8px rgba(27,143,78,.8)}
.tone-blue .btn.wa{border-color:transparent}

/* ---------- Nav & footer ---------- */
.top.scrolled{box-shadow:0 8px 30px -20px rgba(43,40,70,.25)}
.foot .base{color:color-mix(in srgb,var(--band-muted) 80%,transparent)}

/* ---------- Mobile: price filter tabs scroll inside themselves instead of widening the page ---------- */
.seg:not(.sm){max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.seg:not(.sm)::-webkit-scrollbar{display:none}
.seg button{flex:none}
@media (max-width:900px){
  .card,.price{padding:26px 22px}
  .fitfor{padding:24px 22px}
  .ben{padding:22px}
}

/* ---------- Layout: one alignment line per section ---------- */
/* Demo frames inside a section take the full content width, so their edges line up with the heading and cards */
.sec .scn{max-width:none}
.sec .scn-cap{max-width:none}

/* Solution cards: the same parts sit at the same height in every card of a row */
@supports (grid-template-rows:subgrid){
  .cards > .card{display:grid;grid-template-rows:subgrid;grid-row:span 7;gap:0}
  .cards > .card > .top-row{margin-bottom:18px}
  .cards > .card > h3{margin-bottom:10px}
  .cards > .card > .hook{margin-bottom:12px}
  .cards > .card > p:not(.hook):not(.best){margin-bottom:18px}
  .cards > .card > .checks{margin-bottom:20px;align-self:start}
  .cards > .card > .best{align-self:start;margin-bottom:20px}
  .cards > .card > .card-foot{align-self:end}
  .cards{row-gap:20px}
}

/* "Mana yang cocok": centered like the section head, options as an even grid of checkable rows */
#cocok{text-align:center;margin-top:clamp(72px,8vw,104px)}
.fitq{max-width:1040px;margin:20px auto 0;padding:28px;border-radius:28px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.fitq .chips-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fitq .chips-in legend{grid-column:1/-1;width:100%;text-align:center;margin-bottom:18px;font-size:.95rem;color:var(--ink-2)}
.fitq .chips-in label{display:flex}
.fitq .chips-in span{display:flex;align-items:center;gap:.7rem;width:100%;min-height:58px;padding:.7rem 1rem;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-weight:600;font-size:.9rem;line-height:1.35;color:var(--ink)}
.fitq .chips-in span::before{content:"";flex:none;width:18px;height:18px;border-radius:6px;border:1.5px solid var(--line-2);background:center/12px no-repeat}
.fitq .chips-in input:checked + span{background:#fff;border-color:#fff;color:#2B2846}
.fitq .chips-in input:checked + span::before{border-color:#6D5AE6;background-color:#6D5AE6;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5' stroke='white' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.fitq .chips-in label:hover span{border-color:var(--line-2)}
.fitq-out{margin-top:6px}
.fitq-out > .muted{grid-column:1/-1;text-align:center}
@media (max-width:1000px){.fitq .chips-in{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.fitq{padding:18px;border-radius:22px}.fitq .chips-in{grid-template-columns:minmax(0,1fr)}.fitq .chips-in span{min-height:50px}}

/* Website demo: the phone fills its column instead of floating in empty space */
@media (min-width:901px){
  .scn-stage.web .g2.wide{grid-template-columns:minmax(0,1fr) 210px;align-items:center}
  .scn-stage.web .phone{width:100%;min-height:260px}
}

/* Section text blocks share one measure */
.sec-head{max-width:760px}
.sec-head .lead{max-width:none}
.fitfor{align-items:start}
.fitfor .chips{align-content:start}
.fitfor:not(:has(.chips)){grid-template-columns:minmax(0,1fr)}
.fitfor:not(:has(.chips)) p{max-width:62em}
.cards .card .card-foot{flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:.35rem;padding-top:1rem}
.fitq-out{min-height:0}

/* E-commerce: marketplace cost comparison + the 4 integrated systems */
.mk{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:20px;margin:36px 0 10px}
.mk-cost,.mk-sys{border-radius:24px;padding:30px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.18)}
.mk .kicker{display:block;margin-bottom:10px}
.mk-big{font-family:var(--f-d);font-size:clamp(3rem,6vw,4.4rem);font-weight:800;line-height:1;letter-spacing:-.04em;color:#FFB27A}
.mk-lbl{margin:10px 0 18px}.mk-lbl b{display:block}.mk-lbl small{opacity:.7}
.mk-fees{list-style:none;padding:16px 0 0;margin:0;border-top:1px solid rgba(255,255,255,.16);display:grid;gap:10px}
.mk-fees li{display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:center;font-size:.92rem}
.mk-fees b{text-align:center;padding:8px 6px;border-radius:10px;background:rgba(255,255,255,.12);font-variant-numeric:tabular-nums}
.mk-fees li.ads b{background:rgba(255,140,80,.22);color:#FFB27A}
.mk-save{margin-top:20px;padding:18px 20px;border-radius:16px;background:#0D0B1F;text-align:center;box-shadow:0 20px 40px -24px rgba(0,0,0,.7)}
.mk-save span{display:block;font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:1rem;color:#fff}
.mk-save b{display:block;font-family:var(--f-d);font-size:2rem;font-weight:800;color:#FF7A45;line-height:1.15}
.mk-sys{display:flex;flex-direction:column}
.mk-sub{margin:-4px 0 18px;opacity:.8}
.mk-grid{flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:14px}
.mk-grid > div{padding:22px 22px 22px 24px;border-radius:18px;background:#0D0B1F;border-left:3px solid #FF6A2B;color:#fff}
.mk-grid .n{font-family:var(--f-d);font-weight:800;color:#FF7A45;margin-right:10px}
.mk-grid b{text-transform:uppercase;letter-spacing:.02em;font-size:.95rem}
.mk-grid > div > span:last-child{display:block;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12);font-size:.9rem;color:rgba(255,255,255,.75)}
.mk-note{font-size:.8rem;opacity:.65;margin:0 0 8px}
.mk-fee{align-self:flex-start;justify-self:start;padding:8px 14px;border-radius:10px;background:#FF5A1F;color:#fff;font-weight:800;font-size:.95rem}
@media (max-width:900px){.mk{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.mk-grid{grid-template-columns:minmax(0,1fr)}.mk-cost,.mk-sys{padding:24px 20px}}