.ph{--ph-txt:'✦ Gambar'}



  /* NAV (home pill) */

  /* HERO (text kiri, gambar kanan, glass) */
  .hero{padding:150px 0 84px;position:relative;overflow:hidden}
  .hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center;position:relative;z-index:2}
  @media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:46px}}
  .hero .glow{position:absolute;top:40px;left:50%;transform:translateX(-50%);width:780px;height:520px;max-width:96vw;background:radial-gradient(ellipse at center,rgba(142,142,142,.16),transparent 62%);filter:blur(30px);pointer-events:none;z-index:0}
  .hero-sub{margin:26px 0 0;font-size:clamp(15px,1.45vw,17px);line-height:1.7;color:var(--cream-2);max-width:46ch;font-weight:300}
  .hero-sub b{font-weight:500;color:var(--cream)}
  .hero-cta{margin-top:38px;display:flex;gap:24px;flex-wrap:wrap;align-items:center}
  .btn.sm{padding:12px 22px;font-size:13px}
  .hero-img-wrap{position:relative;z-index:2}
  .hero-img-glow{position:absolute;top:-50px;left:50%;transform:translateX(-50%);width:82%;height:250px;background:radial-gradient(ellipse at center,rgba(201,168,76,.26),transparent 62%);filter:blur(45px);z-index:0}
  .hero-img{position:relative;z-index:1;aspect-ratio:4/5;border-radius:12px;border:1px solid rgba(201,168,76,.2);border-top-color:rgba(201,168,76,.4);box-shadow:0 40px 110px rgba(0,0,0,.6)}
  .hero-glass{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 118px),repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 59px, transparent 59px 118px);-webkit-mask-image:radial-gradient(115% 80% at 50% 8%,#000 28%,transparent 82%);mask-image:radial-gradient(115% 80% at 50% 8%,#000 28%,transparent 82%)}
  .hero-noise{position:absolute;inset:-120%;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .5s steps(3) infinite}
  @keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-4%,3%)}66%{transform:translate(3%,-4%)}100%{transform:translate(0,0)}}
  @media(prefers-reduced-motion:reduce){.hero-noise{animation:none}}

  /* INTRO + fakta */
  .aivo{padding:96px 0 86px;position:relative;z-index:2}
  .aivo-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start}
  .aivo-txt h2{margin-bottom:22px;max-width:17ch}
  .aivo-txt p{font-size:16.5px;color:var(--cream-2);line-height:1.8;font-weight:300;margin-bottom:18px;max-width:52ch}
  .aivo-txt p b{color:var(--cream);font-weight:500}
  .facts{display:flex;flex-direction:column;gap:14px}
  .fact{background:var(--surf);border-radius:16px;padding:22px 24px;transition:transform .4s var(--ease),background .4s}
  .fact:hover{transform:translateY(-4px);background:#161616}
  .fact .k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:9px;display:flex;align-items:center;gap:9px}
  .fact .k::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--gold)}
  .fact p{font-size:14px;color:var(--cream-2);font-weight:300;line-height:1.62}
  @media(max-width:860px){.aivo-grid{grid-template-columns:1fr;gap:40px}}

  /* PRODUK TURUNAN (6) */
  .deliver{padding:0 0 96px;position:relative;z-index:2}
  .dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .dcard{position:relative;background:var(--surf);border-radius:18px;padding:30px 28px;overflow:hidden;transition:transform .4s var(--ease),background .4s}
  .dcard:hover{transform:translateY(-6px);background:#161616}
  .dcard .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.22);color:var(--gold-lt);margin-bottom:20px}
  .dcard .ic svg{width:22px;height:22px}
  .dcard h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin-bottom:9px}
  .dcard p{font-size:13.5px;color:var(--cream-2);font-weight:300;line-height:1.62}
  @media(max-width:900px){.dgrid{grid-template-columns:1fr 1fr}}
  @media(max-width:600px){.dgrid{grid-template-columns:1fr}}

  /* WEBSITE highlight + upsell AIVO */
  .wsite{padding:0 0 100px;position:relative;z-index:2}
  .wsite-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .wsite .label{display:block;margin-bottom:16px}
  .wsite h2{margin-bottom:14px;max-width:16ch}
  .wsite .lead{font-size:15.5px;color:var(--cream-2);font-weight:300;line-height:1.7;max-width:46ch;margin-bottom:24px}
  .wlist{display:grid;gap:12px;margin-bottom:28px}
  .wlist li{list-style:none;display:flex;align-items:flex-start;gap:11px;font-size:14.5px;color:var(--cream-2);font-weight:300}
  .wlist li svg{color:var(--gold);flex-shrink:0;margin-top:2px}
  .wlist li b{color:var(--cream);font-weight:500}
  .upsell{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:20px 22px;border:1px solid rgba(201,168,76,.26);background:rgba(201,168,76,.06);border-radius:16px}
  .upsell p{font-size:14px;color:var(--cream-2);font-weight:300;margin:0;max-width:34ch}
  .upsell p b{color:var(--gold-lt);font-weight:600}
  .wsite-img .ph{aspect-ratio:4/3;border-radius:14px}
  @media(max-width:860px){.wsite-grid{grid-template-columns:1fr;gap:36px}.wsite-img{order:-1}}

  /* PROSES (5 langkah, kartu bergaris) */
  .proc{padding:0 0 100px;position:relative;z-index:2}
  .proc-grid{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid rgba(255,255,255,.09);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.012)}
  .pstep{padding:32px 24px 44px;border-left:1px solid rgba(255,255,255,.09);transition:background .4s}
  .pstep:first-child{border-left:none}
  .pstep:hover{background:rgba(255,255,255,.025)}
  .pstep .num{font-size:42px;font-weight:300;line-height:1;background:var(--g-gold);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:26px;letter-spacing:-.02em}
  .pstep h3{font-size:17px;font-weight:600;letter-spacing:-.01em;margin-bottom:12px}
  .pstep p{font-size:13px;color:var(--cream-2);font-weight:300;line-height:1.64}
  @media(max-width:980px){
    .proc-grid{grid-template-columns:1fr 1fr}
    .pstep{border-left:1px solid rgba(255,255,255,.09);border-top:1px solid rgba(255,255,255,.09)}
    .pstep:nth-child(-n+2){border-top:none}
    .pstep:nth-child(odd){border-left:none}
  }
  @media(max-width:560px){
    .proc-grid{grid-template-columns:1fr}
    .pstep{border-left:none}
    .pstep:nth-child(2){border-top:1px solid rgba(255,255,255,.09)}
  }

  /* LAYANAN SATUAN (4 per baris) */
  .units{padding:0 0 100px;position:relative;z-index:2}
  .units .intro{font-size:16px;color:var(--cream-2);line-height:1.7;font-weight:300;max-width:54ch;margin:-30px 0 40px}
  .units .intro b{color:var(--cream);font-weight:500}
  .unit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .unit{display:flex;align-items:center;gap:12px;background:var(--surf);border-radius:12px;padding:16px 18px;transition:transform .35s var(--ease),background .35s}
  .unit:hover{transform:translateY(-3px);background:#161616}
  .unit .d{width:7px;height:7px;border-radius:50%;background:var(--g-gold);flex-shrink:0}
  .unit span{font-size:14px;font-weight:500;color:var(--cream);letter-spacing:-.005em}
  @media(max-width:900px){.unit-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.unit-grid{grid-template-columns:1fr}}

  /* GALERI PORTOFOLIO — masonry (desain berbeda) */
  .gallery{padding:0 0 104px;position:relative;z-index:2}
  .gal2{columns:3;column-gap:16px}
  .gal2 a{display:block;break-inside:avoid;margin-bottom:16px}
  .gal2 .ph{width:100%;border-radius:12px;display:block;transition:transform .5s var(--ease),box-shadow .5s ease}
  .gal2 a:hover .ph{transform:scale(1.015);box-shadow:0 26px 64px rgba(0,0,0,.45)}
  .gal-cta{text-align:center;margin-top:38px}
  @media(max-width:760px){.gal2{columns:2}}
  @media(max-width:480px){.gal2{columns:1}}

  /* FAQ */
  .faq-list{max-width:840px;margin:0 auto;border-top:1px solid rgba(255,255,255,.08)}
  .fq:hover{color:var(--gold-lt)}
  .fitem.open .fq .ic{transform:rotate(45deg)}
  .fa p b{color:var(--cream);font-weight:500}

  /* CTA */

  /* FOOTER */