/* =====================================================
   JasaBacklink.id — Monochrome SEO Landing Page
   Token system:
   Color   : --ink #0A0A0A, --paper #FFFFFF, --line #1F1F1F,
             --grey-1 #6B6B6B, --grey-2 #B8B8B8, --grey-3 #F2F2F0
   Type    : Display = "Space Grotesk" (angular, technical — echoes
             link/node structure), Body = "Inter", Mono = "JetBrains Mono"
             (used for DA/PA numbers, URLs — the "data" register)
   Layout  : editorial grid, hairline rules, no border-radius on
             structural blocks, radius only on interactive chips
   Signature: the "link-chain" rule — a dashed horizontal line made of
             small diamond nodes, used to separate sections, echoing
             a chain of backlinks
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --ink:#0A0A0A;
  --paper:#FFFFFF;
  --line:#1F1F1F;
  --grey-1:#6B6B6B;
  --grey-2:#B8B8B8;
  --grey-3:#F2F2F0;
  --radius-chip:999px;
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  line-height:1.1;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
p{margin:0 0 1em;color:var(--grey-1);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.mono{font-family:'JetBrains Mono',monospace;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* Skip link for a11y */
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:999;}
.skip-link:focus{left:16px;top:16px;}

/* ===== Chain rule signature ===== */
.chain-rule{
  height:14px;
  background-image:repeating-linear-gradient(90deg, var(--grey-2) 0 2px, transparent 2px 22px);
  position:relative;
  margin:0;
}
.chain-rule::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(var(--ink) 2px, transparent 2.2px);
  background-size:22px 14px;
  background-position:0 center;
  opacity:.85;
}

/* ===== Header ===== */
header.site-header{
  border-bottom:1px solid var(--ink);
  position:sticky; top:0; background:var(--paper); z-index:50;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0;
}
.logo{display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px;}
.logo svg{flex-shrink:0;}
.nav-links{display:flex; gap:28px; align-items:center;}
.nav-links a{font-size:14px; font-weight:500; color:var(--ink); position:relative;}
.nav-links a:hover{color:var(--grey-1);}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ink); color:var(--paper);
  padding:12px 22px; font-weight:600; font-size:14px;
  border:1px solid var(--ink);
  transition:.15s ease;
}
.btn:hover{background:var(--paper); color:var(--ink);}
.btn-outline{background:transparent; color:var(--ink); border:1px solid var(--ink);}
.btn-outline:hover{background:var(--ink); color:var(--paper);}
.nav .btn{padding:10px 18px; font-size:13px;}

/* ===== Hero ===== */
.hero{padding:90px 0 60px; border-bottom:1px solid var(--ink);}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--ink); padding:6px 14px; border-radius:var(--radius-chip);
  margin-bottom:22px;
}
.eyebrow::before{content:"●"; font-size:8px;}
.hero h1{font-size:52px; max-width:620px;}
.hero .lede{font-size:18px; max-width:520px; margin-bottom:28px;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px;}
.hero-stats{display:flex; gap:34px; flex-wrap:wrap;}
.stat b{display:block; font-family:'Space Grotesk',sans-serif; font-size:30px;}
.stat span{font-size:12px; color:var(--grey-1); text-transform:uppercase; letter-spacing:.05em;}

.hero-panel{
  border:1px solid var(--ink); background:var(--grey-3); padding:26px;
}
.hero-panel .panel-title{font-family:'JetBrains Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--grey-1); margin-bottom:16px; display:flex; justify-content:space-between;}
.node-row{display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px dashed var(--grey-2); font-family:'JetBrains Mono',monospace; font-size:13px;}
.node-row:last-child{border-bottom:none;}
.node-domain{font-weight:700;}
.node-metrics{display:flex; gap:14px; color:var(--grey-1);}
.tag-tld{background:var(--ink); color:var(--paper); font-size:10px; padding:2px 8px; border-radius:var(--radius-chip);}

/* ===== Sections ===== */
section{padding:70px 0;}
.section-head{max-width:640px; margin-bottom:44px;}
.section-head .eyebrow{margin-bottom:16px;}
.section-head h2{font-size:36px;}

/* ===== Services grid ===== */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ink); border:1px solid var(--ink);}
.grid-3 .card{background:var(--paper); padding:32px;}
.card .idx{font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--grey-2); margin-bottom:18px; display:block;}
.card h3{font-size:20px; margin-bottom:10px;}
.card p{margin:0; font-size:14.5px;}

/* ===== TLD Availability table ===== */
.tld-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px;}
.tld-tab{
  font-family:'JetBrains Mono',monospace; font-size:13px; padding:8px 16px;
  border:1px solid var(--ink); border-radius:var(--radius-chip); cursor:pointer; background:var(--paper);
}
.tld-tab.active{background:var(--ink); color:var(--paper);}
table.backlink-table{width:100%; border-collapse:collapse; font-size:14px;}
.backlink-table thead th{
  text-align:left; font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--grey-1); border-bottom:1px solid var(--ink); padding:10px 12px;
}
.backlink-table tbody td{padding:14px 12px; border-bottom:1px solid var(--grey-3); font-family:'JetBrains Mono',monospace;}
.backlink-table tbody tr:hover{background:var(--grey-3);}
.badge{display:inline-block; padding:3px 10px; border-radius:var(--radius-chip); font-size:11px; font-weight:600;}
.badge-da{background:var(--ink); color:var(--paper);}
.badge-pa{background:var(--grey-3); color:var(--ink); border:1px solid var(--ink);}
.status-available{color:#0a7a3d; font-weight:600;}
.status-sold{color:var(--grey-2); text-decoration:line-through;}

/* ===== Process (numbered, real sequence) ===== */
.process{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--ink); border-left:1px solid var(--ink);}
.process .step{border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); padding:26px 22px;}
.process .step b.num{font-family:'JetBrains Mono',monospace; font-size:28px; display:block; margin-bottom:10px; color:var(--grey-2);}
.process .step h4{font-size:16px; margin-bottom:8px;}
.process .step p{font-size:13.5px; margin:0;}

/* ===== Articles ===== */
.article-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.article-card{border:1px solid var(--ink);}
.article-card img{width:100%; aspect-ratio:16/10; object-fit:cover; border-bottom:1px solid var(--ink); filter:grayscale(100%);}
.article-body{padding:20px;}
.article-body time{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--grey-1); text-transform:uppercase;}
.article-body h3{font-size:17px; margin:8px 0 10px;}
.article-body p{font-size:13.5px;}
.read-more{font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px; margin-top:10px;}

/* ===== FAQ ===== */
.faq-item{border-bottom:1px solid var(--grey-2); padding:20px 0;}
.faq-q{display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:600; font-size:15.5px;}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-a p{padding-top:12px; margin:0; font-size:14.5px;}
.faq-item.open .faq-a{max-height:300px;}
.faq-item.open .faq-q .plus{transform:rotate(45deg);}
.plus{font-size:20px; transition:.2s;}

/* ===== CTA band ===== */
.cta-band{background:var(--ink); color:var(--paper); text-align:center; padding:70px 0;}
.cta-band h2{color:var(--paper); font-size:34px;}
.cta-band p{color:var(--grey-2);}
.cta-band .btn{background:var(--paper); color:var(--ink); border-color:var(--paper);}
.cta-band .btn:hover{background:transparent; color:var(--paper);}

/* ===== Footer ===== */
footer{border-top:1px solid var(--ink); padding:50px 0 30px;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; margin-bottom:40px;}
.footer-grid h5{font-family:'JetBrains Mono',monospace; text-transform:uppercase; font-size:12px; letter-spacing:.05em; margin-bottom:14px;}
.footer-grid a{display:block; font-size:14px; color:var(--grey-1); margin-bottom:10px;}
.footer-grid a:hover{color:var(--ink);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--grey-1); border-top:1px solid var(--grey-2); padding-top:22px;}

/* ===== Responsive ===== */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero h1{font-size:38px;}
  .grid-3{grid-template-columns:1fr;}
  .process{grid-template-columns:1fr 1fr;}
  .article-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr; gap:24px;}
  .nav-links{display:none;}
}

/* Focus visibility (a11y) */
a:focus-visible, button:focus-visible, .btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
}