@font-face{font-family:"Big Shoulders Display";src:url("fonts/big-shoulders-display.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Familjen Grotesk";src:url("fonts/familjen-grotesk.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono.woff2") format("woff2");font-weight:100 800;font-display:swap}
/* Layout: signage-style header with caution tape, then a phone simulator beside a briefing panel; stacks on phones */
:root{
  --paper:#EDF0F3; --card:#FFFFFF; --ink:#14202B; --muted:#5A6774; --line:#CBD3DB;
  --signal:#FFB21A; --signal-ink:#14202B; --danger:#C93A25; --safe:#1C7F53; --warn:#B36B00;
  --chat:#E4EBE5; --bub:#FFFFFF; --bub-me:#D4F1C5; --phone:#0E151B; --wa:#0F5C4D;
  --f-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --f-body:"Familjen Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --f-phone:-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0E151C; --card:#17212B; --ink:#E6EBF0; --muted:#92A0AD; --line:#2A3743;
  --signal:#FFC14A; --danger:#FF7A63; --safe:#4FD094; --warn:#F2A93B;
  --chat:#0F1A15; --bub:#1E2A33; --bub-me:#1D4A34; --phone:#05090C; --wa:#103D35; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0E151C; --card:#17212B; --ink:#E6EBF0; --muted:#92A0AD; --line:#2A3743;
  --signal:#FFC14A; --danger:#FF7A63; --safe:#4FD094; --warn:#F2A93B;
  --chat:#0F1A15; --bub:#1E2A33; --bub-me:#1D4A34; --phone:#05090C; --wa:#103D35; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:1120px;margin:0 auto}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
h1,h2,h3{text-wrap:balance;margin:0}
.mono{font-family:var(--f-mono);font-size:.82em}

header.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:18px 14px}
.logo{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0}
.logo b{font-family:var(--f-display);font-weight:900;font-size:30px;letter-spacing:.02em;text-transform:uppercase;line-height:1}
.logo .thumb{width:34px;height:34px;border-radius:50%;background:var(--signal);display:grid;place-items:center;color:var(--signal-ink)}
.tag{font-size:13px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.tag span{border:1px solid var(--line);border-radius:999px;padding:2px 10px}
.tape{height:14px;margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));
  background:repeating-linear-gradient(-45deg,var(--signal) 0 18px,var(--ink) 18px 36px)}

/* HOME */
.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center;padding-block:44px 28px}
.hero h1{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(48px,8vw,96px);line-height:.95;letter-spacing:.005em}
.hero h1 em{font-style:normal;background:var(--signal);color:var(--signal-ink);padding:.03em .12em 0;display:inline-block;line-height:1;margin-top:.08em}
.hero p.lede{font-size:19px;max-width:34em;margin:18px 0 22px;color:var(--muted)}
.cta{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);border:0;border-radius:999px;padding:14px 24px;font-weight:700;font-size:17px}
.cta:hover{transform:translateY(-1px)}
.progress{margin-top:16px;font-size:14px;color:var(--muted)}
.progress b{color:var(--ink);font-variant-numeric:tabular-nums}

.notif-stack{display:grid;gap:10px}
.notif{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;display:grid;grid-template-columns:36px 1fr;gap:10px;font-family:var(--f-phone);font-size:14px;box-shadow:0 8px 24px -14px rgba(0,0,0,.35)}
.notif:nth-child(2){margin-left:22px}.notif:nth-child(3){margin-left:44px}
.notif .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px}
.notif .who{font-weight:600}.notif .t{color:var(--muted);font-size:12px;float:right}
.notif .msg{min-width:0;overflow-wrap:anywhere}
.notif .flag{display:inline-block;margin-top:6px;font-family:var(--f-body);font-size:12px;font-weight:700;color:var(--danger);text-transform:uppercase;letter-spacing:.06em}

.section-h{display:flex;justify-content:space-between;align-items:end;gap:12px;margin:34px 0 14px;flex-wrap:wrap}
.section-h h2{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:34px;letter-spacing:.02em;line-height:1}
.section-h p{margin:0;color:var(--muted);font-size:15px;max-width:36em}

.patterns{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pat{border:2px solid var(--ink);border-radius:4px;padding:14px 16px;background:var(--card)}
.pat .k{font-family:var(--f-display);font-weight:800;font-size:28px;text-transform:uppercase;line-height:1}
.pat p{margin:6px 0 0;font-size:14px;color:var(--muted)}
.pat .eg{margin-top:10px;font-family:var(--f-phone);font-size:13px;background:var(--paper);border-radius:8px;padding:6px 9px}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600}
.blr{filter:blur(4.5px);-webkit-user-select:none;user-select:none;display:inline-block;border-radius:3px}
.cic{width:24px;height:24px;border-radius:7px;display:inline-grid;place-items:center;color:#fff;flex:none}
.cic svg{width:15px;height:15px}
.notif .ic svg{width:22px;height:22px}
.chip{display:inline-flex;align-items:center;gap:7px}
.chip .cic{width:20px;height:20px;border-radius:6px}.chip .cic svg{width:13px;height:13px}
.brief .ch .cic{width:28px;height:28px;border-radius:8px}.brief .ch .cic svg{width:17px;height:17px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sc{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.sc:hover{border-color:var(--ink)}
.sc .row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ch{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);display:flex;align-items:center;gap:6px}
.ch i{width:9px;height:9px;border-radius:50%;display:inline-block}
.sc h3{font-family:var(--f-display);font-weight:800;font-size:26px;text-transform:uppercase;line-height:1.02}
.sc p{margin:0;font-size:14.5px;color:var(--muted)}
.pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.pill{font-size:12px;border-radius:999px;padding:2px 9px;background:var(--paper);border:1px solid var(--line)}
.status{font-size:12px;font-weight:700;border-radius:999px;padding:2px 9px;white-space:nowrap}
.status.aman{background:color-mix(in srgb,var(--safe) 16%,transparent);color:var(--safe)}
.status.nyaris{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.status.kena{background:color-mix(in srgb,var(--danger) 15%,transparent);color:var(--danger)}
.status.baru{border:1px dashed var(--line);color:var(--muted)}

.rules{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:2px solid var(--ink);margin-top:8px}
.rules div{padding:14px 0;border-bottom:1px solid var(--line);display:flex;gap:12px}
.rules div:nth-child(odd){padding-right:24px}
.rules b{font-family:var(--f-display);font-size:22px;text-transform:uppercase;line-height:1.1;min-width:0}
.rules span{color:var(--muted);font-size:15px}
footer{padding-block:36px 40px;color:var(--muted);font-size:13px;border-top:1px solid var(--line);margin-top:40px}
footer p{margin:4px 0;max-width:62em}

/* SIM */
.sim{display:grid;grid-template-columns:400px 1fr;gap:36px;padding-block:24px 10px;align-items:start}
.back{background:none;border:0;padding:0;color:var(--muted);font-weight:600;margin:20px 0 0}
.phone{background:var(--phone);border-radius:38px;padding:10px;box-shadow:0 30px 60px -30px rgba(0,0,0,.55);position:sticky;top:12px;max-width:100%}
.screen{border-radius:30px;overflow:hidden;background:var(--chat);height:min(700px,82vh);display:flex;flex-direction:column}
.sbar{display:flex;justify-content:space-between;font-family:var(--f-phone);font-size:12px;font-weight:600;padding:8px 20px 4px;color:#fff}
.phead{display:flex;align-items:center;gap:10px;padding:6px 12px 10px;color:#fff;font-family:var(--f-phone)}
.phead .av{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;font-weight:700;flex:none}
.phead .nm{font-weight:600;font-size:15px;line-height:1.2;overflow-wrap:anywhere}
.phead .sub{font-size:12px;opacity:.8;line-height:1.3}
.phead > div{min-width:0}
.ptop{background:var(--wa)}
.ptop.sms{background:#2E4B7A}.ptop.call{background:#1D2B3A}.ptop.email{background:#7A2E2E}.ptop.qris{background:#4A2E7A}.ptop.ig{background:#7A2E5E}.ptop.mp{background:#8A4212}.ptop.web{background:#2B4A80}
.serp{align-self:stretch;background:var(--card);border-radius:12px;padding:10px 12px;font-size:13.5px;animation:pop .22s ease-out}
.serp .u{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.serp .u b{color:var(--ink)}
.serp .ti{color:#1A56C4;font-size:16px;margin:2px 0 3px;line-height:1.3}
:root[data-theme="dark"] .serp .ti{color:#8AB4FF}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .serp .ti{color:#8AB4FF}}
.feed{flex:1;overflow-y:auto;padding:14px 12px 8px;display:flex;flex-direction:column;gap:8px;font-family:var(--f-phone);font-size:14.5px;line-height:1.4}
.safety{align-self:center;background:color-mix(in srgb,var(--signal) 22%,var(--bub));border-radius:10px;padding:6px 10px;font-size:12px;text-align:center;max-width:92%}
.b{max-width:84%;padding:8px 10px 6px;border-radius:12px;background:var(--bub);box-shadow:0 1px 0 rgba(0,0,0,.08);overflow-wrap:anywhere;animation:pop .22s ease-out}
.b.me{align-self:flex-end;background:var(--bub-me);border-top-right-radius:4px}
.b.them{align-self:flex-start;border-top-left-radius:4px}
.b .tm{display:block;text-align:right;font-size:11px;opacity:.6;margin-top:2px}
.b .lk{color:#1A6FD1;text-decoration:underline}
:root[data-theme="dark"] .b .lk{color:#6FB2FF}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .b .lk{color:#6FB2FF}}
.b .file{display:flex;gap:10px;align-items:center;background:var(--paper);border-radius:8px;padding:8px}
.b .file i{width:34px;height:40px;border-radius:4px;background:#3DA35D;color:#fff;font-style:normal;font-size:10px;font-weight:700;display:grid;place-items:center;flex:none}
.sys{align-self:center;max-width:94%;text-align:center;font-size:13px;color:var(--muted);font-style:italic;animation:pop .22s ease-out}
.otp{align-self:stretch;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px;font-size:13.5px;animation:drop .3s ease-out}
.otp .h{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:3px}
.page{align-self:stretch;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;animation:pop .22s ease-out}
.page .url{background:var(--paper);font-family:var(--f-mono);font-size:11.5px;padding:6px 10px;color:var(--muted);overflow-wrap:anywhere}
.page .bd{padding:10px 12px;font-size:13.5px}
.page .fld{border:1px solid var(--line);border-radius:6px;padding:6px 8px;margin-top:6px;color:var(--muted);font-size:12.5px}
.email{align-self:stretch;background:var(--card);border-radius:12px;padding:12px;font-size:13.5px;animation:pop .22s ease-out}
.email .from{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.email .subj{font-weight:700;margin:4px 0 8px}
.qr{align-self:stretch;background:var(--card);border-radius:14px;padding:14px;text-align:center;font-size:13.5px}
.qr .mer{font-size:18px;font-weight:700;margin:6px 0 2px}
.qr .amt{font-family:var(--f-mono);font-size:22px;margin-top:8px}
.typing{align-self:flex-start;background:var(--bub);border-radius:12px;padding:10px 12px;display:flex;gap:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.callbar{text-align:center;color:#fff;font-family:var(--f-phone);padding:4px 0 14px}
.callbar .tmr{font-size:13px;opacity:.85;font-variant-numeric:tabular-nums}
.choices{background:var(--card);border-top:1px solid var(--line);padding:10px;display:grid;gap:7px;min-height:58px}
.choices .q{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:0 2px}
.opt{text-align:left;border:1.5px solid var(--line);background:var(--paper);border-radius:12px;padding:9px 12px;font-size:14.5px;font-weight:500;line-height:1.35}
.opt:hover{border-color:var(--ink)}
.opt.hold{border-color:var(--ink);background:var(--signal);color:var(--signal-ink);font-weight:700}

.brief{min-width:0}
.brief .ch{margin-bottom:6px}
.brief h1{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(40px,5.5vw,64px);line-height:.92}
.brief .hook{font-size:18px;color:var(--muted);max-width:32em;margin:12px 0 16px}
.note{border-left:4px solid var(--signal);padding:8px 14px;background:var(--card);border-radius:0 8px 8px 0;font-size:14.5px;max-width:34em}
.result{margin-top:22px;border:2px solid var(--ink);border-radius:6px;background:var(--card);overflow:hidden}
.result .rh{padding:14px 18px;font-family:var(--f-display);font-weight:900;font-size:40px;text-transform:uppercase;line-height:1}
.result.kena .rh{background:var(--danger);color:#fff}
.result.nyaris .rh{background:var(--warn);color:#fff}
.result.aman .rh{background:var(--safe);color:#fff}
.result .rb{padding:14px 18px;display:grid;gap:14px}
.result .rb > p{margin:0;font-size:16.5px}
.result h3{font-size:12.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:6px}
.flags{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.flags li{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:15px}
.flags li b{display:block}
.flags .x{width:24px;height:24px;border-radius:50%;background:var(--danger);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;margin-top:2px}
.flags li.got .x{background:var(--safe)}
.steps{margin:0;padding-left:20px;display:grid;gap:4px;font-size:15px}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.ghost{border:1.5px solid var(--ink);background:transparent;border-radius:999px;padding:10px 18px;font-weight:700}
.trail{display:flex;flex-wrap:wrap;gap:6px;font-size:13px}
.trail span{background:var(--paper);border-radius:6px;padding:3px 8px}
.pending{margin-top:22px;color:var(--muted);font-size:14.5px;border:1px dashed var(--line);border-radius:8px;padding:14px 16px;max-width:34em}

@keyframes pop{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes drop{from{opacity:.2;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:28px;padding-block:28px 10px}
  .patterns{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(2,1fr)}
  .sim{grid-template-columns:1fr;gap:24px}
  .phone{position:static;margin:0 auto;width:100%;max-width:400px}
  .brief{order:-1}
}
@media (max-width:600px){
  .grid,.rules{grid-template-columns:1fr}
  .rules div:nth-child(odd){padding-right:0}
  .tag{display:none}
  .notif:nth-child(2),.notif:nth-child(3){margin-left:0}
  .screen{height:min(620px,78vh)}
  .phone{border-radius:30px;padding:7px}.screen{border-radius:24px}
}