:root{
  --paper: #efe9da;
  --paper-light: #faf6ec;
  --ink: #221d16;
  --ink-soft: #5a5340;
  --rule: #cfc3a3;
  --green: #2f5233;
  --green-dim: #f0f4ef;
  --red: #9c3a2b;
  --red-dim: #f7ece9;
  --serif: 'Fraunces', Georgia, serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--mono);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:1040px; margin:0 auto; padding:0 24px;}
.wrap-narrow{max-width:720px;}

a{color:var(--ink);}
h1,h2,h3{font-family:var(--serif); font-weight:500; margin:0 0 .5em; color:var(--ink); letter-spacing:-0.01em;}

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper-light);
  padding:10px 16px; z-index:100;
}
.skip-link:focus{left:12px; top:12px;}

a:focus-visible, button:focus-visible{
  outline:2px solid var(--red); outline-offset:3px;
}

/* Header */
.site-head{
  position:sticky; top:0; z-index:20;
  background:var(--paper); border-bottom:1px solid var(--rule);
}
.head-row{display:flex; align-items:center; justify-content:space-between; height:64px;}
.mark{font-family:var(--serif); font-size:17px; text-decoration:none; color:var(--ink); font-weight:500;}
.mark span{color:var(--ink-soft); font-weight:400;}
.head-nav{display:flex; gap:28px; align-items:center; font-size:14px;}
.head-nav a{text-decoration:none; color:var(--ink-soft); border-bottom:1px solid transparent;}
.head-nav a:hover{color:var(--ink); border-bottom-color:var(--rule);}
.head-cta{color:var(--ink) !important; font-weight:600;}

/* Hero */
.hero{padding:72px 0 56px;}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center;}
.kicker{margin:0 0 14px; font-size:13px; color:var(--ink-soft); letter-spacing:.02em;}
h1{font-size:clamp(32px, 4.4vw, 50px); line-height:1.12; max-width:14ch;}
.lede{font-size:16px; color:var(--ink-soft); max-width:46ch; margin:0 0 28px;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap;}

.btn{
  display:inline-block; font-family:var(--mono); font-size:14px; font-weight:600;
  padding:12px 20px; text-decoration:none; border-radius:2px; transition:transform .15s ease, background .15s ease;
}
.btn-ink{background:var(--ink); color:var(--paper-light);}
.btn-ink:hover{background:#3a3324;}
.btn-line{background:transparent; color:var(--ink); border:1px solid var(--ink);}
.btn-line:hover{background:var(--ink); color:var(--paper-light);}

/* Receipt visual */
.hero-receipt{display:flex; justify-content:center;}
.receipt{
  background:var(--paper-light); width:100%; max-width:300px;
  padding:26px 22px 22px; color:var(--ink);
  box-shadow:0 18px 40px -18px rgba(34,29,22,.35);
  clip-path:polygon(
    0 0, 100% 0, 100% 96%,
    92% 100%, 84% 96%, 76% 100%, 68% 96%, 60% 100%, 52% 96%,
    44% 100%, 36% 96%, 28% 100%, 20% 96%, 12% 100%, 4% 96%, 0 100%
  );
  animation:feed-in .6s ease-out;
}
@keyframes feed-in{
  from{opacity:0; transform:translateY(-18px);}
  to{opacity:1; transform:translateY(0);}
}
.receipt-top{font-size:12px; font-weight:600; text-align:center; letter-spacing:.03em;}
.receipt-rule{border-top:1px dotted var(--rule); margin:14px 0;}
.receipt-rule.dashed{border-top-style:dashed;}
.receipt-line{display:flex; justify-content:space-between; font-size:12.5px; margin:8px 0; color:var(--ink-soft); gap:12px;}
.receipt-line span:first-child{color:var(--ink);}
.receipt-total{display:flex; justify-content:space-between; font-size:14px; font-weight:600; margin:10px 0 16px;}
.receipt-barcode{color:var(--ink); opacity:.75; height:26px;}
.receipt-barcode svg{width:100%; height:100%;}

/* Sections */
.section{padding:76px 0;}
.section-alt{background:var(--paper-light);}
.section h2{font-size:clamp(24px,2.8vw,32px);}
.section-lede{color:var(--ink-soft); font-size:15px; max-width:52ch; margin:0 0 40px;}

/* Doc cards */
.doc-card{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  background:var(--paper-light); border:1px solid var(--rule);
}
.doc-surat{grid-template-columns:1fr 1fr;}
.doc-surat .doc-card-mock{order:1;}
.doc-surat .doc-card-body{order:2;}
.doc-card-body{padding:40px; display:flex; flex-direction:column; justify-content:center;}
.doc-eyebrow{font-size:13px; font-weight:600; margin:0 0 10px;}
.doc-card-body h3{font-size:26px;}
.doc-card-body p{color:var(--ink-soft); font-size:14.5px; margin:0 0 22px;}

.spec-list{display:flex; flex-direction:column; gap:10px; margin:0 0 24px; padding:16px 0; border-top:1px dotted var(--rule); border-bottom:1px dotted var(--rule);}
.spec-list div{display:flex; justify-content:space-between; gap:16px; font-size:13px;}
.spec-list dt{color:var(--ink-soft); margin:0;}
.spec-list dd{margin:0; text-align:right;}

.badge{
  display:inline-block; align-self:flex-start; font-size:12.5px; font-weight:600;
  padding:6px 12px; border:1px solid var(--red); color:var(--red); border-radius:2px;
}

/* POS mock */
.doc-card-mock{display:flex; align-items:center; justify-content:center; padding:32px; background:var(--green-dim);}
.doc-surat .doc-card-mock{background:var(--red-dim);}
.pos-mock{
  background:var(--paper-light); width:100%; max-width:260px; padding:20px;
  border:1px solid var(--rule); font-size:12.5px;
}
.pos-mock-head{font-weight:600; margin-bottom:12px;}
.pos-mock-row{display:flex; justify-content:space-between; margin:6px 0; color:var(--ink-soft);}
.pos-mock-rule{border-top:1px dashed var(--rule); margin:10px 0;}
.pos-mock-row.total{color:var(--ink); font-weight:600;}
.pos-mock-stamp{
  margin-top:16px; text-align:center; font-weight:700; color:var(--green);
  border:2px solid var(--green); padding:6px; letter-spacing:.05em; transform:rotate(-3deg);
}

/* Surat mock */
.surat-mock{
  background:var(--paper-light); width:100%; max-width:260px; padding:20px;
  border:1px solid var(--rule); font-size:12px;
}
.surat-mock-head{font-weight:600; margin-bottom:14px; font-size:12.5px;}
.surat-mock-row{display:flex; justify-content:space-between; margin:8px 0; color:var(--ink-soft);}
.surat-mock-sign{display:flex; align-items:center; gap:14px; margin-top:18px; padding-top:14px; border-top:1px dashed var(--rule);}
.stamp{
  width:56px; height:56px; border-radius:50%; border:2px solid var(--red); color:var(--red);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:9.5px; font-weight:700; line-height:1.2; transform:rotate(-8deg); flex:none;
}
.surat-mock-ttd{color:var(--ink-soft); font-size:11px;}

/* Steps */
.steps{list-style:none; margin:0 0 64px; padding:0; display:flex; flex-direction:column; gap:28px;}
.steps li{display:grid; grid-template-columns:44px 1fr; gap:18px; align-items:start;}
.step-num{
  width:36px; height:36px; border:1px solid var(--ink); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:15px;
}
.steps h3{font-size:18px; margin-bottom:6px;}
.steps p{color:var(--ink-soft); font-size:14.5px; margin:0; max-width:56ch;}

.about-block{border-top:1px solid var(--rule); padding-top:48px;}
.about-block p{color:var(--ink-soft); font-size:15px; max-width:66ch;}

/* Kontak */
.kontak-list{max-width:360px; border:none; padding:0; margin:28px 0;}
.kontak-list a{text-decoration:underline; text-decoration-style:dotted;}

/* Footer */
.site-foot{border-top:1px solid var(--rule); padding:28px 0; background:var(--paper);}
.foot-row{display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-soft); flex-wrap:wrap; gap:8px;}

/* Responsive */
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr; gap:40px;}
  .doc-card, .doc-surat{grid-template-columns:1fr;}
  .doc-surat .doc-card-mock{order:0;}
  .doc-surat .doc-card-body{order:1;}
  .doc-card-mock{padding:28px 20px;}
  .head-nav{gap:16px; font-size:13px;}
}
@media (max-width:520px){
  .head-nav a:not(.head-cta){display:none;}
  .doc-card-body{padding:28px 22px;}
}