/* ==========================================================================
   SipilStock — Design System
   Concept: Supabase-inspired dark-first UI. Near-black surfaces, hairline
   borders instead of shadows, single accent color rationed for CTAs/links,
   generous corner radius. Accent hue: orange (Supabase's green, re-hued).
   Type: Plus Jakarta Sans (display / body / data, unified)
   ========================================================================== */

:root{
  --bg:#171717;
  --bg-elevated:#1E1E1E;
  --bg-sunken:#121212;
  --ink:#FAFAFA;
  --ink-soft:#B4B4B4;
  --ink-faint:#8A8A8A;
  --line:#2E2E2E;
  --line-strong:#3A3A3A;
  --grid-line:rgba(250,250,250,0.035);
  --accent:#FF7A33;
  --accent-hover:#FF9052;
  --accent-ink:#171717;
  --accent-soft:rgba(255,122,51,0.14);
  --blueprint:#FF7A33;
  --blueprint-soft:rgba(255,122,51,0.12);
  --success:#8FBF7A;
  --shadow:0 1px 0 rgba(0,0,0,0.3);
  --shadow-lift:0 20px 50px rgba(0,0,0,0.5);
  --radius-sm:8px;
  --radius-md:12px;
  --radius-pill:999px;
  --nav-hover:rgba(255,255,255,0.06);
  --nav-active:rgba(255,255,255,0.10);
  --nav-active-ink:#FFFFFF;
  --font-display:'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-body:'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  color-scheme: dark;
}

[data-theme="light"]{
  --bg:#FFFFFF;
  --bg-elevated:#F7F7F7;
  --bg-sunken:#F0F0F0;
  --ink:#1F1F1F;
  --ink-soft:#5F5F5F;
  --ink-faint:#8A8A8A;
  --line:#E4E4E4;
  --line-strong:#D2D2D2;
  --grid-line:rgba(31,31,31,0.04);
  --accent:#E1580C;
  --accent-hover:#C64A08;
  --accent-ink:#FFFFFF;
  --accent-soft:rgba(225,88,12,0.10);
  --blueprint:#E1580C;
  --blueprint-soft:rgba(225,88,12,0.10);
  --success:#4B6A3A;
  --shadow:0 1px 0 rgba(0,0,0,0.05);
  --shadow-lift:0 12px 32px rgba(0,0,0,0.08);
  --nav-hover:rgba(31,31,31,0.05);
  --nav-active:rgba(31,31,31,0.08);
  --nav-active-ink:#1F1F1F;
  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease, padding-top .2s ease;
  padding-top:var(--header-h, 63px);
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; font-weight:600; letter-spacing:-0.01em; }
p{ margin:0; }
button{ font-family:inherit; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- grid paper texture ---------- */
.grid-bg{
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:28px 28px;
}

/* ---------- eyebrow / sheet label ---------- */
.sheet-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--blueprint);
}
.sheet-label::before{
  content:"";
  width:16px;
  height:1px;
  background:var(--blueprint);
}

/* ---------- header ---------- */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px) saturate(1.1);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:62px;
  gap:20px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:19px;
  color:var(--ink);
  flex-shrink:0;
}
.brand .mark{
  width:28px;
  height:28px;
  flex-shrink:0;
}
.brand .mark svg, .brand .mark img{ width:100%; height:100%; display:block; object-fit:contain; }
.brand small{
  font-family:var(--font-mono);
  font-weight:400;
  font-size:10px;
  color:var(--ink-faint);
  letter-spacing:0.06em;
  display:block;
  margin-top:1px;
}

.main-nav{
  display:flex;
  align-items:center;
  gap:6px;
}
.main-nav a{
  padding:8px 14px;
  border-radius:var(--radius-sm);
  font-size:14.5px;
  color:var(--ink-soft);
  transition:color .15s ease, background .15s ease;
  white-space:nowrap;
}
.main-nav a:hover{ color:var(--ink); background:var(--bg-sunken); }
.main-nav a.active{ color:var(--accent); }

.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.theme-toggle{
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--bg-elevated);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
}
.theme-toggle:hover{ border-color:var(--line-strong); }
.account-actions{ display:flex; align-items:center; gap:8px; }
.theme-toggle svg{ width:17px; height:17px; }
.theme-toggle .icon-moon{ display:none; }
[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
[data-theme="dark"] .theme-toggle .icon-moon{ display:block; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 18px;
  border-radius:var(--radius-sm);
  font-size:14.5px;
  font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:var(--accent-ink); border-radius:var(--radius-pill); font-weight:600; }
.btn-primary:hover{ background:var(--accent-hover); }
.btn-ghost{ background:transparent; color:var(--ink-soft); border-color:transparent; }
.btn-ghost:hover{ color:var(--ink); background:var(--bg-sunken); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-outline:hover{ border-color:var(--ink); }
.btn-sm{ padding:7px 13px; font-size:13px; }
.btn-block{ width:100%; }
.btn-google{ border-radius:var(--radius-pill); }
.btn-google img,
.btn-google svg{ width:18px; height:18px; flex-shrink:0; }

/* ---------- section scaffolding ---------- */
.section{ padding:96px 0; border-bottom:1px solid var(--line); }
.section:last-of-type{ border-bottom:none; }
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:44px;
  flex-wrap:wrap;
}
.section-title{
  font-size:clamp(26px,3.4vw,36px);
  margin-top:10px;
  max-width:640px;
}
.section-desc{
  color:var(--ink-soft);
  font-size:15.5px;
  max-width:460px;
  margin-top:10px;
}

/* ---------- hero: drawing sheet ---------- */
.hero{ padding:56px 0 40px; }
.sheet{
  position:relative;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-md);
  padding:56px 48px 40px;
  overflow:hidden;
}
.sheet .corner{
  position:absolute;
  width:18px;
  height:18px;
  pointer-events:none;
}
.sheet .corner::before,
.sheet .corner::after{
  content:"";
  position:absolute;
  background:var(--ink-faint);
}
.sheet .corner::before{ width:100%; height:1.5px; }
.sheet .corner::after{ width:1.5px; height:100%; }
.corner.tl{ top:10px; left:10px; }
.corner.tr{ top:10px; right:10px; }
.corner.bl{ bottom:10px; left:10px; }
.corner.br{ bottom:10px; right:10px; }
.corner.tl::before,.corner.tl::after{ top:0; left:0; }
.corner.tr::before{ top:0; right:0; }
.corner.tr::after{ top:0; right:0; }
.corner.bl::before{ bottom:0; left:0; }
.corner.bl::after{ bottom:0; left:0; }
.corner.br::before{ bottom:0; right:0; }
.corner.br::after{ bottom:0; right:0; }

.hero-inner{
  max-width:720px;
  position:relative;
  z-index:1;
}
.hero h1{
  font-size:clamp(34px,5.4vw,58px);
  line-height:1.05;
  margin-top:18px;
  color:var(--ink);
}
.hero h1 em{
  font-style:normal;
  color:var(--accent);
}
.hero p.lede{
  margin-top:20px;
  font-size:17.5px;
  color:var(--ink-soft);
  max-width:560px;
}
.hero-ctas{
  display:flex;
  gap:12px;
  margin-top:32px;
  flex-wrap:wrap;
}

.titleblock{
  position:absolute;
  right:24px;
  bottom:24px;
  border:1px solid var(--line-strong);
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--ink-soft);
  background:var(--bg-elevated);
  z-index:1;
}
.titleblock .row{
  display:flex;
  border-bottom:1px solid var(--line);
}
.titleblock .row:last-child{ border-bottom:none; }
.titleblock .row span{ padding:5px 10px; }
.titleblock .row span:first-child{
  border-right:1px solid var(--line);
  color:var(--ink-faint);
  min-width:78px;
}

/* dimension stat bar */
.stat-strip{
  margin-top:48px;
  display:flex;
  border-top:1px solid var(--line-strong);
  position:relative;
}
.stat-strip::before{
  content:"";
  position:absolute;
  top:-1px; left:0;
  width:6px; height:6px;
  border-left:1px solid var(--line-strong);
  border-top:1px solid var(--line-strong);
}
.stat{
  flex:1;
  padding:16px 20px 0;
  border-right:1px solid var(--line);
  position:relative;
}
.stat:last-child{ border-right:none; }
.stat::before{
  content:"";
  position:absolute;
  top:-1px; left:0;
  width:1px; height:6px;
  background:var(--line-strong);
}
.stat .num{
  font-family:var(--font-mono);
  font-size:26px;
  font-weight:600;
  color:var(--ink);
}
.stat .lbl{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-top:4px;
}

/* calc widget */
.calc{
  margin-top:56px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-md);
  background:var(--bg-elevated);
  overflow:hidden;
}
.calc-tabs{
  display:flex;
  border-bottom:1px solid var(--line);
  overflow-x:auto;
}
.calc-tab{
  padding:13px 18px;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--ink-faint);
  border-right:1px solid var(--line);
  cursor:pointer;
  white-space:nowrap;
  background:transparent;
  border-top:none;border-left:none;border-bottom:none;
}
.calc-tab.is-active{ color:var(--accent); background:var(--accent-soft); }
.calc-body{ padding:22px 24px; display:none; }
.calc-body.is-active{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.calc-field{ margin-bottom:12px; }
.calc-field label{
  display:block;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--ink-faint);
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-bottom:5px;
}
.calc-field .val{
  font-family:var(--font-mono);
  font-size:15px;
  padding:9px 11px;
  background:var(--bg-sunken);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink);
}
.calc-result{
  border-left:1px dashed var(--line-strong);
  padding-left:24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.calc-result .r-lbl{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--ink-faint);
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.calc-result .r-val{
  font-family:var(--font-mono);
  font-size:34px;
  font-weight:600;
  color:var(--accent);
  margin-top:6px;
}
.calc-result .r-note{
  font-size:13px;
  color:var(--ink-soft);
  margin-top:8px;
}
@media (max-width:640px){
  .calc-body.is-active{ grid-template-columns:1fr; }
  .calc-result{ border-left:none; border-top:1px dashed var(--line-strong); padding-left:0; padding-top:18px; margin-top:6px; }
}

/* ---------- pricing ---------- */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:8px;
}
@media (max-width:900px){ .pricing-grid{ grid-template-columns:1fr; } }
.pricing-card{
  position:relative;
  background:var(--bg);
  padding:36px 30px 30px;
  display:flex;
  flex-direction:column;
  transition:background .15s ease;
}
.pricing-card:hover{ background:var(--bg-elevated); }
.pricing-card.is-featured{
  background:var(--bg-elevated);
  box-shadow:inset 0 0 0 2px var(--accent);
  z-index:1;
}
.pricing-badge{
  position:absolute;
  top:-1px; right:24px;
  background:var(--accent);
  color:var(--accent-ink);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.04em;
  padding:5px 10px;
  border-radius:0 0 8px 8px;
}
.pricing-name{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; color:var(--ink-faint); text-transform:uppercase; }
.pricing-title{ font-size:22px; margin-top:6px; }
.pricing-amount{ display:flex; align-items:baseline; gap:6px; margin-top:18px; }
.pricing-amount .num{ font-family:var(--font-display); font-size:36px; font-weight:600; color:var(--ink); }
.pricing-amount .period{ font-size:13.5px; color:var(--ink-soft); }
.pricing-desc{ font-size:13.5px; color:var(--ink-soft); margin-top:10px; min-height:40px; }
.pricing-cta{ margin-top:22px; }
.pricing-features{ list-style:none; margin-top:26px; padding-top:22px; border-top:1px dashed var(--line-strong); display:flex; flex-direction:column; gap:12px; flex-grow:1; }
.pricing-features li{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--ink-soft); }
.pricing-features li svg{ width:16px; height:16px; flex-shrink:0; margin-top:2px; color:var(--accent); }
.pricing-features li.is-off{ color:var(--ink-faint); }
.pricing-features li.is-off svg{ color:var(--ink-faint); }
.pricing-faq{ max-width:720px; }
.pricing-faq details{ border-bottom:1px solid var(--line); padding:18px 0; }
.pricing-faq summary{ cursor:pointer; font-family:var(--font-display); font-size:15.5px; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.pricing-faq summary::-webkit-details-marker{ display:none; }
.pricing-faq summary::after{ content:'+'; font-size:20px; color:var(--ink-faint); }
.pricing-faq details[open] summary::after{ content:'–'; }
.pricing-faq p{ margin-top:12px; font-size:14px; color:var(--ink-soft); line-height:1.6; }

/* ---------- feature / product grid ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.card{
  background:var(--bg);
  padding:30px 28px;
  transition:background .15s ease;
}
.card:hover{ background:var(--bg-elevated); }
.card .icon{
  width:34px; height:34px;
  color:var(--blueprint);
  margin-bottom:18px;
}
.card .icon svg{ width:100%; height:100%; }
.card h3{ font-size:18px; margin-bottom:8px; }
.card p{ font-size:14.5px; color:var(--ink-soft); }
.card .tag{
  display:inline-block;
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--ink-faint);
  letter-spacing:0.03em;
}

@media (max-width:900px){
  .grid-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .grid-3, .grid-2{ grid-template-columns:1fr; }
}

/* ---------- ecosystem cards (card-row, ala openclaw) ---------- */
.eco-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:8px;
}
.eco-card{
  display:flex;
  flex-direction:column;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px 20px;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.eco-card:hover{
  border-color:var(--accent);
  background:var(--bg-elevated);
  transform:translateY(-2px);
}
.eco-card .eco-icon{
  width:40px; height:40px;
  border-radius:10px;
  background:var(--accent-soft);
  color:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
  flex-shrink:0;
}
.eco-card .eco-icon svg{ width:20px; height:20px; }
.eco-card h3{ font-size:16.5px; margin-bottom:8px; }
.eco-card p{ font-size:13.5px; color:var(--ink-soft); flex-grow:1; }
.eco-card .eco-btn{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  margin-top:16px;
  padding:6px 14px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--ink-soft);
  transition:border-color .15s ease, color .15s ease;
}
.eco-card:hover .eco-btn{
  border-color:var(--accent);
  color:var(--accent);
}

@media (max-width:900px){
  .eco-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .eco-grid{ grid-template-columns:1fr; }
}

/* ---------- ecosystem hub diagram ---------- */
.hub-diagram{ width:100%; height:auto; margin-top:8px; }
.hub-diagram text{ font-family:inherit; }
.hub-diagram .hub-line{ stroke:var(--line-strong); stroke-width:1.5; }
.hub-diagram .hub-box{ fill:var(--bg); stroke:var(--line-strong); stroke-width:1; transition:fill .15s ease; }
.hub-diagram .hub-node:hover .hub-box{ fill:var(--bg-elevated); }
.hub-diagram .hub-node{ cursor:pointer; }
.hub-diagram .hub-title{ fill:var(--ink); font-size:16px; font-weight:600; }
.hub-diagram .hub-sub{ fill:var(--ink-soft); font-size:12.5px; }
.hub-diagram .hub-center-circle{ fill:var(--accent-soft); stroke:var(--accent); stroke-width:1.5; }
.hub-diagram .hub-center-title{ fill:var(--accent); font-size:19px; font-weight:700; }
.hub-diagram .hub-center-sub{ fill:var(--ink-soft); font-size:12.5px; }

@media (max-width:640px){
  .hub-diagram .hub-title{ font-size:14px; }
  .hub-diagram .hub-sub{ font-size:11px; }
}
.badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.badge{
  font-family:var(--font-mono);
  font-size:13px;
  padding:9px 16px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  color:var(--ink-soft);
  background:var(--bg-elevated);
}

/* ---------- blog cards ---------- */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
@media (max-width:900px){ .blog-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .blog-grid{ grid-template-columns:1fr; } }

.post-card{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:border-color .15s ease, transform .15s ease;
  background:var(--bg-elevated);
}
.post-card:hover{ border-color:var(--line-strong); transform:translateY(-2px); }
.post-meta{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--ink-faint);
  text-transform:uppercase;
  letter-spacing:0.04em;
  display:flex;
  gap:10px;
  align-items:center;
}
.post-card h3{ font-size:18px; line-height:1.35; }
.post-card p{ font-size:14px; color:var(--ink-soft); flex-grow:1; }
.post-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  font-family:var(--font-mono);
  font-size:10.5px;
  padding:3px 9px;
  border-radius:20px;
  background:var(--blueprint-soft);
  color:var(--blueprint);
}
.read-more{ font-size:13.5px; font-weight:600; color:var(--accent); display:inline-flex; align-items:center; gap:6px; }

/* ---------- store ---------- */
.store-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
@media (max-width:900px){ .store-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .store-grid{ grid-template-columns:1fr; } }
.product-card{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--bg-elevated);
  display:flex;
  flex-direction:column;
}
.product-thumb{
  height:140px;
  background:var(--bg-sunken);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid var(--line);
}
.product-thumb .grid-bg{ position:absolute; inset:0; }
.product-thumb svg{ width:46px; height:46px; color:var(--blueprint); position:relative; z-index:1; }
.product-format{
  position:absolute;
  top:10px; left:10px;
  font-family:var(--font-mono);
  font-size:10px;
  background:var(--bg-elevated);
  border:1px solid var(--line-strong);
  padding:2px 7px;
  border-radius:20px;
  z-index:1;
}
.product-body{ padding:20px; display:flex; flex-direction:column; gap:10px; flex-grow:1; }
.product-body h3{ font-size:15.5px; line-height:1.35; }
.product-body p{ font-size:13px; color:var(--ink-soft); flex-grow:1; }
.product-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:6px;
}
.price{ font-family:var(--font-mono); font-weight:600; font-size:15px; color:var(--ink); }
.price .old{ text-decoration:line-through; color:var(--ink-faint); font-weight:400; font-size:12px; margin-right:6px; }

/* ---------- testimonial / quote strip ---------- */
.quote-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.quote{
  background:var(--bg);
  padding:26px 24px;
  font-size:14px;
  color:var(--ink-soft);
}
.quote .stars{ color:var(--accent); font-family:var(--font-mono); font-size:13px; margin-bottom:10px; letter-spacing:2px; }
.quote cite{
  display:block;
  margin-top:14px;
  font-style:normal;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink-faint);
}
@media (max-width:900px){ .quote-strip{ grid-template-columns:1fr; } }

/* ---------- newsletter / cta ---------- */
.cta-band{
  border:1px solid var(--line-strong);
  border-radius:var(--radius-md);
  padding:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}
.cta-band h3{ font-size:24px; max-width:420px; }
.cta-band p{ color:var(--ink-soft); margin-top:8px; font-size:14.5px; }
.subscribe-form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.subscribe-form input[type="email"]{
  padding:11px 14px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:var(--bg-elevated);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:13.5px;
  min-width:240px;
}
.subscribe-form input[type="email"]::placeholder{ color:var(--ink-faint); }

/* ---------- footer ---------- */
.site-footer{
  background:var(--bg-sunken);
  padding:64px 0 28px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr repeat(4,1fr);
  gap:32px;
  padding-bottom:40px;
  border-bottom:1px solid var(--line);
}
.footer-col h4{
  font-family:var(--font-mono);
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--ink-faint);
  margin-bottom:16px;
}
.footer-col li{ margin-bottom:10px; }
.footer-col a{ font-size:14px; color:var(--ink-soft); }
.footer-col a:hover{ color:var(--accent); }
.footer-brand p{ color:var(--ink-soft); font-size:13.5px; margin-top:12px; max-width:260px; }
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:24px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink-faint);
  flex-wrap:wrap;
  gap:12px;
}
.social-row{ display:flex; gap:14px; }
.social-row a{ color:var(--ink-faint); }
.social-row a:hover{ color:var(--accent); }
@media (max-width:900px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* ---------- mobile nav (menu pindah ke baris bawah header) ---------- */
@media (max-width:860px){
  body{ padding-top:var(--header-h, 132px); }
  .site-header .wrap{
    flex-wrap:wrap;
    height:auto;
    row-gap:10px;
    column-gap:10px;
    padding-top:12px;
    padding-bottom:12px;
    transition:row-gap .25s ease;
  }
  .main-nav{
    order:3;
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
    gap:4px;
    padding-top:10px;
    border-top:1px solid var(--line);
    max-height:80px;
    opacity:1;
    overflow:hidden;
    transition:max-height .25s ease, opacity .2s ease, padding-top .25s ease, border-color .25s ease;
  }
  .site-header.nav-collapsed .wrap{ row-gap:0; }
  .site-header.nav-collapsed .main-nav{
    max-height:0;
    opacity:0;
    padding-top:0;
    border-top-color:transparent;
  }
}

/* di layar sangat sempit, tombol Masuk/Daftar diperkecil lagi biar tetap satu baris dengan brand */
@media (max-width:480px){
  .header-actions{ gap:8px; }
  .header-actions .btn-primary{
    padding:6px 10px;
    font-size:12px;
  }
}

/* ---------- generic page hero (subpages) ---------- */
.page-hero{
  padding:64px 0 48px;
  border-bottom:1px solid var(--line);
}
.page-hero .sheet-label{ margin-bottom:14px; }
.page-hero h1{ font-size:clamp(30px,4.4vw,44px); }
.page-hero p.lede{ margin-top:16px; font-size:16.5px; color:var(--ink-soft); max-width:560px; }

/* ---------- auth pages ---------- */
body.auth-body{ padding-top:0; }
.auth-topbar{
  position:fixed;
  top:20px;
  right:20px;
  z-index:60;
}
body.auth-body .auth-wrap{ min-height:100vh; }

.auth-wrap{
  min-height:calc(100vh - 68px - 260px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:64px 24px;
}
.auth-card{
  width:100%;
  max-width:420px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-md);
  padding:36px 32px;
  background:var(--bg-elevated);
  position:relative;
}
.auth-tabs{
  display:flex;
  gap:4px;
  padding:4px;
  margin-bottom:24px;
  background:var(--bg-sunken);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
}
.auth-tab{
  flex:1;
  padding:9px 12px;
  border:none;
  background:transparent;
  border-radius:6px;
  font-family:var(--font-mono);
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--ink-soft);
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.auth-tab:hover{ color:var(--ink); }
.auth-tab.is-active{
  background:var(--bg-elevated);
  color:var(--ink);
  box-shadow:var(--shadow);
}
.auth-panel{ display:none; }
.auth-panel.is-active{ display:block; }
.auth-card .sheet-label{ margin-bottom:6px; }
.auth-card h1{ font-size:26px; margin-top:8px; }
.auth-card p.lede{ color:var(--ink-soft); font-size:14px; margin-top:8px; }
.field{ margin-top:20px; }
/* Honeypot anti-bot: disembunyikan dari manusia (visual & screen reader),
   tapi tetap ada di DOM supaya bot form-filler generik mengisinya. */
.hp-field{
  position:absolute;
  left:-9999px;
  top:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.field label{
  display:block;
  font-family:var(--font-mono);
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--ink-faint);
  margin-bottom:7px;
}
.field input{
  width:100%;
  padding:11px 13px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:14.5px;
}
.field input:focus{ border-color:var(--blueprint); }
.field-row{ display:flex; align-items:center; justify-content:space-between; margin-top:18px; font-size:13px; }
.field-row a{ color:var(--blueprint); }
.check-row{ display:flex; align-items:center; gap:8px; color:var(--ink-soft); }
.auth-submit{ margin-top:24px; }
.auth-msg{
  margin:14px 0 0;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  font-size:13px;
  line-height:1.5;
}
.auth-msg.is-error{ background:color-mix(in srgb, #e5484d 15%, transparent); color:#e5484d; }
.auth-msg.is-ok{ background:color-mix(in srgb, #30a46c 15%, transparent); color:#30a46c; }
.auth-note{
  margin-top:20px;
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--ink-faint);
  background:var(--bg-sunken);
  border:1px dashed var(--line-strong);
  padding:10px 12px;
  border-radius:var(--radius-sm);
}

/* ---------- account dashboard ---------- */
.account-card{
  max-width:520px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--bg-elevated);
}
.account-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}
.account-row:last-of-type{ border-bottom:none; }
.tier-badge{
  display:inline-block;
  padding:4px 12px;
  border-radius:20px;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.tier-badge.free{ background:var(--bg-sunken); color:var(--ink-soft); }
.tier-badge.six{ background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent); }
.tier-badge.lifetime{ background:color-mix(in srgb, #f5a623 20%, transparent); color:#f5a623; }

.oauth-row{ display:flex; gap:10px; margin-top:20px; }

/* ---------- dashboard shell (dashboard.html) ---------- */
:root{ --dash-header-h:48px; --dash-sidebar-w:200px; --dash-sidebar-w-collapsed:48px; }

html.dash-lock, body.dash-body{ height:100%; }
/* body{padding-top:var(--header-h,63px)} di atas dibuat untuk site-header fixed
   di halaman utama. dashboard.html tidak memakai header itu, jadi --header-h
   tidak pernah di-set dan browser jatuh ke nilai fallback (63px / 132px di
   layar sempit) — muncul sebagai gap kosong di atas dash-header. Reset di sini
   (berlaku juga di breakpoint mobile karena .dash-body lebih spesifik). */
body.dash-body{ overflow:hidden; padding-top:0; }

.dash-shell{ display:flex; flex-direction:column; height:100vh; }

.dash-header{
  height:var(--dash-header-h);
  min-height:var(--dash-header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 14px;
  background:var(--bg-elevated);
  border-bottom:1px solid var(--line);
  z-index:30;
}
.dash-header-left, .dash-header-right{ display:flex; align-items:center; gap:6px; }
.dash-header-right{ gap:12px; }

.dash-icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px;
  border-radius:var(--radius-sm);
  color:var(--ink-soft);
  background:transparent;
  border:1px solid transparent;
  cursor:pointer;
}
.dash-icon-btn:hover{ background:var(--bg-sunken); color:var(--ink); }
.dash-icon-btn svg{ width:17px; height:17px; }
.dash-burger{ display:none; }

.dash-brand{ display:flex; align-items:center; gap:8px; text-decoration:none; margin-left:2px; }
.dash-brand img{ display:block; border-radius:6px; }
.dash-brand-name{
  font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--ink);
  letter-spacing:-0.01em;
}

.dash-user{ display:flex; align-items:center; gap:10px; }
.dash-user-name{
  font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft);
  max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dash-logout{
  font-family:var(--font-body); font-size:13px; font-weight:500;
  color:var(--ink-soft); background:transparent; border:1px solid var(--line-strong);
  border-radius:var(--radius-sm); padding:6px 12px; cursor:pointer;
}
.dash-logout:hover{ color:var(--ink); border-color:var(--ink-soft); }

.dash-body-row{ flex:1; display:flex; min-height:0; position:relative; }

.dash-sidebar{
  width:var(--dash-sidebar-w);
  flex-shrink:0;
  background:var(--bg-sunken);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:width 0.18s ease;
  overflow:hidden;
  z-index:25;
}
.dash-shell.is-collapsed .dash-sidebar{ width:var(--dash-sidebar-w-collapsed); }

.dash-nav{ padding:8px; display:flex; flex-direction:column; gap:2px; }
.dash-nav-item{
  display:flex; align-items:center; gap:10px;
  padding:0 10px 0 4px;
  height:32px;
  border-radius:8px;
  color:var(--ink-soft);
  text-decoration:none;
  font-size:13.5px;
  font-weight:500;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.dash-nav-item:hover{ background:var(--nav-hover); color:var(--ink); }
.dash-nav-item.is-active{ background:var(--nav-active); color:var(--nav-active-ink); font-weight:600; }
.dash-nav-item .dash-icon{ display:flex; align-items:center; justify-content:center; flex-shrink:0; width:24px; height:24px; }
.dash-nav-item .dash-icon svg{ width:24px; height:24px; display:block; }
/* Collapsed state rules moved to desktop media query */

.dash-overlay{
  display:none;
  position:fixed; inset:var(--dash-header-h) 0 0 0;
  background:rgba(10,14,12,0.45);
  z-index:20;
}

.dash-main{
  flex:1; min-width:0;
  overflow-y:auto;
  background:var(--bg);
  padding:32px 36px 60px;
}
.dash-view{ display:none; max-width:720px; }
.dash-view.is-active{ display:block; }

.dash-view h1{ font-size:24px; margin-bottom:6px; }
.dash-view .dash-lede{ color:var(--ink-soft); margin-bottom:28px; }

.dash-home-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:24px; }
.dash-home-card{
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--bg-elevated);
}
.dash-home-card span{ display:block; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:8px; }
.dash-home-card strong{ font-family:var(--font-display); font-size:19px; }

/* ---------- sidebar rail: overlay expand tanpa menggeser dash-main ----------
   Di desktop, .dash-sidebar SELALU dikeluarkan dari flex-flow (position:
   absolute) — baik dalam mode rail 48px maupun expanded 200px — supaya
   lebarnya sendiri tidak pernah ikut memengaruhi lebar/posisi .dash-main.
   Ruang untuk .dash-main dikompensasi lewat margin-left TETAP sebesar lebar
   rail, konstan dalam semua kondisi (default, hover, maupun setelah tombol
   expand di header diklik). Sidebar yang melebar (hover ATAU tombol expand)
   selalu tampil sebagai overlay di atas .dash-main dengan shadow, sehingga
   konten tengah tidak pernah bergeser. Dibatasi ke desktop (min-width:861px)
   supaya tidak bentrok dengan drawer mobile yang pakai position:fixed +
   translateX di bawah. */
@media (min-width:861px){
  .dash-sidebar{
    position:absolute;
    top:0; left:0; bottom:0;
  }
  .dash-main{
    margin-left:var(--dash-sidebar-w-collapsed);
  }
  /* Collapsed state (rail): only when NOT hovered */
  .dash-shell.is-collapsed .dash-sidebar:not(:hover) .dash-label{ display:none; }
  .dash-shell.is-collapsed .dash-sidebar:not(:hover) .dash-nav-item{
    padding:0 0 0 4px;
    height:32px;
  }
  /* Expand sidebar saat hover di mode collapsed, atau saat tidak collapsed */
  .dash-shell.is-collapsed .dash-sidebar:hover,
  .dash-shell:not(.is-collapsed) .dash-sidebar{
    width:var(--dash-sidebar-w);
    overflow:visible;
    box-shadow:4px 0 28px rgba(0,0,0,0.28);
  }
}

@media (max-width: 860px){
  .dash-burger{ display:flex; }
  .dash-collapse-btn{ display:none; }
  .dash-sidebar{
    position:fixed; top:var(--dash-header-h); bottom:0; left:0;
    transform:translateX(-100%);
    transition:transform 0.2s ease;
    width:230px;
  }
  .dash-shell.is-mobile-open .dash-sidebar{ transform:translateX(0); }
  .dash-shell.is-mobile-open .dash-overlay{ display:block; }
  .dash-shell.is-collapsed .dash-sidebar{ width:230px; }
  .dash-shell.is-collapsed .dash-label{ display:inline; }
  .dash-main{ padding:24px 20px 48px; }
  .dash-user-name{ display:none; }
}

/* ---------- store/blog listing filter bar ---------- */
.filter-bar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:36px;
}
.filter-chip{
  font-family:var(--font-mono);
  font-size:12.5px;
  padding:8px 14px;
  border:1px solid var(--line-strong);
  border-radius:20px;
  color:var(--ink-soft);
  cursor:pointer;
}
.filter-chip.is-active{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }

/* ---------- ecosystem page ---------- */