/* ============================================================================
   LERA DIGITAL STORE — HOMEPAGE  (versi visual 22 Sep 2026)
   ----------------------------------------------------------------------------
   Dua susunan:
   · Layar 761px ke atas (tablet, laptop, dan HP dengan "Situs desktop")
     = salinan visual rujukan. Semua ukuran memakai satuan --u, yaitu
     1 piksel visual rujukan (lebar 941). Jadi tampilannya ikut membesar
     dan mengecil utuh, tidak berubah susunan.
   · Layar 760px ke bawah (HP biasa) = susunan bertumpuk dengan gaya sama,
     supaya tulisan tetap terbaca.
   ========================================================================== */

:root{
  --navy:#06084a;
  --violet:#4a14c2;
  --magenta:#d823a6;
  --blue:#2a62f5;
  --ink:#141a3d;
  --muted:#5f6594;
  --muted-2:#6a7098;
  --line:#ebecf5;
  --page:#fbfaff;
  --green:#06a656;
  --amber:#ee9806;
  --hh:70px;                                   /* tinggi header */
  --wrap:min(calc(100% - 32px),560px);         /* lebar isi */
  --aw:min(calc(100vw - 32px),440px);          /* lebar gambar hero */
}

/* ---------------------------------------------------------------- dasar -- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;min-width:320px;color:var(--ink);background:var(--page);font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.6;overflow-x:hidden}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
img,svg{display:block}
img{max-width:100%}
.container{width:var(--wrap);margin-inline:auto}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
:focus-visible{outline:3px solid rgba(46,91,243,.35);outline-offset:3px}

/* --------------------------------------------------------------- header -- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.93);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:box-shadow .3s ease}
.site-header.scrolled{box-shadow:0 8px 28px rgba(16,24,65,.07)}
.header-inner{min-height:var(--hh);display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--navy);line-height:1}
.brand-mark{width:44px;height:44px;flex:0 0 44px}
.brand-copy{display:flex;flex-direction:column;gap:5px}
.brand-copy strong{font-size:23px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.brand-copy span{font-size:9px;font-weight:700;letter-spacing:.36em;white-space:nowrap}
.menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border:1px solid #e6e7f1;border-radius:14px;color:var(--navy);background:#fff;box-shadow:0 4px 14px rgba(40,40,110,.05);cursor:pointer}
.menu-toggle svg{width:24px;height:24px}

/* menu HP (dibuka tombol garis tiga) */
.site-nav{position:fixed;inset:var(--hh) 0 auto;max-height:calc(100vh - var(--hh));overflow-y:auto;display:grid;gap:0;padding:14px 18px 22px;background:rgba(255,255,255,.98);border-bottom:1px solid var(--line);box-shadow:0 18px 45px rgba(20,27,67,.12);opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .25s ease,transform .25s ease,visibility .25s ease}
.site-nav.is-open{opacity:1;visibility:visible;transform:translateY(0)}
.site-nav a{padding:14px 12px;border-radius:12px;color:#202640;font-size:15px;font-weight:600}
.site-nav a:hover,.site-nav a.active{color:var(--blue);background:#f5f6ff}
.mobile-contact{display:flex;justify-content:center;margin-top:10px;color:#fff!important;background:linear-gradient(105deg,#e12fa9,#912cd7 55%,#4b3bf0)!important;text-align:center}

/* tombol umum */
.contact-button,.button-primary{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:999px;font-weight:700;color:#fff;transition:transform .25s ease,box-shadow .25s ease,filter .25s ease}
.contact-button{min-height:50px;padding:0 24px;background:linear-gradient(105deg,#e12fa9,#912cd7 55%,#4b3bf0);box-shadow:0 12px 26px rgba(112,43,220,.22)}
.contact-button svg{width:20px;height:20px}
.contact-button.header-action{display:none}
.contact-button:hover,.button-primary:hover{transform:translateY(-2px);filter:saturate(1.08)}

/* ----------------------------------------------------------------- hero -- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(120% 60% at 90% 0%,rgba(222,120,210,.07),transparent 60%),linear-gradient(180deg,#faf8fe 0%,#f8f6fd 55%,var(--page) 100%)}
.hero-inner{position:relative;padding:26px 0 34px}
.hero-head,.hero-rest{position:relative;z-index:2}

.eyebrow{margin:0 0 14px;color:#50508c;font-size:12px;font-weight:700;line-height:1.75;letter-spacing:.3em;text-transform:uppercase}
.eyebrow span{display:block}

.hero h1{margin:0;font-size:clamp(44px,13.6vw,62px);font-weight:800;line-height:.9;letter-spacing:-.045em}
.h1-line{display:block;padding-bottom:.04em}
.benefit span:last-child{white-space:nowrap}
.h1-a{color:var(--navy)}
.h1-b{background:linear-gradient(92deg,#4513bf,#5a1fd2);-webkit-background-clip:text;background-clip:text;color:transparent}
.h1-c{background:linear-gradient(92deg,#d31f9d,#e03aa6);-webkit-background-clip:text;background-clip:text;color:transparent}

.hero-lead{margin:18px 0 0;max-width:30em;color:var(--muted);font-size:16px;line-height:1.6}

/* gambar ponsel + gumpalan + tulisan tangan */
.hero-art{position:relative;z-index:1;width:var(--aw);aspect-ratio:560/692;margin:14px auto 4px}
.art-blob{position:absolute;inset:0;width:100%;height:100%}
.art-phones{position:absolute;left:3.2%;top:16.2%;width:92.9%;height:auto;filter:drop-shadow(0 18px 24px rgba(40,28,90,.14))}
.art-petal{position:absolute;z-index:2}
.petal-1{left:13.4%;top:10.1%;width:5.4%;transform:rotate(-24deg)}
.petal-2{left:9.5%;top:50%;width:4.4%;transform:rotate(32deg)}
.art-note{position:absolute;z-index:3;margin:0;color:#4b27b0;font-family:"Dancing Script","Segoe Script",cursive;font-size:calc(var(--aw) * .0475);font-weight:500;line-height:1.32;transform:rotate(-9deg);transform-origin:left top;white-space:nowrap}
.art-note span{display:block}
.note-a{left:62.5%;top:0}
.note-b{left:62%;top:87.5%}
.note-foot{display:flex;align-items:flex-end;gap:.5em;margin-top:.04em;padding-left:.55em}
.note-swash{width:4.3em;height:.55em;color:inherit}
.note-heart{width:1.05em;height:1.05em;flex:0 0 auto}
.note-heart.inline{display:inline-block;width:.85em;height:.85em;margin-left:.2em;vertical-align:-.12em}
.note-b .note-foot{padding-left:1.1em}

/* keunggulan 2×2 */
.hero-rest{margin-top:8px}
.benefit-row{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px}
.benefit{display:flex;align-items:center;gap:11px;min-width:0;color:#0b0d3d;font-size:14px;font-weight:700;line-height:1.3}
.benefit-icon{display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border:2px solid #fff;border-radius:50%;box-shadow:0 7px 18px rgba(63,51,139,.08)}
.benefit-icon svg{width:23px;height:23px}
.icon-pink{color:#ec0497;background:#fde5f7}
.icon-blue{color:#1c58f7;background:#e8eefe}
.icon-amber{color:#f8a50c;background:#fef6e7}
.icon-purple{color:#3908c7;background:#eeebfd}

/* tombol hero */
.hero-actions{display:flex;flex-direction:column;align-items:stretch;gap:14px;margin-top:24px}
.button-primary{min-height:56px;padding:0 24px;font-size:16px;background:linear-gradient(100deg,#e12fa9 0%,#922cd6 55%,#4b3bf0 100%);box-shadow:0 14px 28px rgba(110,50,220,.25)}
.button-primary svg,.btn-arrow{width:20px;height:20px;flex:0 0 auto}
.button-secondary{display:inline-flex;align-items:center;gap:14px;color:#0b0d3d;font-size:15px;font-weight:700;line-height:1.25}
.play-icon{display:grid;place-items:center;flex:0 0 54px;width:54px;height:54px;color:#080e59;background:#fff;border:1.5px solid #e3e2ee;border-radius:50%;box-shadow:0 8px 20px rgba(50,40,120,.08);transition:transform .25s ease}
.button-secondary:hover .play-icon{transform:scale(1.05)}
.play-icon svg{width:21px;height:21px;margin-left:3px}

/* --------------------------------------------------------- kartu layanan -- */
.services{position:relative;z-index:3;padding:8px 0 24px}
.service-grid{display:grid;grid-template-columns:1fr;gap:18px}
.service-card{display:flex;flex-direction:column;padding:22px 20px;border-radius:22px;box-shadow:0 18px 44px rgba(76,56,150,.07)}
.service-card.invitation{background:linear-gradient(180deg,#fdf5fb 0%,#fcedf8 62%,#fbe5f5 100%);border:1px solid #f5e3f1}
.service-card.promotion{background:linear-gradient(180deg,#f6f9fe,#f3f7fe);border:1px solid #e3eaf7}
.service-head{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:start}
.service-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:17px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.service-icon svg{width:36px;height:36px}
.invitation .service-icon{color:#e20a9b;background:linear-gradient(145deg,#fde3fb,#f9cff2)}
.promotion .service-icon{color:#276afa;background:linear-gradient(145deg,#e9f0fe,#dce8fd)}
.service-intro{min-width:0}
.service-title-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 10px}
.service-title-row h2{margin:0;color:#0a0c45;font-size:21px;line-height:1.2;letter-spacing:-.02em}
.status-pill{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.status-pill:before{content:"";width:8px;height:8px;border-radius:50%}
.status-live{color:#018a33;background:#e3faee;border:1px solid #b6ebcd}
.status-live:before{background:var(--green);box-shadow:0 0 0 3px rgba(6,166,86,.14)}
.status-soon{color:#e67201;background:#fef4e3;border:1px solid #f6d49c}
.status-soon:before{background:var(--amber);box-shadow:0 0 0 3px rgba(238,152,6,.14)}
.service-summary{margin:8px 0 0;color:#62679a;font-size:15px;line-height:1.5}
.service-list{list-style:none;margin:20px 0 20px;padding:0;display:grid;gap:11px}
.service-list li{display:flex;align-items:flex-start;gap:12px;color:#585d8e;font-size:14.5px;line-height:1.4}
.check{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;margin-top:-1px;color:#fff;background:linear-gradient(135deg,#f184cf,#e02ba9);border-radius:50%}
.check svg{width:13px;height:13px}
.service-cta,.service-outline{display:inline-flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:56px;margin-top:auto;padding:0 22px;border-radius:999px;font-size:16px;font-weight:700;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.service-cta{color:#fff;background:linear-gradient(100deg,#cc14a4 0%,#df33ad 55%,#c912a1 100%);box-shadow:0 14px 26px rgba(205,22,165,.22)}
.service-cta:hover{transform:translateY(-2px);box-shadow:0 18px 32px rgba(205,22,165,.28)}
.service-outline{color:#2f3999;background:rgba(255,255,255,.6);border:2px solid #b9bff0}
.service-outline:hover{background:#fff}
.coming-box{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;margin:20px 0;padding:16px;background:#e8effd;border-radius:16px}
.coming-box>svg{width:42px;height:42px;color:#3d7bef}
.coming-box strong{display:block;color:#0a4fdc;font-size:16px;line-height:1.3}
.coming-box span{display:block;margin-top:3px;color:#48538b;font-size:14px;line-height:1.45}

/* ------------------------------------------------------- strip keunggulan -- */
.feature-strip{padding:22px 0 0}
.feature-grid{display:grid;grid-template-columns:1fr 1fr}
.feature{padding:18px 10px;text-align:center;border-bottom:1px solid var(--line)}
.feature:nth-child(odd){border-right:1px solid var(--line)}
.feature:nth-child(3),.feature:nth-child(4){border-bottom:0}
.feature-icon{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 11px;color:#3903c2;background:#ece6fd;border-radius:50%}
.feature:nth-child(2) .feature-icon{color:#1a5cf9;background:#e4edfe}
.feature:nth-child(3) .feature-icon{color:#3e0ac4;background:#ede7fd}
.feature:nth-child(4) .feature-icon{color:#3e06c9;background:#ede7fd}
.feature-icon svg{width:28px;height:28px}
.feature h3{margin:0 0 4px;color:#0b0d3d;font-size:15.5px;line-height:1.3}
.feature p{margin:0;color:var(--muted-2);font-size:13.5px;line-height:1.4}

/* ---------------------------------------------------------------- kutipan -- */
.quote-wrap{padding:22px 0 56px}
.quote-banner{position:relative;margin:0;padding:30px 36px 26px;overflow:hidden;text-align:center;background:linear-gradient(100deg,#fdf4fa 0%,#fcedf7 50%,#fdf3f9 100%);border:1px solid #f6e2ef;border-radius:20px}
.quote-banner blockquote{position:relative;z-index:1;margin:0 auto;max-width:34em}
.quote-banner blockquote p{margin:0;color:#27236f;font-family:"Lora",Georgia,"Noto Serif",serif;font-size:17px;font-style:italic;font-weight:500;line-height:1.55}
.quote-banner figcaption{position:relative;z-index:1;margin-top:8px;color:#3a3a80;font-size:10.5px;font-weight:800;letter-spacing:.26em}
.quote-hearts{position:absolute;left:5px;top:12px;width:42px;height:auto;opacity:.9}
.quote-tulip{position:absolute;right:4px;bottom:0;width:52px;height:auto;opacity:.9}

/* ----------------------------------------------- tentang, FAQ, kontak -- */
.info-section{padding:66px 0;background:#f8f9ff}
.section-kicker{margin:0 0 10px;color:var(--blue);font-size:13px;font-weight:800;letter-spacing:3px;text-transform:uppercase}
.section-title{margin:0;color:var(--navy);font-size:clamp(28px,7.5vw,40px);line-height:1.15;letter-spacing:-.03em}
.section-lead{max-width:740px;margin:17px auto 0;color:var(--muted);font-size:16px}
.about-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:30px}
.about-card{padding:24px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 14px 36px rgba(42,36,102,.06)}
.about-card strong{display:block;margin-bottom:7px;color:var(--navy);font-size:18px}
.about-card p{margin:0;color:var(--muted);font-size:15px}
.faq-section{padding:66px 0}
.faq-list{width:min(860px,100%);margin:32px auto 0;display:grid;gap:13px}
details{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 9px 25px rgba(24,30,77,.05)}
summary{position:relative;padding:20px 58px 20px 22px;color:var(--navy);font-weight:700;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";position:absolute;right:20px;top:50%;width:29px;height:29px;display:grid;place-items:center;color:var(--blue);background:#eef3ff;border-radius:50%;transform:translateY(-50%)}
details[open] summary:after{content:"−"}
details p{margin:0;padding:0 22px 22px;color:var(--muted);font-size:15px}
.contact-section{padding:0 0 66px}
.contact-panel{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding:34px 25px;color:#fff;background:linear-gradient(110deg,#12245e,#4826b8 53%,#c42a9b);border-radius:22px;box-shadow:0 22px 55px rgba(50,31,130,.2)}
.contact-panel:after{content:"";position:absolute;right:-100px;top:-190px;width:420px;height:420px;border:1px solid rgba(255,255,255,.16);border-radius:50%}
.contact-panel>*{position:relative;z-index:1}
.contact-panel h2{margin:0 0 7px;font-size:26px;line-height:1.25}
.contact-panel p{margin:0;color:#e6e7ff}
.contact-panel .contact-button{width:100%;color:#5d278a;background:#fff;box-shadow:none}
.site-footer{padding:30px 0;color:#dfe4ff;background:linear-gradient(110deg,#101f58 0%,#4329a5 56%,#b72b96 100%)}
.footer-inner{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.site-footer strong{color:#fff}
.site-footer small{color:#cbd2f3}
.footer-links{display:flex;gap:20px;flex-wrap:wrap;font-size:14px;font-weight:600}
.footer-links a{color:#e9ebff}
.footer-links a:hover{color:#fff}

/* muncul saat digulir */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.js .reveal.is-visible{opacity:1;transform:none}

/* ============================================================================
   761px ke atas — SALINAN VISUAL RUJUKAN
   1 satuan (--u) = 1 piksel visual rujukan. Lebar visual = 941 satuan.
   ========================================================================== */
@media (min-width:761px){
  :root{
    --u:calc(min(100vw,1040px) / 941);
    --hh:calc(var(--u) * 120);
    --wrap:calc(var(--u) * 887);
    --aw:calc(var(--u) * 560);
  }

  /* header */
  .header-inner{padding:0 calc(var(--u) * 16) 0 calc(var(--u) * 22);gap:calc(var(--u) * 20)}
  .brand{gap:calc(var(--u) * 25)}
  .brand-mark{width:calc(var(--u) * 70);height:calc(var(--u) * 70);flex-basis:calc(var(--u) * 70)}
  .brand-copy{gap:calc(var(--u) * 9)}
  .brand-copy strong{font-size:calc(var(--u) * 45)}
  .brand-copy span{font-size:calc(var(--u) * 17)}
  .menu-toggle{width:calc(var(--u) * 70);height:calc(var(--u) * 68);border-radius:calc(var(--u) * 17)}
  .menu-toggle svg{width:calc(var(--u) * 34);height:calc(var(--u) * 34)}
  .site-nav{padding:calc(var(--u) * 16) calc(var(--u) * 28) calc(var(--u) * 26)}
  .site-nav a{padding:calc(var(--u) * 16) calc(var(--u) * 14);font-size:calc(var(--u) * 19);border-radius:calc(var(--u) * 14)}

  /* hero: teks di kiri, gambar di kanan */
  .hero-inner{padding:calc(var(--u) * 28) 0 calc(var(--u) * 38) calc(var(--u) * 20);min-height:calc(var(--u) * 715)}
  .hero-head,.hero-rest{width:calc(var(--u) * 392)}
  .eyebrow{margin-bottom:calc(var(--u) * 22);font-size:calc(var(--u) * 15.5);line-height:calc(var(--u) * 26);letter-spacing:.32em}
  .hero h1{font-size:calc(var(--u) * 78);line-height:.9;letter-spacing:-.05em}
  .h1-line{white-space:nowrap}
  .hero-lead{margin-top:calc(var(--u) * 22);max-width:none;font-size:calc(var(--u) * 20.5);line-height:1.3}
  .hero-art{position:absolute;left:calc(var(--u) * 367);top:calc(var(--u) * -2);margin:0}
  .hero-rest{margin-top:calc(var(--u) * 38)}
  .benefit-row{grid-template-columns:calc(var(--u) * 213) 1fr;gap:calc(var(--u) * 19) 0}
  .benefit{gap:calc(var(--u) * 14);font-size:calc(var(--u) * 17.5)}
  .benefit-icon{flex-basis:calc(var(--u) * 58);width:calc(var(--u) * 58);height:calc(var(--u) * 58)}
  .benefit-icon svg{width:calc(var(--u) * 28);height:calc(var(--u) * 28)}
  .hero-actions{flex-direction:row;align-items:center;gap:calc(var(--u) * 29);margin-top:calc(var(--u) * 22)}
  .button-primary{flex:0 0 calc(var(--u) * 331);min-height:calc(var(--u) * 60);padding:0 calc(var(--u) * 24);gap:calc(var(--u) * 14);font-size:calc(var(--u) * 22);white-space:nowrap}
  .button-primary svg,.btn-arrow{width:calc(var(--u) * 24);height:calc(var(--u) * 24)}
  .button-secondary{gap:calc(var(--u) * 16);font-size:calc(var(--u) * 17.5);white-space:nowrap}
  .play-icon{flex-basis:calc(var(--u) * 70);width:calc(var(--u) * 70);height:calc(var(--u) * 70)}
  .play-icon svg{width:calc(var(--u) * 26);height:calc(var(--u) * 26)}

  /* kartu layanan */
  .services{padding:0 0 calc(var(--u) * 30)}
  .service-grid{grid-template-columns:453fr 418fr;gap:calc(var(--u) * 16)}
  .service-card{min-height:calc(var(--u) * 460);padding:calc(var(--u) * 25) calc(var(--u) * 24) calc(var(--u) * 25) calc(var(--u) * 25);border-radius:calc(var(--u) * 26)}
  .service-head{grid-template-columns:calc(var(--u) * 87) minmax(0,1fr);gap:calc(var(--u) * 20)}
  .service-icon{width:calc(var(--u) * 87);height:calc(var(--u) * 87);border-radius:calc(var(--u) * 21)}
  .service-icon svg{width:calc(var(--u) * 48);height:calc(var(--u) * 48)}
  .service-title-row{gap:calc(var(--u) * 10) calc(var(--u) * 12);margin-top:calc(var(--u) * 2)}
  .service-title-row h2{font-size:calc(var(--u) * 24)}
  .status-pill{height:calc(var(--u) * 34);padding:0 calc(var(--u) * 13);gap:calc(var(--u) * 9);font-size:calc(var(--u) * 12)}
  .status-pill:before{width:calc(var(--u) * 10);height:calc(var(--u) * 10)}
  .service-summary{margin-top:calc(var(--u) * 10);font-size:calc(var(--u) * 17.5);line-height:1.45}
  .service-list{margin:calc(var(--u) * 30) 0 calc(var(--u) * 22);gap:calc(var(--u) * 14)}
  .service-list li{gap:calc(var(--u) * 17);font-size:calc(var(--u) * 17);line-height:1.35}
  .check{flex-basis:calc(var(--u) * 28);width:calc(var(--u) * 28);height:calc(var(--u) * 28);margin-top:0}
  .check svg{width:calc(var(--u) * 15);height:calc(var(--u) * 15)}
  .service-cta,.service-outline{min-height:calc(var(--u) * 63);padding:0 calc(var(--u) * 22);gap:calc(var(--u) * 14);font-size:calc(var(--u) * 20)}
  .service-outline{font-size:calc(var(--u) * 18.5)}
  .coming-box{grid-template-columns:calc(var(--u) * 52) 1fr;gap:calc(var(--u) * 24);margin:calc(var(--u) * 26) 0 calc(var(--u) * 22);padding:calc(var(--u) * 22);border-radius:calc(var(--u) * 18)}
  .coming-box>svg{width:calc(var(--u) * 52);height:calc(var(--u) * 52)}
  .coming-box strong{font-size:calc(var(--u) * 17.5)}
  .coming-box span{margin-top:calc(var(--u) * 4);font-size:calc(var(--u) * 15)}

  /* strip keunggulan: empat kolom */
  .feature-strip{padding:0}
  .feature-grid{grid-template-columns:repeat(4,1fr)}
  .feature,.feature:nth-child(odd){min-height:calc(var(--u) * 145);padding:0 calc(var(--u) * 12);border-bottom:0;border-right:1px solid var(--line)}
  .feature:last-child{border-right:0}
  .feature-icon{width:calc(var(--u) * 68);height:calc(var(--u) * 68);margin-bottom:calc(var(--u) * 14)}
  .feature-icon svg{width:calc(var(--u) * 34);height:calc(var(--u) * 34)}
  .feature h3{margin-bottom:calc(var(--u) * 6);font-size:calc(var(--u) * 17)}
  .feature p{font-size:calc(var(--u) * 14);line-height:1.4}

  /* kutipan */
  .quote-wrap{padding:calc(var(--u) * 32) 0 calc(var(--u) * 64)}
  .quote-banner{display:flex;flex-direction:column;justify-content:center;min-height:calc(var(--u) * 143);padding:calc(var(--u) * 22) calc(var(--u) * 150);border-radius:calc(var(--u) * 24)}
  .quote-banner blockquote{max-width:calc(var(--u) * 560)}
  .quote-banner blockquote p{font-size:calc(var(--u) * 21);line-height:1.55}
  .quote-banner figcaption{margin-top:calc(var(--u) * 10);font-size:calc(var(--u) * 11)}
  .quote-hearts{left:calc(var(--u) * 10);top:50%;width:calc(var(--u) * 112);transform:translateY(-50%)}
  .quote-tulip{right:calc(var(--u) * 12);width:calc(var(--u) * 128)}

  /* bagian bawah ikut satuan yang sama supaya seimbang */
  .info-section,.faq-section{padding:calc(var(--u) * 80) 0}
  .section-kicker{font-size:calc(var(--u) * 14)}
  .section-title{font-size:calc(var(--u) * 40)}
  .section-lead{font-size:calc(var(--u) * 18)}
  .about-grid{grid-template-columns:repeat(3,1fr);gap:calc(var(--u) * 18);margin-top:calc(var(--u) * 38)}
  .about-card{padding:calc(var(--u) * 26);border-radius:calc(var(--u) * 20)}
  .about-card strong{font-size:calc(var(--u) * 19)}
  .about-card p{font-size:calc(var(--u) * 16)}
  summary{padding:calc(var(--u) * 21) calc(var(--u) * 60) calc(var(--u) * 21) calc(var(--u) * 24);font-size:calc(var(--u) * 17)}
  details p{padding:0 calc(var(--u) * 24) calc(var(--u) * 22);font-size:calc(var(--u) * 16)}
  .contact-section{padding-bottom:calc(var(--u) * 80)}
  .contact-panel{flex-direction:row;align-items:center;justify-content:space-between;padding:calc(var(--u) * 40) calc(var(--u) * 46);border-radius:calc(var(--u) * 26)}
  .contact-panel h2{font-size:calc(var(--u) * 29)}
  .contact-panel p{font-size:calc(var(--u) * 17)}
  .contact-panel .contact-button{width:auto;min-height:calc(var(--u) * 56);padding:0 calc(var(--u) * 28);font-size:calc(var(--u) * 17)}
  .footer-inner{flex-direction:row;align-items:center;justify-content:space-between}
}

/* ============================================================================
   1021px ke atas — laptop/desktop: menu tampil di header
   ========================================================================== */
@media (min-width:1021px){
  :root{--hh:calc(var(--u) * 100)}
  .header-inner{display:grid;grid-template-columns:auto 1fr auto}
  .brand-mark{width:calc(var(--u) * 56);height:calc(var(--u) * 56);flex-basis:calc(var(--u) * 56)}
  .brand{gap:calc(var(--u) * 16)}
  .brand-copy strong{font-size:calc(var(--u) * 34)}
  .brand-copy span{font-size:calc(var(--u) * 12.5)}
  .menu-toggle,.mobile-contact{display:none!important}
  .site-nav{position:static;display:flex;justify-content:center;gap:calc(var(--u) * 20);max-height:none;overflow:visible;padding:0;background:transparent;border:0;box-shadow:none;opacity:1;visibility:visible;transform:none}
  .site-nav a{position:relative;padding:calc(var(--u) * 10) 0;border-radius:0;background:transparent!important;font-size:calc(var(--u) * 14.5);white-space:nowrap}
  .site-nav a:after{content:"";position:absolute;left:50%;bottom:0;width:0;height:3px;border-radius:99px;background:linear-gradient(90deg,#4b3bf0,var(--magenta));transform:translateX(-50%);transition:width .25s ease}
  .site-nav a:hover:after,.site-nav a.active:after{width:100%}
  .contact-button.header-action{display:inline-flex;min-height:calc(var(--u) * 50);font-size:calc(var(--u) * 15)}
}

/* ------------------------------------------------------ gerak dikurangi -- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .reveal{opacity:1;transform:none}
}