/* ---------- tokens ---------- */
:root{
  --ink:#141B2E;
  --ink-2:#2A3147;
  --slate:#5C6580;
  --paper:#E9ECF2;
  --surface:#FFFFFF;
  --surface-2:#F3F5F9;
  --line:#C9CFDC;
  --line-soft:#DDE2EB;
  --brass:#8F6415;
  --brass-bright:#B5811F;
  --brass-soft:#F2E7CD;
  --verdigris:#20685D;
  --rose:#8E353E;
  --console-bg:#0E1422;
  --console-panel:#141C2E;
  --console-line:#26324B;
  --console-text:#C7D3E6;
  --console-dim:#7A89A6;
  --shadow:0 1px 2px rgba(20,27,46,.06), 0 12px 32px -18px rgba(20,27,46,.35);
  --maxw:1180px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#E7EBF4;
    --ink-2:#C6CEDE;
    --slate:#939DB5;
    --paper:#0C1120;
    --surface:#151C2D;
    --surface-2:#1B2335;
    --line:#2B3448;
    --line-soft:#232C3E;
    --brass:#DCA646;
    --brass-bright:#EFBE64;
    --brass-soft:#3C2F16;
    --verdigris:#55BCAA;
    --rose:#D9818A;
    --console-bg:#070B14;
    --console-panel:#0D1424;
    --console-line:#222C43;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ink:#E7EBF4; --ink-2:#C6CEDE; --slate:#939DB5; --paper:#0C1120;
  --surface:#151C2D; --surface-2:#1B2335; --line:#2B3448; --line-soft:#232C3E;
  --brass:#DCA646; --brass-bright:#EFBE64; --brass-soft:#3C2F16;
  --verdigris:#55BCAA; --rose:#D9818A;
  --console-bg:#070B14; --console-panel:#0D1424; --console-line:#222C43;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -18px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-variation-settings:"wdth" 100;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass-bright); outline-offset:3px; border-radius:2px}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

h1,h2,h3{margin:0; font-weight:600; line-height:1.08; letter-spacing:-.02em}
h1{font-size:clamp(2.6rem,6.2vw,4.5rem); font-variation-settings:"wdth" 112; letter-spacing:-.035em}
h2{font-size:clamp(1.85rem,3.6vw,2.9rem); font-variation-settings:"wdth" 108; letter-spacing:-.03em}
h3{font-size:1.14rem; font-variation-settings:"wdth" 104; letter-spacing:-.015em; line-height:1.25}
p{margin:0 0 1em}
.lede{font-size:1.12rem; color:var(--slate); max-width:62ch}
.tight{max-width:58ch}

/* ---------- validity rule: the repeating structural motif ---------- */
.vrule{position:relative; height:3px; background:var(--line-soft); overflow:hidden; border-radius:2px}
.vrule span{position:absolute; inset:0 auto 0 0; background:var(--brass-bright); border-radius:2px}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
}
.bar{display:flex; align-items:center; gap:22px; height:64px}
.mark{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; letter-spacing:-.02em; font-variation-settings:"wdth" 108; white-space:nowrap}
.seal{width:26px; height:26px; flex:none}
nav.links{display:flex; gap:22px; margin-left:auto; font-size:.93rem}
nav.links a{text-decoration:none; color:var(--slate); padding:4px 0; border-bottom:1.5px solid transparent}
nav.links a:hover, nav.links a.on{color:var(--ink); border-bottom-color:var(--brass-bright)}
.themebtn{
  margin-left:18px; background:none; border:1px solid var(--line); color:var(--slate);
  width:34px; height:34px; border-radius:50%; cursor:pointer; display:grid; place-items:center; flex:none;
}
.themebtn:hover{color:var(--ink); border: 1px solid var(--brass-bright); background:none !important;}
#progress{height:2px; background:transparent}
#progress i{display:block; height:100%; width:0; background:var(--brass-bright)}
@media (max-width:860px){ nav.links{display:none} }

/* ---------- hero ---------- */
.hero{padding:76px 0 52px}
.herogrid{display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center}
@media (max-width:980px){ .herogrid{grid-template-columns:1fr; gap:40px} }
.kicker{display:inline-flex; align-items:center; gap:9px; font-size:.86rem; color:var(--brass); font-weight:600; margin-bottom:22px}
.kicker b{width:7px; height:7px; border-radius:50%; background:var(--verdigris); display:inline-block}
h1 .sub{display:block; color:var(--slate)}
.herocta{display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 34px}
.btn{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  padding:12px 20px; border-radius:6px; font-weight:600; font-size:.95rem;
  border:1px solid var(--ink); background:var(--ink); color:var(--paper); cursor:pointer;
  font-family:inherit;
}
.btn:hover{background:var(--brass); border: 1px solid var(--brass); color:#fff}
.btn.ghost{background:transparent; color:var(--ink); border: 1px solid var(--line)}
.btn.ghost:hover{background:transparent; color:var(--brass); border:1px solid var(--brass)}
.creds{display:flex; gap:34px; flex-wrap:wrap; padding-top:26px; border-top:1px solid var(--line-soft)}
.creds div b{display:block; font-size:1.65rem; font-weight:600; font-variation-settings:"wdth" 106; letter-spacing:-.03em; line-height:1}
.creds div span{font-size:.85rem; color:var(--slate)}

/* ---------- console panel (hero ledger) ---------- */
.panel{
  background:var(--console-bg); border-radius:12px; border:1px solid var(--console-line);
  box-shadow:var(--shadow); overflow:hidden; color:var(--console-text);
}
.panelhead{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--console-line); font-size:.78rem; color:var(--console-dim)}
.dot{width:8px; height:8px; border-radius:50%; background:var(--verdigris); flex:none}
.dot.amber{background:var(--brass-bright)}
.dot.rose{background:var(--rose)}
.panelhead .right{margin-left:auto}
.ledger{padding:16px; min-height:236px; font-size:.83rem; line-height:1.95}
.ledger .row{display:flex; gap:12px; opacity:0; transform:translateY(4px); animation:in .28s ease forwards}
@keyframes in{to{opacity:1; transform:none}}
.ledger .t{color:var(--console-dim); flex:none; width:64px}
.ledger .ok{color:var(--verdigris)}
.ledger .warn{color:var(--brass-bright)}
.ledger .bad{color:var(--rose)}
.window{padding:14px 16px 16px; border-top:1px solid var(--console-line); background:var(--console-panel)}
.windowtop{display:flex; align-items:baseline; gap:10px; margin-bottom:10px}
.windowtop .lbl{font-size:.76rem; color:var(--console-dim)}
.clock{margin-left:auto; font-size:1.5rem; font-weight:500; letter-spacing:-.02em; color:var(--brass-bright); font-variant-numeric:tabular-nums}
.clock.expired{color:var(--rose)}
.wbar{height:4px; background:var(--console-line); border-radius:3px; overflow:hidden}
.wbar i{display:block; height:100%; width:100%; background:var(--brass-bright)}
.reissue{
  margin-top:12px; width:100%; padding:9px; border-radius:6px; cursor:pointer;
  background:transparent; border:1px solid var(--console-line); color:var(--console-text);
  font-family:"IBM Plex Mono",monospace; font-size:.8rem;
}
.reissue:hover{border: 1px solid var(--brass-bright); color:var(--brass-bright)}

/* ---------- sections ---------- */
section{padding:74px 0}
.shead{margin-bottom:40px; max-width:66ch}
.shead .vrule{width:52px; margin-bottom:20px}
.shead p{color:var(--slate); margin:14px 0 0; max-width:62ch}
.alt{background:var(--surface)}
.dark{background:var(--console-bg); color:var(--console-text)}
.dark h2{color:#fff}
.dark .shead p{color:var(--console-dim)}
.dark .shead .vrule{background:var(--console-line)}

/* ---------- network ---------- */
.net{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:10px; overflow:hidden}
@media (max-width:900px){ .net{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .net{grid-template-columns:1fr} }
.node{background:var(--surface); padding:26px 24px 24px; text-decoration:none; display:block; position:relative; transition:background .15s}
.node:hover{background:var(--surface-2)}
.node .dom{font-family:"IBM Plex Mono",monospace; font-size:.8rem; color:var(--brass); margin-bottom:12px}
.node h3{margin-bottom:8px}
.node p{font-size:.92rem; color:var(--slate); margin:0 0 16px}
.tags{display:flex; flex-wrap:wrap; gap:6px}
.tag{font-size:.73rem; padding:3px 8px; border-radius:20px; border:1px solid var(--line); color:var(--slate)}
.node .go{position:absolute; top:26px; right:24px; color:var(--line); font-size:1rem}
.node:hover .go{color:var(--brass-bright)}
.node .stateline{position:absolute; left:0; right:0; top:0; height:2px; background:var(--brass-bright); opacity:0; transition:opacity .15s}
.node:hover .stateline{opacity:1}
.node.locked .dom::after{content:" กค access gated"; color:var(--slate)}

/* ---------- library ---------- */
.tools{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:26px}
.search{
  flex:1 1 230px; min-width:180px; padding:10px 14px !important; border-radius:6px !important; font-family:inherit; font-size:.92rem;
  border:1px solid var(--line) !important; background:var(--surface); color:var(--ink);
}
.search::placeholder{color:var(--slate)}
.chip{
  padding:7px 14px; border-radius:20px; font-size:.84rem; cursor:pointer; font-family:inherit;
  border:1px solid var(--line); background:transparent; color:var(--slate);
}
.chip:hover{color:var(--ink); border: 1px solid var(--ink);}
.chip[aria-pressed="true"]{background:var(--ink); border:1px solid var(--ink); color:var(--paper)}
.lib{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:900px){ .lib{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .lib{grid-template-columns:1fr} }
.card{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:10px; padding:20px;
  display:flex; flex-direction:column; text-decoration:none;
}
.card:hover{border: 1px solid var(--brass-bright)}
.card .cat{font-size:.74rem; color:var(--brass); font-weight:600; margin-bottom:10px}
.card h3{margin-bottom:9px; font-size:1.03rem}
.card p{font-size:.9rem; color:var(--slate); margin:0 0 16px}
.card .src{margin-top:auto; font-family:"IBM Plex Mono",monospace; font-size:.75rem; color:var(--slate); padding-top:12px; border-top:1px solid var(--line-soft)}
.empty{padding:40px 0; color:var(--slate)}

/* ---------- flow ---------- */
.flow{display:grid; grid-template-columns:repeat(6,1fr); gap:0}
@media (max-width:1000px){ .flow{grid-template-columns:repeat(3,1fr)} }
@media (max-width:620px){ .flow{grid-template-columns:1fr} }
.step{padding:22px 20px 24px; border-left:1px solid var(--console-line); position:relative}
.step:first-child{border-left:0}
@media (max-width:1000px){ .step:nth-child(3n+1){border-left:0} }
@media (max-width:620px){ .step{border-left:0; border-top:1px solid var(--console-line)} .step:first-child{border-top:0} }
.step .n{font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:var(--brass-bright); margin-bottom:14px}
.step h3{color:#fff; font-size:1rem; margin-bottom:8px}
.step p{font-size:.86rem; color:var(--console-dim); margin:0}
.flowrule{margin:34px 0 0; height:3px; background:var(--console-line); border-radius:2px; position:relative; overflow:hidden}
.flowrule i{position:absolute; inset:0 auto 0 0; width:0; background:var(--brass-bright)}

/* ---------- industries ---------- */
.tabs{display:flex; flex-wrap:wrap; gap:0; border-bottom:1px solid var(--line); margin-bottom:34px}
.tabs button{
  padding:12px 20px; background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px;
  cursor:pointer; font-family:inherit; font-size:.95rem; color:var(--slate); font-weight:500;
}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--brass-bright); font-weight:600}
.pane{display:grid; grid-template-columns:1fr 1fr; gap:44px}
@media (max-width:860px){ .pane{grid-template-columns:1fr; gap:28px} }
.pane[hidden]{display:none}
.pane ul{list-style:none; padding:0; margin:0}
.pane li{padding:11px 0 11px 26px; border-bottom:1px solid var(--line-soft); position:relative; font-size:.95rem}
.pane li::before{content:""; position:absolute; left:0; top:19px; width:12px; height:1px; background:var(--brass-bright)}
.riskbox{background:var(--surface-2); border-left:3px solid var(--rose); padding:18px 20px; border-radius:0 8px 8px 0; margin-bottom:22px}
.riskbox strong{display:block; font-size:.8rem; color:var(--rose); margin-bottom:6px}
.riskbox p{margin:0; font-size:.95rem}

/* ---------- calculator ---------- */
.calc{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start; background:var(--surface); border:1px solid var(--line-soft); border-radius:12px; padding:30px}
@media (max-width:820px){ .calc{grid-template-columns:1fr; gap:26px} }
.field{margin-bottom:20px}
.field label{display:block; font-size:.86rem; color:var(--slate); margin-bottom:7px}
.field input{
  width:100%; padding:10px 13px; border-radius:6px; border:1px solid var(--line);
  background:var(--paper); color:var(--ink); font-family:"IBM Plex Mono",monospace; font-size:1rem;
}
.presets{display:flex; gap:8px; flex-wrap:wrap}
.out{background:var(--surface-2); border-radius:10px; padding:24px}
.outrow{display:flex; align-items:baseline; gap:14px; padding:12px 0; border-bottom:1px solid var(--line-soft)}
.outrow:last-of-type{border-bottom:0}
.outrow b{font-family:"IBM Plex Mono",monospace; font-size:1.5rem; font-weight:500; color:var(--brass); margin-left:auto; letter-spacing:-.02em}
.outrow span{font-size:.92rem; color:var(--slate)}
.outnote{font-size:.85rem; color:var(--slate); margin:14px 0 0}

/* ---------- terminal ---------- */
.term{background:var(--console-panel); border:1px solid var(--console-line); border-radius:12px; overflow:hidden}
.termbody{padding:18px; height:330px; overflow-y:auto; font-family:"IBM Plex Mono",monospace; font-size:.83rem; line-height:1.8}
.termbody p{margin:0 0 2px}
.termbody .u{color:var(--brass-bright)}
.termbody .g{color:var(--verdigris)}
.termbody .d{color:var(--console-dim)}
.termbody a{color:var(--brass-bright)}
.terminput{display:flex; align-items:center; gap:10px; border-top:1px solid var(--console-line); padding:12px 18px; background:var(--console-bg)}
.terminput span{color:var(--verdigris); font-family:"IBM Plex Mono",monospace; font-size:.83rem; flex:none}
.terminput input{
  flex:1; background:none; border:0; color:var(--console-text);
  font-family:"IBM Plex Mono",monospace; font-size:.83rem; padding:2px 0;
}
.terminput input:focus{outline:none}
.hints{margin-top:14px; font-size:.82rem; color:var(--console-dim)}
.hints button{
  background:none; border:1px solid var(--console-line); color:var(--console-dim);
  padding:3px 10px; border-radius:20px; font-family:"IBM Plex Mono",monospace; font-size:.75rem; cursor:pointer; margin-right:6px;
}
.hints button:hover{color:var(--brass-bright); border: 1px solid var(--brass-bright)}

/* ---------- bio ---------- */
.biogrid{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px}
@media (max-width:900px){ .biogrid{grid-template-columns:1fr; gap:36px} }
.portrait{background:var(--surface); border:1px solid var(--line-soft); border-radius:12px; padding:28px; position:sticky; top:86px}
@media (max-width:900px){ .portrait{position:static} }
.mono-init{
  width:84px; height:84px; border-radius:10px; background:var(--ink); color:var(--paper);
  display:grid; place-items:center; font-size:1.7rem; font-weight:600; font-variation-settings:"wdth" 110;
  letter-spacing:-.04em; margin-bottom:20px;
}
.portrait .role{color:var(--brass); font-size:.9rem; font-weight:600; margin:4px 0 14px}
.portrait p{font-size:.93rem; color:var(--slate)}
.skills{display:flex; flex-wrap:wrap; gap:6px; margin-top:18px}
.tl{list-style:none; padding:0; margin:0}
.tl li{position:relative; padding:0 0 30px 30px; border-left:1px solid var(--line)}
.tl li:last-child{border-left-color:transparent; padding-bottom:0}
.tl li::before{content:""; position:absolute; left:-5px; top:6px; width:9px; height:9px; border-radius:50%; background:var(--paper); border:2px solid var(--brass-bright)}
.tl .when{font-family:"IBM Plex Mono",monospace; font-size:.76rem; color:var(--slate); margin-bottom:5px}
.tl h3{margin-bottom:3px}
.tl .org{font-size:.9rem; color:var(--brass); margin-bottom:8px}
.tl p{font-size:.92rem; color:var(--slate); margin:0}
.exp{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; padding-top:34px; border-top:1px solid var(--line-soft)}
@media (max-width:760px){ .exp{grid-template-columns:1fr} }
.exp h3{margin-bottom:12px; font-size:1rem}
.exp ul{list-style:none; padding:0; margin:0; font-size:.9rem; color:var(--slate)}
.exp li{padding:5px 0}

/* ---------- watch ---------- */
.watch{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media (max-width:980px){ .watch{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .watch{grid-template-columns:1fr} }
.vid{background:var(--console-panel); border:1px solid var(--console-line); border-radius:10px; padding:20px; text-decoration:none; display:block}
.vid:hover{border: 1px solid var(--brass-bright)}
.vid .play{width:30px; height:30px; margin-bottom:16px; color:var(--brass-bright)}
.vid h3{color:#fff; font-size:.98rem; margin-bottom:7px}
.vid p{font-size:.85rem; color:var(--console-dim); margin:0}

/* ---------- contact ---------- */
.contact{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start}
@media (max-width:860px){ .contact{grid-template-columns:1fr; gap:36px} }
.reach{list-style:none; padding:0; margin:22px 0 0}
.reach li{padding:14px 0; border-bottom:1px solid var(--line-soft); display:flex; gap:14px; align-items:baseline; font-size:.97rem}
.reach .k{color:var(--slate); font-size:.85rem; width:92px; flex:none}
.reach a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--brass-bright)}
.reach a:hover{color:var(--brass)}
.signup{background:var(--surface); border:1px solid var(--line-soft); border-radius:12px; padding:28px}
.signup h3{margin-bottom:8px}
.signup p{font-size:.92rem; color:var(--slate)}
.signup .field{margin-bottom:12px}
#subnote{font-size:.85rem; color:var(--verdigris); min-height:1.2em; margin:10px 0 0}

/* ---------- footer ---------- */
footer{background:var(--console-bg); color:var(--console-dim); padding:56px 0 30px; font-size:.9rem}
.fgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; margin-bottom:38px}
@media (max-width:820px){ .fgrid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .fgrid{grid-template-columns:1fr} }
footer h4{color:#fff; font-size:.83rem; font-weight:600; margin:0 0 14px}
footer ul{list-style:none; padding:0; margin:0}
footer li{padding:5px 0}
footer a{color:var(--console-dim); text-decoration:none}
footer a:hover{color:var(--brass-bright)}
.fbot{border-top:1px solid var(--console-line); padding-top:22px; display:flex; flex-wrap:wrap; gap:14px; font-size:.83rem}
.fbot .right{margin-left:auto}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important; transition-duration:.001s !important}
  html{scroll-behavior:auto}
}


/* =========================================================
   CentralIdea - Override Hello Elementor button defaults
   ========================================================= */

[type="button"],
[type="submit"],
button {
    background-color: unset;
    border: 0;
    border-radius: 0;
    color: inherit;
    display: inline-block;
    font-size: inherit;
    font-weight: inherit;
    padding: 0;
    text-align: inherit;
    transition: none;
    -webkit-user-select: auto;
    -moz-user-select: auto;
    user-select: auto;
    white-space: normal;
}

a:active, a:hover {
    color: inherit;
}


/* CentralIdea baseline */
button:hover,
button:focus,
button:active,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
    background: none;
    border: inherit;
    color: inherit;
    box-shadow: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

input,
select,
textarea {
    border: 0;
    background: transparent;
    color: inherit;
}