/* ============================================================
   Amzaa — shared stylesheet
   Light glass. Warm ink on paper.
   GREEN  #2f8f5b = the deterministic floor. No switch.
   VIOLET #6a33c7 = the AI rail. Killable.
   Colour carries the argument. It is not decoration.
   ============================================================ */

:root{
  --ink:#1d1a17;
  --paper:#f6f3ee;
  --muted:#8a8178;
  --body:#57514a;
  --green:#2f8f5b;
  --violet:#6a33c7;
  --red:#b3402f;
  --glass:rgba(255,255,255,.66);
  --hair:rgba(29,26,23,.10);
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

.wash{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(760px 420px at 10% -6%, rgba(106,51,199,.06), transparent 62%),
    radial-gradient(700px 460px at 94% 6%, rgba(47,143,91,.06), transparent 60%);
}
.page{position:relative; z-index:1}
section{max-width:1120px; margin:0 auto; padding:88px 24px}

.glass{
  background:var(--glass);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--hair); border-radius:18px;
}

/* nav */
nav{
  position:sticky; top:0; z-index:50;
  background:rgba(246,243,238,.8);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--hair);
}
.navbar{
  max-width:1120px; margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink)}
.brand span{font-weight:700; font-size:18px; letter-spacing:-.02em}
.navlinks{display:flex; gap:28px; align-items:center}
.navlinks a{color:var(--muted); text-decoration:none; font-size:14px; font-weight:500; transition:color .2s}
.navlinks a:hover, .navlinks a.on{color:var(--ink)}

/* buttons */
.btn{
  display:inline-flex; align-items:center; padding:13px 22px; border-radius:999px;
  font-family:var(--sans); font-size:15px; font-weight:600;
  text-decoration:none; cursor:pointer; border:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--ink); color:var(--paper); box-shadow:0 4px 14px rgba(29,26,23,.14)}
.btn-primary:hover{box-shadow:0 10px 28px rgba(29,26,23,.24)}
.btn-ghost{
  background:var(--glass); color:var(--ink); border:1px solid var(--hair);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.btn-ghost:hover{background:rgba(255,255,255,.9)}

/* type */
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-bottom:18px;
}
h1{font-size:58px; line-height:1.06; letter-spacing:-.035em; font-weight:700; margin:0 0 26px}
h1 .soft{color:var(--muted); font-weight:400}
h2{font-size:36px; line-height:1.14; letter-spacing:-.028em; font-weight:700; margin:0 0 16px}
h3{font-size:22px; line-height:1.25; letter-spacing:-.02em; font-weight:650; margin:0 0 10px}
.lede{font-size:19px; line-height:1.6; color:var(--body); max-width:660px; margin:0 0 34px}
.prose{font-size:17px; line-height:1.64; color:var(--body); margin:0 0 18px}
.prose.strong{color:var(--ink); font-weight:600}
p{margin:0}

.pill{
  display:inline-flex; align-items:center; padding:5px 12px; border-radius:999px;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; white-space:nowrap;
}
.pill-green{color:var(--green); border:1px solid rgba(47,143,91,.2); background:rgba(47,143,91,.05)}
.pill-violet{color:var(--violet); border:1px solid rgba(106,51,199,.2); background:rgba(106,51,199,.05)}
.pill-ink{color:var(--muted); border:1px solid var(--hair); background:rgba(29,26,23,.03)}

/* the one punch */
.punch{
  font-size:44px; line-height:1.16; letter-spacing:-.03em; font-weight:700;
  max-width:900px; padding:40px 0;
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
}
.punch .hit{color:var(--green)}

/* grids */
.two{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}
.twocard{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.three{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}

.card{padding:28px; border-radius:16px; border:1px solid var(--hair); background:rgba(255,255,255,.58)}
.card-green{
  background:linear-gradient(180deg, rgba(47,143,91,.05), var(--glass) 55%);
  border:1px solid rgba(47,143,91,.2);
}
.card-violet{
  background:linear-gradient(180deg, rgba(106,51,199,.05), var(--glass) 55%);
  border:1px solid rgba(106,51,199,.2);
}
.card p{font-size:15.5px; line-height:1.62; color:var(--body)}

/* the questions people actually arrive with */
.asks{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.ask{padding:28px; border-radius:16px; border:1px solid var(--hair); background:rgba(255,255,255,.55)}
.ask .role{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:12px;
}
.ask .q{font-size:19px; font-weight:650; letter-spacing:-.02em; line-height:1.34; margin-bottom:12px}
.ask .a{font-size:15px; line-height:1.62; color:var(--body)}
.ask .a b{color:var(--ink); font-weight:600}

/* solutions grid */
.solgrid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair);
  border:1px solid var(--hair); border-radius:18px; overflow:hidden;
}
.sol{background:rgba(255,255,255,.62); padding:24px 24px 26px; transition:background .2s}
.sol:hover{background:rgba(255,255,255,.92)}
.sol .n{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:10px;
}
.sol .t{font-size:17px; font-weight:650; letter-spacing:-.015em; margin-bottom:6px}
.sol .d{font-size:14px; line-height:1.55; color:var(--body)}

/* cost */
.costline{
  display:flex; align-items:baseline; gap:22px; flex-wrap:wrap;
  padding:36px 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  margin-bottom:30px;
}
.costline .from{
  font-size:46px; font-weight:700; letter-spacing:-.03em; color:var(--muted);
  text-decoration:line-through; text-decoration-thickness:2px; text-decoration-color:rgba(179,64,47,.5);
}
.costline .arrow{font-family:var(--mono); font-size:20px; color:var(--muted)}
.costline .to{font-size:46px; font-weight:700; letter-spacing:-.03em; color:var(--green)}

/* forensic chain */
.chain{font-family:var(--mono); font-size:12.5px; line-height:1.9}
.chain > div{
  display:grid; grid-template-columns:112px 1fr; gap:16px;
  padding:12px 0; border-top:1px solid var(--hair); align-items:baseline;
}
.chain > div:first-child{border-top:none}
.chain .w{color:var(--muted); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase}
.chain .x{color:var(--ink)}

/* spec table */
.spec{font-family:var(--mono); font-size:12.5px; line-height:2; color:var(--body)}
.spec > div{display:grid; grid-template-columns:70px 1fr; gap:14px; padding:5px 0; border-top:1px solid var(--hair)}
.spec > div:first-child{border-top:none}
.spec .k{color:var(--muted); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; padding-top:4px}
.spec .v{color:var(--ink)}

/* kill-switch */
.switchbar{
  padding:22px 26px; border-bottom:1px solid var(--hair);
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
  background:rgba(106,51,199,.03); transition:background .5s ease;
}
.switchbar.dead{background:rgba(179,64,47,.03)}
.status{display:flex; align-items:center; gap:12px}
.dot{
  width:9px; height:9px; border-radius:999px;
  background:var(--violet); box-shadow:0 0 0 5px rgba(106,51,199,.12); transition:all .4s ease;
}
.switchbar.dead .dot{background:var(--red); box-shadow:0 0 0 5px rgba(179,64,47,.12)}
.statustext{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--violet); font-weight:600; transition:color .4s;
}
.switchbar.dead .statustext{color:var(--red)}
.killbtn{
  font-family:var(--sans); font-size:14px; font-weight:650;
  padding:11px 20px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(179,64,47,.27); background:rgba(179,64,47,.06);
  color:var(--red); transition:all .25s ease;
}
.killbtn:hover{background:rgba(179,64,47,.11)}
.killbtn.resume{border-color:rgba(47,143,91,.27); background:rgba(47,143,91,.06); color:var(--green)}
.killbtn:disabled{cursor:wait; opacity:.7}

.split{display:grid; grid-template-columns:1fr 1fr}
.rail{padding:24px 26px 28px; min-height:238px}
.rail-left{border-right:1px solid var(--hair)}
.rail-right{background:linear-gradient(180deg, rgba(47,143,91,.04), transparent 70%)}
.railhead{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; flex-wrap:wrap}
.railtag{font-family:var(--mono); font-size:10.5px; color:var(--muted)}
.railtag.on{color:var(--green)}
.log{
  font-family:var(--mono); font-size:11.5px; line-height:1.7; color:var(--body);
  padding:5px 0; border-bottom:1px solid var(--hair); animation:row .3s ease both;
}
@keyframes row{from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none}}
.notrace{font-family:var(--mono); font-size:12px; line-height:1.9; color:var(--muted); padding-top:8px}
.notrace .head{color:var(--red); margin-bottom:10px}
.notrace .kicker{color:var(--ink); display:block; padding-top:8px}
.floornote{font-size:13.5px; line-height:1.6; color:var(--muted); padding-top:14px; transition:color .5s ease}
.floornote.dead{color:var(--green); font-weight:600}

/* rail diagram */
.railbox{
  padding:40px; border-radius:18px;
  background:linear-gradient(160deg, rgba(106,51,199,.05), var(--glass) 50%);
  border:1px solid rgba(106,51,199,.16);
  backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
}
.flow{display:flex; align-items:center; flex-wrap:wrap; font-family:var(--mono); font-size:12px; margin-bottom:32px}
.node{padding:12px 16px; border-radius:12px; background:rgba(255,255,255,.85); text-align:center; min-width:116px}
.node .l{font-weight:600; margin-bottom:3px}
.node .n{color:var(--muted); font-size:10px}
.node.v{border:1px solid rgba(106,51,199,.2)} .node.v .l{color:var(--violet)}
.node.i{border:1px solid var(--hair)}        .node.i .l{color:var(--ink)}
.node.g{border:1px solid rgba(47,143,91,.2)} .node.g .l{color:var(--green)}
.link{width:24px; height:1px; background:var(--hair); flex-shrink:0}

.facts{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.fact{padding:20px 22px; border-radius:14px; background:rgba(255,255,255,.66); border:1px solid var(--hair)}
.fact .h{font-size:15px; font-weight:650; margin-bottom:7px; letter-spacing:-.01em}
.fact .p{font-size:14px; line-height:1.6; color:var(--body)}

.statement{
  font-size:25px; line-height:1.44; letter-spacing:-.015em;
  color:var(--ink); margin:0 0 22px; font-weight:500; max-width:820px;
}

/* future / horizon */
.horizon{display:grid; gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:18px; overflow:hidden}
.hz{background:rgba(255,255,255,.62); padding:26px 28px; display:grid; grid-template-columns:130px 1fr; gap:24px; align-items:baseline}
.hz .when{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.hz .when.now{color:var(--green)}
.hz .what h3{margin-bottom:6px; font-size:19px}
.hz .what p{font-size:15px; line-height:1.6; color:var(--body)}

/* form */
form{max-width:500px}
.field{margin-bottom:16px}
.field label{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:7px; display:block;
}
.field input, .field textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--hair);
  background:rgba(255,255,255,.85); color:var(--ink); font-family:var(--sans); font-size:15px; outline:none;
}
.field textarea{resize:vertical; min-height:84px}
.namerow{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.sent{font-size:17px; line-height:1.6; color:var(--body); padding:30px 0}
.sent .big{font-size:21px; font-weight:650; color:var(--ink); margin-bottom:8px}
.sent code{font-family:var(--mono); font-size:15px; color:var(--green)}

/* footer */
footer{border-top:1px solid var(--hair)}
.foot{
  max-width:1120px; margin:0 auto; padding:40px 24px;
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
}
.foot .mark{font-family:var(--mono); font-size:12px; color:var(--muted)}
.foot .links{display:flex; gap:24px; align-items:center; flex-wrap:wrap}
.foot .links a{color:var(--muted); text-decoration:none; font-size:13px}
.foot .links a:hover{color:var(--ink)}
.foot .links a.mail{font-family:var(--mono)}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--violet); outline-offset:3px; border-radius:8px;
}

.rise{animation:rise .7s ease both}
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rise,.log{animation:none !important}
  .btn:hover{transform:none}
}

@media (max-width:900px){
  .solgrid, .three{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  section{padding:60px 20px}
  .split,.two,.twocard,.facts,.namerow,.asks,.three{grid-template-columns:1fr}
  .rail-left{border-right:none; border-bottom:1px solid var(--hair)}
  .navlinks{display:none}
  h1{font-size:36px}
  h2{font-size:27px}
  .punch{font-size:29px; padding:32px 0}
  .statement{font-size:20px}
  .railbox{padding:24px}
  .costline .from, .costline .to{font-size:32px}
  .hz{grid-template-columns:1fr; gap:10px}
}
@media (max-width:560px){
  .solgrid{grid-template-columns:1fr}
}