/* GeoStamp Camera — geostamp.radip.id. Palet & tipografi: marketing/brand.md */
:root{
  --navy:#0B1F33; --navy2:#0E3A52; --teal:#0E7490; --cyan:#22D3EE;
  --green:#16A34A; --amber:#D97706; --red:#DC2626;
  --bg:#F4F6F7; --ink:#0B1F33; --muted:#5B6B7A; --line:#E2E8EC;
}
*{box-sizing:border-box}
body{margin:0;font-family:Roboto,system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
img{max-width:100%}
a{color:var(--teal)} a:hover{color:#0B5C73}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:'Space Grotesk',Roboto,sans-serif}
h1{font-size:clamp(30px,5vw,46px);line-height:1.12;margin:0}
h2{font-size:clamp(22px,3.5vw,30px);margin:0 0 8px}
.mono{font-family:'Roboto Mono',monospace;font-weight:700}
em{font-style:normal;color:var(--cyan)}

.site-header{background:var(--navy)}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px}
.brand img{width:34px;height:34px}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.nav a{color:#B9D2DE;text-decoration:none;font-size:14px}
.nav a:hover{color:#fff}
.lang{display:flex;border:1px solid #2A4458;border-radius:16px;overflow:hidden}
.lang a{padding:5px 12px;font-size:12px;color:#8FB3C4;text-decoration:none}
.lang a.active{background:var(--cyan);color:var(--navy);font-weight:700}

.hero{background:linear-gradient(180deg,var(--navy) 0%,var(--navy2) 100%);color:#fff;padding:52px 0 64px}
.hero .lead{color:#A8CBDC;font-size:18px;max-width:560px;margin:18px 0 0}
.hero-flex{display:flex;flex-wrap:wrap;align-items:center;gap:40px}
.hero-copy{flex:999 1 420px;min-width:0}
.hero-art{flex:1 1 280px;display:flex;justify-content:center}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:28px}
.stats{display:flex;flex-wrap:wrap;gap:24px;margin-top:30px}
.stats b{display:block;font-family:'Roboto Mono',monospace;font-size:20px;color:var(--cyan)}
.stats span{font-size:12px;color:#8FB3C4}

.btn{display:inline-flex;align-items:center;gap:10px;background:var(--cyan);color:var(--navy);border:0;border-radius:14px;padding:13px 24px;font:inherit;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer}
.btn:hover{background:#67E3F4;color:var(--navy)}
.btn.small{padding:10px 18px;font-size:14px}

section{padding:56px 0}
.section-sub{color:var(--muted);max-width:560px;margin:0 auto 36px;text-align:center}
.center{text-align:center}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px}
.card h3{margin:10px 0 6px;font-size:17px}
.card p{margin:0;font-size:14px;color:var(--muted)}
.card .num{font-family:'Roboto Mono',monospace;font-weight:700;color:var(--cyan);font-size:15px}
.dark{background:var(--navy);color:#fff}
.dark .card{background:transparent;border-color:#1E3A50}
.dark .card p{color:#8FB3C4}
.dark h2{color:#fff}

.stamp-demo{position:relative;width:min(420px,100%);height:300px;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,#B7D5E3 0%,#DCE8EC 52%,#93A3AC 53%,#6E7E88 100%);box-shadow:0 18px 50px rgba(0,0,0,.4)}
.stamp-demo .b1{position:absolute;left:36px;bottom:104px;width:110px;height:100px;background:#51626E}
.stamp-demo .b2{position:absolute;left:160px;bottom:104px;width:64px;height:140px;background:#44535E}
.stamp-card{position:absolute;left:14px;bottom:14px;max-width:310px;background:rgba(0,0,0,.72);border-radius:12px;padding:12px 15px;color:#fff}
.stamp-card .addr{font-size:12px}
.stamp-card .coord{font-family:'Roboto Mono',monospace;font-weight:700;font-size:15px;margin-top:3px}
.stamp-card .meta{font-size:11px;color:#D7E3EA;margin-top:3px}
.stamp-card .note{font-size:11px;color:var(--cyan);margin-top:3px}

.prose{max-width:760px;margin:0 auto}
.prose h2{font-size:22px;margin:34px 0 10px}
.prose p,.prose li{font-size:15px}
.prose .updated{color:var(--muted);font-size:14px}
mark.review{background:#FEF3C7;color:#92400E;padding:2px 8px;border-radius:6px;font-size:13px;font-weight:500}

.faq-list{display:flex;flex-direction:column;gap:14px;max-width:760px;margin:0 auto}
.faq-list .card h3{margin:0 0 6px;font-size:15px}

form .field{margin-bottom:16px}
label{display:block;font-size:14px;font-weight:500;margin-bottom:6px}
.req{color:var(--red)}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid #C3CDD4;border-radius:10px;font:inherit;font-size:14px;background:#fff;color:var(--ink)}
textarea{min-height:110px;resize:vertical}
.hint{font-size:12px;color:var(--muted);margin-top:4px}
.hp{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}
.status{margin-top:14px;padding:12px 14px;border-radius:10px;font-size:14px;display:none}
.status.ok{display:block;background:#E0F2FE;color:#075985}
.status.err{display:block;background:#FEE2E2;color:#991B1B}
.banner-note{background:#FEF3C7;color:#92400E;border-radius:10px;padding:10px 14px;font-size:13px;margin:0 0 20px}

.site-footer{background:var(--navy);padding:28px 0}
.site-footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;color:#8FB3C4;font-size:13px}
.site-footer a{color:#8FB3C4}
.site-footer .links{display:flex;flex-wrap:wrap;gap:18px}