/* Beranda — hero, kartu solusi, alasan memilih, ajakan demo. Warna dasar dari tema (--green, --deep, --gold, --ink). */
.page-beranda{--home-ink:#0b2e33;--home-muted:#3f5a63}

/* Tombol */
.home-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border:2px solid transparent;border-radius:999px;background:linear-gradient(115deg,var(--green),var(--deep));color:#fff;font-size:15px;font-weight:700;text-decoration:none;box-shadow:0 10px 22px color-mix(in srgb,var(--green) 28%,transparent);transition:transform .2s,box-shadow .2s,filter .2s}
.home-btn:hover{transform:translateY(-2px);filter:brightness(1.06);color:#fff}
.home-btn .icon{width:20px;height:20px}
.home-btn-outline{background:#fff;border-color:var(--green);color:var(--deep);box-shadow:none}
.home-btn-outline:hover{color:var(--deep);background:#f2faf6}
.home-btn-gold{background:linear-gradient(115deg,#ffdc72,#f9c234);color:#0b2e33;box-shadow:0 10px 22px #f2b72a40}
.home-btn-gold:hover{color:#0b2e33}

.home-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:999px;background:#e5f4ea;color:var(--deep);font-size:14px;font-weight:700;box-shadow:0 4px 12px #0b5e4512}
.home-pill .icon{width:20px;height:20px}
.home-pill-gold{background:#fdf2d4;color:#3b2c06}
.home-pill-gold .icon{color:#f0a91c;fill:#f6be3c}

/* Hero */
.home-hero{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(440px,41vw,640px);background:radial-gradient(60% 80% at 0 100%,#eef7ef 0,transparent 70%),var(--cream)}
.home-hero-art{position:absolute;right:0;bottom:0;z-index:-1;width:min(60%,920px);height:auto;mask-image:linear-gradient(90deg,transparent 0,#000 20%),linear-gradient(180deg,transparent 0,#000 8%);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20%),linear-gradient(180deg,transparent 0,#000 8%);-webkit-mask-composite:source-in}
.home-hero-inner{display:flex;align-items:center;min-height:inherit;padding:40px 40px 64px}
.home-hero-copy{width:44%;max-width:560px}
.home-hero-copy h1{margin:22px 0 22px;font-size:clamp(44px,5.2vw,78px);line-height:1;letter-spacing:-.045em;color:var(--home-ink)}
.home-hero-copy h1 em{position:relative;display:inline-block;font-style:normal;color:var(--green)}
.home-hero-copy h1 em:after{content:"";position:absolute;left:4%;right:6%;bottom:-.22em;height:.2em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M3 12C80 3 190 2 297 7' fill='none' stroke='%23e9ad2b' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.home-hero-spark{position:absolute;right:-.62em;top:.02em;width:.5em;height:.5em;fill:none;stroke:#f0b12c;stroke-width:4;stroke-linecap:round}
.home-hero-copy p{max-width:470px;font-size:clamp(15px,1.25vw,18px);line-height:1.6;color:var(--home-muted)}
.home-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.home-trust{display:flex;align-items:center;gap:14px;margin-top:26px;font-size:14px;color:var(--home-muted)}
.home-trust img{width:96px;height:auto}
.home-trust b{display:block;color:var(--home-ink)}

/* Kartu solusi */
.home-solutions{padding:46px 40px 10px}
.home-heading{margin-bottom:34px;text-align:center}
.home-heading h2{margin:18px 0 10px;font-size:clamp(28px,3vw,44px);letter-spacing:-.035em;color:var(--home-ink)}
.home-heading h2 em{font-style:normal;color:var(--green)}
.home-heading p{font-size:17px;color:var(--home-muted)}
.solution-grid{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:22px}
.solution-card{--tone:#17945f;--tone-2:#0b7047;--soft:#e6f5ec;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;min-height:330px;padding:24px 24px 26px;border:3px solid #fff;border-radius:24px;background:linear-gradient(160deg,var(--soft) 0,color-mix(in srgb,var(--soft) 45%,#fff) 70%);box-shadow:0 14px 32px #12382f14;transition:transform .25s,box-shadow .25s}
.solution-card:hover{transform:translateY(-5px);box-shadow:0 22px 40px #12382f22}
.solution-card.tone-orange{--tone:#f6ad1b;--tone-2:#e38600;--soft:#fff2d9}
.solution-card.tone-blue{--tone:#3a95f2;--tone-2:#1b6ad2;--soft:#e4f0fd}
.solution-card.tone-purple{--tone:#a066ea;--tone-2:#7a3fd0;--soft:#f0e8fd}
.solution-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:15px;background:linear-gradient(150deg,var(--tone),var(--tone-2));color:#fff;box-shadow:0 8px 18px color-mix(in srgb,var(--tone) 35%,transparent)}
.solution-icon .icon{width:30px;height:30px}
.solution-card h3{margin:18px 0 10px;font-size:clamp(21px,1.8vw,26px);letter-spacing:-.03em}
.solution-card h3 a{color:var(--home-ink);text-decoration:none}
.solution-card h3 a:after{content:"";position:absolute;inset:0;z-index:2}
.solution-card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;max-width:92%;font-size:14.5px;line-height:1.5;color:var(--home-muted)}
.solution-go{display:grid;place-items:center;width:48px;height:32px;margin-top:auto;border:1.5px solid color-mix(in srgb,var(--tone-2) 30%,#fff);border-radius:999px;background:#fff;color:var(--home-ink);transition:background .2s,color .2s}
.solution-go .icon{width:18px;height:18px}
.solution-card:hover .solution-go{background:var(--tone-2);border-color:var(--tone-2);color:#fff}
.solution-art{position:absolute;right:0;bottom:0;z-index:-1;width:60%;max-height:40%;object-fit:contain;object-position:right bottom;mask-image:linear-gradient(90deg,transparent 0,#000 28%),linear-gradient(180deg,transparent 0,#000 24%);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28%),linear-gradient(180deg,transparent 0,#000 24%);-webkit-mask-composite:source-in}
.solution-art-icon{display:grid;place-items:end;width:auto;padding:0 18px 14px 0;color:color-mix(in srgb,var(--tone) 30%,transparent);mask-image:none;-webkit-mask-image:none}
.solution-art-icon .icon{width:96px;height:96px}

/* Mengapa memilih kami */
.home-why-band{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:34px;margin-top:40px;padding:28px 34px 28px 46px;border:1px solid #e3efe5;border-radius:28px;background:linear-gradient(100deg,#eef7ef,#f6faf3 60%,#eef6ef)}
.home-why-band h2{max-width:220px;padding-right:34px;border-right:1px solid #cfdcd2;font-size:clamp(22px,2vw,28px);line-height:1.2;color:var(--home-ink)}
.home-why-band h2:after{content:"";display:block;width:110px;height:8px;margin-top:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 8' preserveAspectRatio='none'%3E%3Cpath d='M2 6C35 1 75 1 108 4' fill='none' stroke='%23e9ad2b' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.home-why-band ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.home-why-band li{display:flex;align-items:center;gap:14px;min-height:66px;padding:12px 18px;border-radius:18px;background:#fff;box-shadow:0 6px 16px #12382f0f;font-size:14.5px;font-weight:600;line-height:1.3;color:var(--home-ink)}
.home-why-band li .icon{flex:none;width:32px;height:32px;color:var(--green)}

/* Ajakan demo */
.home-cta{padding:40px 40px 46px}
.home-cta-card{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.35fr) auto;align-items:center;gap:36px;min-height:150px;padding:26px 46px 26px clamp(220px,26%,330px);border-radius:28px;background:linear-gradient(110deg,var(--deep),color-mix(in srgb,var(--deep) 80%,#000) 75%);color:#fff;box-shadow:0 18px 40px #00332a2e}
.home-cta-art{position:absolute;left:0;top:0;bottom:0;z-index:-1;width:clamp(240px,30%,360px);height:100%;object-fit:cover;object-position:left center;mask-image:linear-gradient(90deg,#000 55%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 55%,transparent)}
.home-cta-copy{padding-right:36px;border-right:1px solid #ffffff3d}
.home-cta-copy h2{max-width:420px;margin-bottom:10px;font-size:clamp(23px,2.2vw,30px);line-height:1.18;color:#fff}
.home-cta-copy h2 em{font-style:normal;color:#f6c344}
.home-cta-copy p{font-size:15px;color:#d6ece4}

.home-footer{padding:16px 0;background:var(--cream);font-size:12.5px;color:var(--home-muted)}
.home-footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 24px;padding-inline:40px}
.home-footer a{display:inline-flex;align-items:center;gap:8px;color:var(--deep)}
.home-footer .icon{width:18px;height:18px}

@media(max-width:1100px){
    .solution-grid{grid-template-columns:repeat(min(var(--cols,4),2),minmax(0,1fr))}
    .home-why-band{grid-template-columns:1fr;gap:20px;padding:26px}
    .home-why-band h2{max-width:none;padding-right:0;border-right:0}
    .home-why-band ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
    .home-hero{min-height:0;display:flex;flex-direction:column}
    .home-hero-art{position:relative;order:2;width:100%;margin-top:-10px;mask-image:linear-gradient(180deg,transparent 0,#000 14%);mask-composite:add;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%);-webkit-mask-composite:source-over}
    .home-hero-inner{padding:30px 24px 0}
    .home-hero-copy{width:100%;max-width:640px}
    .home-solutions,.home-cta{padding-inline:20px}
    .home-why-band{margin-inline:auto}
    .home-cta-card{grid-template-columns:1fr;gap:20px;padding:150px 26px 28px;text-align:left}
    .home-cta-art{width:100%;height:150px;bottom:auto;mask-image:linear-gradient(180deg,#000 50%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent)}
    .home-cta-copy{padding-right:0;border-right:0}
    .home-cta-card .home-btn{justify-self:start}
    .home-footer .wrap{padding-inline:20px}
}
@media(max-width:560px){
    .home-hero-inner{padding:24px 16px 0}
    .home-hero-copy h1{font-size:clamp(40px,12vw,54px)}
    .home-hero-actions .home-btn{flex:1 1 100%}
    .solution-grid{grid-template-columns:1fr}
    .solution-card{min-height:0}
    .solution-go{margin:22px 0 34px}
    .solution-art{width:46%;max-height:96px}
    .home-why-band{padding:22px 18px}
    .home-why-band ul{grid-template-columns:1fr}
    .home-solutions,.home-cta{padding-inline:16px}
}
@media(prefers-reduced-motion:reduce){.home-btn,.solution-card{transition:none}.home-btn:hover,.solution-card:hover{transform:none}}