/* ============================================================
   Ritiros Studio — Landing Page Styles (v2, SaaS-product look)
   Palet: azure #2C61E6 + violet #7C5CFC di atas putih, aksen langit #59A6EE
   Font : Sora (heading) + Inter (body) + JetBrains Mono (label/eyebrow)
   Motif : aurora gradient, browser-frame mockup, bento grid, spotlight hover
   ============================================================ */

:root{
  --paper:#FFFFFF; --paper-2:#F2F6FC; --card:#FFFFFF;
  --ink:#33414F; --head:#16283D; --muted:#6B7A8D; --line:#E4EBF4;
  --accent:#2C61E6; --accent-ink:#1B47B8; --accent-2:#59A6EE; --accent-3:#7C5CFC;
  --accent-soft:rgba(44,97,230,.08);
  --shadow:0 1px 2px rgba(20,40,80,.05), 0 16px 40px -24px rgba(30,60,120,.22);
  --serif:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --wrap:1120px;
  /* token turunan — otomatis ikut berubah saat tema/aksen berganti */
  --grad:linear-gradient(135deg, var(--accent) 0%, var(--accent-3) 100%);
  --grad-soft:linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent-3) 12%, transparent));
  --shadow-glow:0 22px 50px -22px color-mix(in srgb, var(--accent) 45%, transparent), 0 4px 14px -6px rgba(20,40,80,.18);
  --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:28px;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0C111A; --paper-2:#111826; --card:#141C2B;
    --ink:#DCE5F0; --head:#F0F5FB; --muted:#93A3B8; --line:#222E42;
    --accent:#5B8CFF; --accent-ink:#A9C4FF; --accent-2:#7FC0F5; --accent-3:#B79CFF;
    --accent-soft:rgba(91,140,255,.14);
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 24px 60px -30px rgba(0,0,0,.75);
  }
}
:root[data-theme="light"]{
  --paper:#FFFFFF; --paper-2:#F2F6FC; --card:#FFFFFF;
  --ink:#33414F; --head:#16283D; --muted:#6B7A8D; --line:#E4EBF4;
  --accent:#2C61E6; --accent-ink:#1B47B8; --accent-2:#59A6EE; --accent-3:#7C5CFC;
  --accent-soft:rgba(44,97,230,.08);
  --shadow:0 1px 2px rgba(20,40,80,.05), 0 16px 40px -24px rgba(30,60,120,.22);
}
:root[data-theme="dark"]{
  --paper:#0C111A; --paper-2:#111826; --card:#141C2B;
  --ink:#DCE5F0; --head:#F0F5FB; --muted:#93A3B8; --line:#222E42;
  --accent:#5B8CFF; --accent-ink:#A9C4FF; --accent-2:#7FC0F5; --accent-3:#B79CFF;
  --accent-soft:rgba(91,140,255,.14);
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 24px 60px -30px rgba(0,0,0,.75);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  position:relative;
}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.14; letter-spacing:-.015em; text-wrap:balance; margin:0; color:var(--head)}
p{margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}

/* Eyebrow → pill badge (motif "status chip" khas produk SaaS) */
.eyebrow{font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); display:inline-flex; gap:.55em; align-items:center; padding:7px 14px 7px 11px; border-radius:999px; background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 22%, transparent)}
.eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); display:inline-block; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent)}

.section{padding:80px 0; border-top:1px solid var(--line)}
.lead{color:var(--muted); font-size:1.12rem; max-width:60ch}
.muted{color:var(--muted)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

/* Skip-to-content — aksesibilitas keyboard, tersembunyi sampai difokus */
.skip-link{position:absolute; left:12px; top:-60px; z-index:2147483001; background:var(--grad); color:#fff; padding:10px 18px; border-radius:8px; font-family:var(--sans); font-weight:600; font-size:.9rem; transition:top .2s ease}
.skip-link:focus{top:12px}

/* Grain overlay tipis di seluruh halaman — tekstur premium ala produk SaaS */
.grain{position:fixed; inset:0; z-index:2147483000; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Buttons */
.btn{position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:.5em; font-family:var(--sans); font-weight:600; font-size:.98rem; padding:14px 24px; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; white-space:nowrap}
.btn-primary{background:var(--grad); color:#fff; box-shadow:var(--shadow-glow)}
.btn-primary::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 62%); transform:translateX(-130%); transition:transform .65s ease}
.btn-primary:hover::after{transform:translateX(130%)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px)}
.btn-sm{padding:10px 16px; font-size:.9rem}

/* Highlight kata kunci di heading — gradient text */
.hl{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* Tombol WhatsApp mengambang, dengan pulse ring (indikator "live") */
.wa-fab{position:fixed; right:20px; bottom:20px; z-index:60; display:inline-flex; align-items:center; gap:10px; background:#25D366; color:#fff; padding:12px 18px 12px 13px; border-radius:999px; box-shadow:0 10px 26px rgba(16,40,30,.28); font-family:var(--sans); font-weight:600; font-size:.95rem; transition:transform .2s, box-shadow .2s}
.wa-fab:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(16,40,30,.34); color:#fff}
.wa-fab svg{width:28px; height:28px; flex:none; position:relative; z-index:1}
.wa-fab .wa-txt{white-space:nowrap}
.wa-fab .wa-pulse{position:absolute; left:13px; top:12px; width:28px; height:28px; border-radius:50%; background:#25D366; opacity:.6; animation:wapulse 2.2s ease-out infinite}
@keyframes wapulse{0%{transform:scale(1); opacity:.55} 100%{transform:scale(2.1); opacity:0}}
@media(max-width:600px){ .wa-fab{padding:14px; right:16px; bottom:16px} .wa-fab .wa-txt{display:none} }
@media (prefers-reduced-motion: reduce){ .wa-fab .wa-pulse{animation:none; display:none} }

/* Nav */
header.nav{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter:blur(14px) saturate(1.4); border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s}
header.nav.scrolled{border-color:var(--line); box-shadow:0 8px 30px -22px rgba(20,40,80,.35)}
.nav-in{display:flex; align-items:center; gap:20px; height:68px}
.brand{font-family:var(--serif); font-size:1.28rem; font-weight:700; letter-spacing:-.02em; display:flex; align-items:center; gap:9px}
.brand .mark{height:30px; width:auto; flex:none; display:block}
.nav-links{display:flex; gap:4px; margin-left:auto; font-size:.94rem}
.nav-links a{color:var(--muted); transition:color .15s, background .15s; padding:9px 14px; border-radius:999px}
.nav-links a:hover{color:var(--ink); background:var(--accent-soft)}
.nav-actions{display:flex; align-items:center; gap:12px}
.icon-btn{width:40px; height:40px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .15s, color .15s, transform .15s}
.icon-btn:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-1px)}
.nav-toggle{display:none}
@media(max-width:900px){
  .nav-links{position:fixed; inset:68px 0 auto 0; flex-direction:column; background:var(--paper); border-bottom:1px solid var(--line); padding:18px 24px; gap:4px; transform:translateY(-140%); transition:transform .28s ease; margin-left:0}
  .nav-links.open{transform:none}
  .nav-links a{padding:12px 14px; font-size:1.05rem; border-bottom:1px solid var(--line); border-radius:10px}
  .nav-actions .desk{display:none}
  .nav-toggle{display:inline-flex; margin-left:auto}
  .brand .brandword{display:inline}
}

/* Hero */
.hero{position:relative; overflow:hidden; padding:40px 0 48px; min-height:calc(100svh - 68px); display:flex; align-items:center}
.hero > .wrap{width:100%; position:relative; z-index:1}
.hero-grid{display:grid; grid-template-columns:1.12fr .88fr; gap:48px; align-items:center}
.hero h1{font-size:clamp(2.2rem,4.4vw,3.7rem); margin:18px 0 0}
.hero h1 em{font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .lead{margin-top:16px; font-size:1.06rem}
.hero-img{width:100%; height:auto; display:block; border-radius:var(--r-lg); box-shadow:var(--shadow)}

/* Aurora — blob gradient blur di latar hero (motif produk SaaS modern) */
.aurora{position:absolute; inset:0; z-index:0; pointer-events:none}
.aurora span{position:absolute; border-radius:50%; filter:blur(80px); opacity:.2; animation:drift 20s ease-in-out infinite alternate}
.aurora .a1{width:560px; height:560px; background:var(--accent); top:-220px; left:-140px}
.aurora .a2{width:440px; height:440px; background:var(--accent-3); bottom:-200px; right:-100px; animation-delay:-6s}
.aurora .a3{width:320px; height:320px; background:var(--accent-2); top:22%; right:14%; opacity:.14; animation-delay:-12s}
:root[data-theme="dark"] .aurora span{opacity:.32}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .aurora span{opacity:.32}}
@keyframes drift{to{transform:translate(26px,-18px) scale(1.06)}}
@media (prefers-reduced-motion: reduce){ .aurora span{animation:none} }

/* Hero: mockup dalam "browser frame" + screenshot mengambang + badge live */
/* Browser-frame: kartu mockup bergaya jendela browser — dipakai di hero & section lain */
.browser-frame{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--card); box-shadow:0 34px 70px -30px color-mix(in srgb, var(--accent) 32%, rgba(20,40,80,.5))}
.browser-frame img{display:block; width:100%; height:auto}
.browser-bar{display:flex; align-items:center; gap:6px; padding:10px 12px; background:var(--paper-2); border-bottom:1px solid var(--line)}
.browser-bar .dot{width:9px; height:9px; border-radius:50%; flex:none}
.browser-bar .dot:nth-child(1){background:#FF5F57}
.browser-bar .dot:nth-child(2){background:#FEBC2E}
.browser-bar .dot:nth-child(3){background:#28C840}
.browser-bar .url{margin-left:8px; font-family:var(--mono); font-size:10.5px; color:var(--muted); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:4px 12px; flex:1; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.hero-media{position:relative; width:100%; aspect-ratio:1 / 1.04}
.hero-media .browser-frame{position:absolute; width:80%; top:0; right:0; z-index:1}
.hero-media .m2{position:absolute; display:block; height:auto; width:62%; left:0; bottom:0; z-index:2; border:6px solid var(--paper); border-radius:var(--r-md); box-shadow:0 22px 44px -18px rgba(20,40,80,.42)}
@media(max-width:600px){ .hero-media{aspect-ratio:1 / 1.08} .hero-media .m2{border-width:4px} }

.float-badge{position:absolute; z-index:3; left:-4%; top:12%; display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:9px 16px 9px 9px; box-shadow:var(--shadow); animation:floaty 5s ease-in-out infinite}
.float-badge .fb-ic{width:30px; height:30px; border-radius:50%; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; flex:none}
.float-badge .fb-txt{display:flex; flex-direction:column; font-size:11px; line-height:1.3; color:var(--muted)}
.float-badge .fb-txt b{display:block; font-family:var(--sans); font-size:12.5px; color:var(--head); font-weight:700}
@keyframes floaty{0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion: reduce){ .float-badge{animation:none} }
@media(max-width:900px){ .float-badge{display:none} }

.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px}
.trust{display:flex; gap:26px; flex-wrap:wrap; margin-top:26px; padding-top:20px; border-top:1px solid var(--line)}
.trust .t{display:flex; flex-direction:column; gap:2px}
.trust .n{font-family:var(--serif); font-size:1.5rem; font-weight:700}
.trust .l{font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.stars{color:var(--accent-2); letter-spacing:2px}

/* Marquee — logo cloud infinite scroll (bukan lagi baris statis yang wrap) */
.marquee{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; background:var(--paper-2)}
.marquee-label{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-align:center; margin-bottom:14px}
.mmask{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mtrack{display:flex; gap:12px; width:max-content; animation:mscroll 34s linear infinite}
.mmask:hover .mtrack{animation-play-state:paused}
.chip{font-family:var(--mono); font-size:13px; letter-spacing:.02em; padding:9px 18px; border:1px solid var(--line); border-radius:999px; color:var(--muted); white-space:nowrap; background:var(--card)}
@keyframes mscroll{to{transform:translateX(calc(-50% - 6px))}}
@media (prefers-reduced-motion: reduce){ .mtrack{animation:none; overflow-x:auto} }

/* generic section head */
.head{max-width:64ch}
.head h2{font-size:clamp(1.95rem,3.7vw,3rem); margin:16px 0 0}
.head p{margin-top:16px}

/* Problem callouts */
.split{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}
.biglist{list-style:none; padding:0; margin:24px 0 0; display:flex; flex-direction:column; gap:2px}
.biglist li{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); align-items:baseline}
.biglist li:first-child{border-top:1px solid var(--line)}
.biglist .k{font-family:var(--mono); color:var(--accent); font-size:13px; flex:none; width:26px}
.quotebox{position:relative; isolation:isolate; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; box-shadow:var(--shadow)}
.quotebox::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:0; pointer-events:none; transition:opacity .35s ease; background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%)}
.quotebox:hover::before{opacity:1}
.stat-row{display:flex; gap:12px; align-items:baseline; margin-bottom:18px}
.stat-row .big{font-family:var(--serif); font-size:2.6rem; font-weight:700; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.stat-row .big .cnum{font-family:inherit; font-weight:inherit}
.src{font-family:var(--mono); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}

/* Visualisasi 3 kolom (lingkaran + ilustrasi + caption) */
.viz-intro{max-width:62ch; margin:0 auto; text-align:center}
.viz-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:34px; margin-top:52px}
.viz{display:flex; flex-direction:column; align-items:center; text-align:center; gap:24px}
.viz .circle{position:relative; width:210px; height:210px; max-width:66vw; aspect-ratio:1; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex:none; overflow:hidden; box-shadow:0 0 0 8px color-mix(in srgb, var(--accent) 6%, transparent)}
.viz .circle svg{width:64%; height:64%}
.viz .circle img{width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.05) brightness(1.03)}
.viz .circle:has(img)::after{content:""; position:absolute; inset:0; background:var(--grad); mix-blend-mode:color; opacity:.5; pointer-events:none}
.viz p{color:var(--ink); max-width:32ch; font-size:1.05rem; line-height:1.6}
.viz p b{color:var(--head); font-weight:700}
@media(max-width:800px){ .viz-grid{grid-template-columns:1fr; gap:46px} }

/* Services — bento grid (satu kartu unggulan lebih besar, bukan grid seragam) */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px}
.svc{position:relative; isolation:isolate; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease}
.svc::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:0; pointer-events:none; transition:opacity .35s ease; background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 72%)}
.svc:hover{transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 42%, var(--line)); box-shadow:var(--shadow-glow)}
.svc:hover::before{opacity:1}
.svc .ic{width:46px; height:46px; border-radius:13px; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:16px; box-shadow:0 12px 24px -12px color-mix(in srgb, var(--accent) 65%, transparent)}
.svc h3{font-size:1.2rem; margin-bottom:8px}
.svc p{color:var(--muted); font-size:.98rem}
.svc.big{grid-column:span 2; padding:34px; background:var(--grad-soft); display:flex; flex-direction:column; justify-content:center}
.svc.big .ic{width:56px; height:56px; border-radius:16px}
.svc.big h3{font-size:1.55rem}
.svc.big p{font-size:1.03rem; max-width:46ch}
@media(max-width:700px){ .grid3{grid-template-columns:1fr} .svc.big{grid-column:span 1} }

/* Portfolio works (video) */
.works{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px}
.work{position:relative; isolation:isolate; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; cursor:pointer; transition:transform .2s, border-color .2s, box-shadow .2s}
.work::before{content:""; position:absolute; inset:0; z-index:2; opacity:0; pointer-events:none; transition:opacity .35s ease; background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--accent) 20%, transparent), transparent 72%)}
.work:hover{transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow-glow)}
.work:hover::before{opacity:1}
.work-media{position:relative; aspect-ratio:1.93; background:var(--paper-2); overflow:hidden}
.work-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.work-media .badge{position:absolute; left:12px; top:12px; z-index:2; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; background:rgba(0,0,0,.55); color:#fff; padding:5px 9px; border-radius:999px; backdrop-filter:blur(4px)}
.work-media .play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2; color:#fff; transition:opacity .25s; pointer-events:none}
.work-media .play svg{width:52px; height:52px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.45))}
.work.playing .play{opacity:0}
.work-meta{padding:18px 20px; position:relative; z-index:1}
.work-meta h3{font-size:1.15rem}
.work-meta p{color:var(--muted); font-size:.92rem; margin-top:4px}
@media(max-width:960px){.works{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.works{grid-template-columns:1fr}}

/* Portfolio auto-carousel (screenshot strip, tanpa library) */
.pcarousel{margin-top:44px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.pcarousel .cap-lead{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-align:center; margin-bottom:16px}
.ptrack{display:flex; gap:18px; width:max-content; animation:pscroll 48s linear infinite}
.pcarousel:hover .ptrack{animation-play-state:paused}
.pshot{width:290px; flex:none; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow)}
.pshot img{display:block; width:100%; aspect-ratio:1.9; object-fit:cover; object-position:top}
.pmock{aspect-ratio:16/10; padding:14px; background:var(--paper-2); display:flex; flex-direction:column; gap:8px}
.pbar{display:flex; gap:5px; margin-bottom:2px}
.pbar i{width:8px; height:8px; border-radius:50%; background:var(--line)}
.phero{flex:1; border-radius:8px; background:var(--grad)}
.pline{height:9px; border-radius:5px; background:var(--line)}
.pline.w80{width:80%} .pline.w55{width:55%}
.pshot .cap{font-family:var(--mono); font-size:12px; color:var(--muted); padding:11px 14px; border-top:1px solid var(--line); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@keyframes pscroll{to{transform:translateX(calc(-50% - 9px))}}
@media (prefers-reduced-motion: reduce){ .ptrack{animation:none; overflow-x:auto} }

/* Pricing */
.prices{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; align-items:stretch}
.plan{position:relative; isolation:isolate; background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); padding:30px; display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease}
.plan::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:0; pointer-events:none; transition:opacity .35s ease; background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%)}
.plan:hover{transform:translateY(-4px)}
.plan:hover::before{opacity:1}
.plan.feat{border-color:transparent; box-shadow:var(--shadow-glow); background:linear-gradient(var(--card),var(--card)) padding-box, var(--grad) border-box; border:2px solid transparent}
.plan .tag{position:absolute; top:-13px; left:30px; background:var(--grad); color:#fff; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:6px 13px; border-radius:999px; box-shadow:0 8px 18px -8px color-mix(in srgb, var(--accent) 60%, transparent)}
.plan .no{font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.1em}
.plan h3{font-size:1.5rem; margin:6px 0 6px}
.plan .desc{color:var(--muted); font-size:.95rem; min-height:48px}
.plan .price{font-family:var(--serif); font-size:2.1rem; font-weight:700; margin:18px 0 4px}
.plan .price small{font-family:var(--mono); font-size:12px; color:var(--muted); font-weight:400; letter-spacing:.04em}
.plan ul{list-style:none; padding:20px 0 0; margin:20px 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:11px; flex:1}
.plan li{display:flex; gap:10px; font-size:.95rem; align-items:flex-start}
.plan li svg{flex:none; margin-top:3px; color:var(--accent)}
.plan .btn{margin-top:24px; justify-content:center}
.meta-row{display:flex; gap:16px; margin:14px 0 0; flex-wrap:wrap}
.meta-row .m{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.meta-row .m b{color:var(--ink); font-family:var(--sans); font-weight:600}

/* Essential features */
.feat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:40px}
.fcard{position:relative; isolation:isolate; padding:22px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper-2); transition:transform .2s ease, border-color .2s ease}
.fcard::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:0; pointer-events:none; transition:opacity .35s ease; background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%)}
.fcard:hover{transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 35%, var(--line))}
.fcard:hover::before{opacity:1}
.fcard .ic{width:38px; height:38px; border-radius:11px; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:12px}
.fcard h4{font-size:1.05rem; margin-bottom:6px}
.fcard p{font-size:.9rem; color:var(--muted)}

/* Process */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:44px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.step{padding:30px; background:var(--card); border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .2s}
.step:hover{background:var(--paper-2)}
.step .no{font-family:var(--mono); font-size:15px; font-weight:600; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:.1em}
.step h3{font-size:1.24rem; margin:12px 0 8px}
.step p{color:var(--muted); font-size:.95rem}

/* Testimonials */
.tgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:44px}
.tcard{position:relative; isolation:isolate; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; transition:transform .2s ease, box-shadow .2s ease}
.tcard::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:0; pointer-events:none; transition:opacity .35s ease; background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%)}
.tcard:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.tcard:hover::before{opacity:1}
.tcard .stars{font-size:1rem; margin-bottom:14px}
.tcard blockquote{margin:0; font-family:var(--serif); font-size:1.24rem; font-weight:500; line-height:1.48}
.tcard .who{margin-top:20px; display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.tcard .avatar{width:34px; height:34px; border-radius:50%; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:0; text-transform:uppercase; flex:none}

/* FAQ */
.faq{max-width:820px; margin:44px auto 0}
.qa{border-bottom:1px solid var(--line)}
.qa button{width:100%; text-align:left; background:none; border:0; padding:22px 0; font-family:var(--serif); font-size:1.15rem; font-weight:600; color:var(--ink); cursor:pointer; display:flex; justify-content:space-between; gap:20px; align-items:center; transition:color .15s}
.qa button:hover{color:var(--accent)}
.qa button .pm{flex:none; width:26px; height:26px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--accent); transition:transform .25s, background .25s}
.qa[aria-expanded="true"] .pm{transform:rotate(45deg); background:var(--accent-soft)}
.qa .ans{max-height:0; overflow:hidden; transition:max-height .3s ease; color:var(--muted)}
.qa .ans p{padding:0 40px 24px 0}

/* CTA band — aurora mesh + grain di atas gradient utama */
.cta-band{position:relative; isolation:isolate; overflow:hidden; background:var(--grad); color:#fff; border-radius:var(--r-xl); padding:64px; text-align:center; box-shadow:var(--shadow-glow)}
.cta-band::before{content:""; position:absolute; inset:-40% -10% auto auto; width:380px; height:380px; border-radius:50%; background:rgba(255,255,255,.10)}
.cta-band::after{content:""; position:absolute; inset:auto auto -35% -10%; width:320px; height:320px; border-radius:50%; background:rgba(255,255,255,.08); filter:blur(6px)}
.cta-band h2{font-size:clamp(2rem,4vw,3.1rem); position:relative; color:#fff}
.cta-band p{opacity:.92; margin:16px auto 0; max-width:52ch; position:relative}
.cta-band .btn{margin-top:30px; background:#fff; color:var(--accent-ink); position:relative; box-shadow:0 20px 40px -16px rgba(0,0,0,.35)}

/* Contact + Map */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:44px 0 40px; align-items:stretch}
.contact-card{position:relative; isolation:isolate; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px; box-shadow:var(--shadow)}
.contact-card::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:0; pointer-events:none; transition:opacity .35s ease; background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--accent) 12%, transparent), transparent 72%)}
.contact-card:hover::before{opacity:1}
.contact-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:22px}
.contact-list li{display:flex; gap:15px; align-items:flex-start}
.contact-list .ic{width:42px; height:42px; flex:none; border-radius:11px; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center}
.contact-list .k{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:3px}
.contact-list .v{font-size:1.02rem; color:var(--ink); line-height:1.4}
.contact-list a.v:hover{color:var(--accent)}
.contact-card .btn{margin-top:28px; width:100%; justify-content:center}
.contact-map{position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); min-height:360px; background:var(--paper-2)}
.map-fallback{position:absolute; inset:0; z-index:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:24px; color:var(--muted)}
.map-fallback a{color:var(--accent); font-weight:600}
.contact-map iframe{position:relative; z-index:1; width:100%; height:100%; min-height:360px; border:0; display:block; filter:grayscale(.15)}
@media(max-width:800px){ .contact-grid{grid-template-columns:1fr} .contact-map{min-height:300px} .contact-map iframe{min-height:300px} }

/* Footer */
footer{border-top:1px solid var(--line); padding:64px 0 40px; background:var(--paper-2)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px}
footer .brand{margin-bottom:14px}
footer p{color:var(--muted); font-size:.95rem}
.foot-h{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.foot-links{display:flex; flex-direction:column; gap:10px}
.foot-links a{color:var(--ink); font-size:.95rem}
.foot-links a:hover{color:var(--accent)}
.foot-bottom{margin-top:48px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}

/* Reveal (progressive, motion-safe) */
body.armed .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
body.armed .reveal.vis{opacity:1; transform:none}

@media(max-width:960px){
  .hero-grid,.split{grid-template-columns:1fr; gap:40px}
  .grid3,.prices{grid-template-columns:1fr 1fr}
  .svc.big{grid-column:span 2}
  .feat-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .tgrid{grid-template-columns:1fr}
}
@media(max-width:600px){
  body{font-size:16px}
  .section{padding:56px 0}
  .grid3,.prices,.feat-grid,.steps{grid-template-columns:1fr}
  .cta-band{padding:44px 24px}
  .foot-grid{grid-template-columns:1fr; gap:28px}
  .trust{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
  .trust .n{font-size:1.05rem}
  .trust .l{font-size:9.5px; letter-spacing:.05em}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  body.armed .reveal{opacity:1; transform:none}
}