.ph{--ph-txt:'✦ Mockup layar'}



  /* NAV (home pill) */

  /* HERO (gaya beranda: terpusat + mockup layar blur) */
  .hero{padding:150px 0 30px;text-align:center;position:relative;overflow:hidden}
  .hero .glow{position:absolute;top:40px;left:50%;transform:translateX(-50%);width:820px;height:520px;max-width:96vw;background:radial-gradient(ellipse at center,rgba(201,168,76,.14),transparent 62%);filter:blur(34px);pointer-events:none;z-index:0}
  .hero .wrap{position:relative;z-index:2}
  .hero-sub{margin:28px auto 0;font-size:clamp(15px,1.45vw,17.5px);line-height:1.72;color:var(--cream-2);max-width:58ch;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;justify-content:center}
  /* mockup layar blur */
  .mockup{margin:60px auto 0;max-width:1020px;position:relative;max-height:320px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 56%,transparent);mask-image:linear-gradient(180deg,#000 56%,transparent)}
  .mock-glow{position:absolute;top:-70px;left:50%;transform:translateX(-50%);width:78%;height:240px;background:radial-gradient(ellipse at center,rgba(201,168,76,.3),transparent 60%);filter:blur(46px);z-index:0}
  .mock-frame{position:relative;z-index:2;border:1px solid rgba(201,168,76,.2);border-top-color:rgba(201,168,76,.4);border-radius:14px;padding:9px;background:rgba(255,255,255,.03);box-shadow:0 50px 130px rgba(0,0,0,.65)}
  .mock-frame .ph{aspect-ratio:16/9;border-radius:8px;filter:blur(1.5px)}
  .hero-fade{position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg,transparent,var(--bg));z-index:3;pointer-events:none}
  .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}}

  /* TICKER mesin AI */

  /* APA ITU AIVO + fakta */
  .aivo{padding:100px 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}}


  /* LAYANAN AI VISIBILITY (retro grid background, gaya reuno-ui) */
  .deliver{padding:90px 0 96px;position:relative;z-index:2;overflow:hidden}
  .deliver .wrap{position:relative;z-index:2}
  .deliver-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
  .deliver-bg svg{width:100%;height:100%;display:block}
  .deliver-glow{position:absolute;inset:0;background:radial-gradient(ellipse 42% 60% at 50% 0%,rgba(201,168,76,.1),transparent)}
  .deliver .grid-line{stroke:rgba(201,168,76,.2);stroke-width:1;opacity:0;stroke-dasharray:1400;stroke-dashoffset:1400;animation:grid-draw 2.2s ease-out forwards}
  .deliver .grid-line.dim{stroke:rgba(201,168,76,.1)}
  .deliver .detail-dot{fill:rgba(201,168,76,.6);opacity:0;animation:dot-appear .8s ease-out forwards}
  .corner-el{position:absolute;width:42px;height:42px;border:1px solid rgba(201,168,76,.2);opacity:0;animation:dot-appear .9s ease-out forwards}
  .float-el{position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(201,168,76,.5);opacity:0;animation:float 9s ease-in-out infinite}
  @keyframes grid-draw{0%{stroke-dashoffset:1400;opacity:0}60%{opacity:.5}100%{stroke-dashoffset:0;opacity:.22}}
  @keyframes dot-appear{to{opacity:1}}
  @keyframes float{0%,100%{transform:translateY(0) translateX(0);opacity:.2}25%{transform:translateY(-10px) translateX(5px);opacity:.6}50%{transform:translateY(-5px) translateX(-3px);opacity:.4}75%{transform:translateY(-15px) translateX(7px);opacity:.8}}
  @media(prefers-reduced-motion:reduce){.deliver .grid-line,.deliver .detail-dot,.corner-el,.float-el{opacity:.22;animation:none;stroke-dashoffset:0}}
  .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}}

  /* PROSES (kartu bergaris, sama dengan halaman lain) */
  .proc{padding:0 0 100px;position:relative;z-index:2}
  .proc-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.09);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.012)}
  .pstep{padding:32px 28px 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:760px){
    .proc-grid{grid-template-columns:1fr}
    .pstep{border-left:none;border-top:1px solid rgba(255,255,255,.09)}
    .pstep:first-child{border-top:none}
  }

  /* GALERI PORTOFOLIO — browser frame 16:9 */
  .gallery{padding:0 0 104px;position:relative;z-index:2}
  .galw-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .galw{cursor:pointer;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#111;transition:transform .5s var(--ease),box-shadow .5s ease,border-color .4s}
  .galw:hover{transform:translateY(-7px);box-shadow:0 34px 80px rgba(0,0,0,.55);border-color:rgba(201,168,76,.32)}
  .galw-bar{display:flex;align-items:center;gap:7px;padding:11px 15px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.06)}
  .galw-bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.14);display:block}
  .galw-bar i:first-child{background:rgba(201,168,76,.55)}
  .galw-bar .url{margin-left:12px;font-size:11px;color:var(--muted);letter-spacing:.02em}
  .galw .ph{aspect-ratio:16/9}
  .gal-cta{text-align:center;margin-top:44px}
  @media(max-width:760px){.galw-grid{grid-template-columns:1fr}}

  /* 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 */