/* ============================================================
   skorika.com — css/page/about.css
   Gaya khas /about.html.
   Dulu ditulis di dalam <style> halaman; dipindah 13 Agu 2026
   ke posisi yang sama persis, jadi urutan cascade tidak bergeser.
   44 aturan.
   ============================================================ */

/* ============================================================
   skorika.com — css/page/about.css
   Gaya khas /about.html.
   Dulu ditulis di dalam <style> halaman; dipindah 13 Agu 2026
   ke posisi yang sama persis, jadi urutan cascade tidak bergeser.
   44 aturan.
   ============================================================ */
/* ============================================================
   PREVIEW — About Us.
   Susunan bagian mengikuti acuan wayground.com/home/about:
   hero misi > cerita > angka > apa yang dibangun > nilai > ajakan.
   Naskahnya TIDAK disalin dari acuan.

   VERSI RILIS. Seluruh isi halaman ini dapat diverifikasi: naskahnya
   diturunkan dari perilaku produk yang terbaca di kode, dan dua fakta
   perusahaan ("Indonesia", "Skorika — skorika.com") disalin dari
   terms.html Bagian 1 dan privacy.html Bagian 11.

   DUA SEKSI SENGAJA TIDAK ADA: "By the numbers" dan garis waktu
   "How we got here". Keduanya menuntut angka, tahun, dan cerita awal
   yang hanya Anda yang tahu, dan saya tidak mengarang fakta. Isi
   berkas ISIAN-ABOUT.txt dan keduanya akan saya pasang.
   Token warna/radius/font disalin dari public_html/index.html.
   ============================================================ */
*{box-sizing:border-box}
body{margin:0;background:var(--plum);color:var(--cream);
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.55;
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
.brand{display:inline-flex;align-items:center;gap:9px;
  font-weight:900;font-size:22px;letter-spacing:-.015em}
.wrap{width:100%;max-width:960px;margin:0 auto;padding:0 clamp(18px,5vw,28px)}
.top{background:var(--header);border-bottom:1px solid var(--line)}
.hero{padding:clamp(56px,9vw,100px) 0 clamp(30px,4vw,48px)}
.hero h1{font-size:clamp(40px,8vw,76px);font-weight:900;letter-spacing:-.03em;line-height:1.03}
.hero p{margin-top:22px;max-width:680px;font-size:clamp(17px,2.2vw,21px);color:var(--cream-dim)}
.hero .cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.sec{padding:clamp(34px,5vw,58px) 0}
.sec .sub{margin-top:16px;max-width:720px;font-size:17px;color:var(--cream-dim)}
.sec .sub + .sub{margin-top:14px}
.pill-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px;margin-top:32px}
.pill{background:var(--plum-3);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.pill h3{font-size:20px;font-weight:800;letter-spacing:-.015em;margin-bottom:9px}
.pill p{font-size:15px;color:var(--cream-dim)}
.values{margin-top:32px;border-top:1px solid var(--line)}
.value{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:26px 0;border-bottom:1px solid var(--line)}
@media(max-width:600px){
  .value{grid-template-columns:1fr;gap:8px}
}
.value .n{font-size:15px;font-weight:700;color:var(--peach);letter-spacing:.14em}
.value h3{font-size:22px;font-weight:800;letter-spacing:-.015em;margin-bottom:8px}
.value p{font-size:16px;color:var(--cream-dim);max-width:660px}
.ribbon-in{padding:clamp(40px,6vw,62px) 0;display:grid;gap:22px;
  grid-template-columns:1.35fr 1fr;align-items:start}
.ribbon h2{font-size:clamp(27px,4.2vw,38px);font-weight:900;letter-spacing:-.025em}
.foot{background:var(--header);border-top:1px solid var(--line)}
.foot-tag{margin-top:12px;font-size:15px;color:var(--cream-dim2);max-width:280px}
.foot-col{display:grid;gap:11px;font-size:15px;color:var(--cream-dim)}
.foot-base{margin-top:38px;padding:18px 0 30px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:14px;color:var(--cream-dim2)}