/* Reys — getreys.com
   Editorial / institutional. Warm paper, deep ink, brass accent.
   Deliberately not SaaS-blue; deliberately no flag-and-camo imagery. */

:root{
  --ink:#141a24; --ink-2:#28323f; --ink-3:#586374; --ink-4:#8b94a3;
  --paper:#faf7f2; --paper-2:#f3eee5; --paper-3:#ebe4d7;
  --line:#e2dacd; --line-2:#cdc1ab;
  --brass:#96682f; --brass-lt:#c08d4d; --brass-pale:#f6ecdb;
  --sage:#4a5d52;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --measure:64ch;
  --step:clamp(4.5rem,3rem + 5vw,8.5rem);
  --r:10px;
  --sh-1:0 1px 2px rgba(20,26,36,.04), 0 4px 12px -6px rgba(20,26,36,.10);
  --sh-2:0 2px 4px rgba(20,26,36,.05), 0 16px 40px -18px rgba(20,26,36,.28);
  --sh-3:0 30px 70px -32px rgba(20,26,36,.42);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}
.wrap{position:relative; z-index:1; width:min(100% - 2.5rem,72rem); margin-inline:auto}
.narrow{position:relative; z-index:1; width:min(100% - 2.5rem,52rem); margin-inline:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif); font-weight:500; letter-spacing:-.018em; line-height:1.1; margin:0}
p{max-width:var(--measure)}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--brass); outline-offset:3px; border-radius:3px}

/* ---------- reveal on scroll ---------- */
.rv{transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.js .rv{opacity:0; transform:translateY(18px)}
.js .rv.in{opacity:1; transform:none}
.rv-d1{transition-delay:.07s}.rv-d2{transition-delay:.14s}.rv-d3{transition-delay:.21s}.rv-d4{transition-delay:.28s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important; animation:none!important}
  .js .rv{opacity:1; transform:none}
}

/* ---------- header ---------- */
header{border-bottom:1px solid var(--line); background:rgba(250,247,242,.86); backdrop-filter:blur(12px) saturate(1.2); position:sticky; top:0; z-index:30}
.bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0}
.mark{font-family:var(--serif); font-size:1.5rem; font-weight:600; letter-spacing:-.025em; text-decoration:none; display:inline-flex; align-items:baseline; gap:.45rem}
.mark i{width:7px;height:7px;border-radius:50%;background:var(--brass);display:inline-block;transform:translateY(-2px);font-style:normal;
        box-shadow:0 0 0 3px var(--brass-pale)}
.nav-right{display:flex; align-items:center; gap:1.75rem}
nav{display:flex; gap:1.6rem; font-size:.9rem}
nav a{color:var(--ink-3); text-decoration:none; padding-block:.2rem; position:relative; white-space:nowrap; transition:color .18s}
nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--brass); transition:right .25s cubic-bezier(.2,.7,.3,1)}
nav a:hover,nav a:focus-visible{color:var(--ink)} nav a:hover::after{right:0}
nav a[aria-current="page"]{color:var(--ink)} nav a[aria-current="page"]::after{right:0}
@media(max-width:860px){.nav-right .btn{display:none}}
@media(max-width:680px){nav{gap:1.1rem; font-size:.82rem}}
@media(max-width:520px){nav a:nth-child(n+4){display:none}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; font-weight:600; font-size:.95rem;
  padding:.9rem 1.55rem; border-radius:6px; text-decoration:none; border:1px solid transparent;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, background .18s, border-color .18s, color .18s;
  cursor:pointer; position:relative;
}
.btn .arw{transition:transform .22s cubic-bezier(.2,.7,.3,1); display:inline-block}
.btn:hover .arw{transform:translateX(4px)}
.btn-primary{background:var(--ink); color:var(--paper); box-shadow:var(--sh-1)}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--ink-2); transform:translateY(-2px); box-shadow:var(--sh-2)}
.btn-ghost{border-color:var(--line-2); color:var(--ink-2); background:rgba(255,255,255,.5)}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--brass); color:var(--ink); background:#fff; transform:translateY(-2px); box-shadow:var(--sh-1)}
.btn-sm{padding:.58rem 1.05rem; font-size:.875rem}
.btn-light{background:var(--paper); color:var(--ink)}
.btn-light:hover,.btn-light:focus-visible{background:#fff; transform:translateY(-2px); box-shadow:0 12px 30px -14px rgba(0,0,0,.5)}

/* ---------- type blocks ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.55rem; font-size:.76rem; letter-spacing:.1em;
  text-transform:uppercase; font-weight:600; color:var(--brass);
  border:1px solid var(--line-2); background:rgba(255,255,255,.6); padding:.45rem .85rem; border-radius:100px;
}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--brass);font-style:normal; position:relative}
.chip i::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--brass); opacity:.45; animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{transform:scale(.7);opacity:.6}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.eyebrow{font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--brass); margin:0 0 1rem; display:flex; align-items:center; gap:.7rem}
.eyebrow::after{content:""; height:1px; flex:1; background:linear-gradient(90deg,var(--line-2),transparent); max-width:5rem}
h1{font-size:clamp(2.5rem,1.5rem + 4.3vw,4.6rem); max-width:20ch}
h1 em{font-style:italic; color:var(--brass)}
h2{font-size:clamp(1.9rem,1.4rem + 2vw,2.9rem); max-width:24ch}
h3{font-size:1.2rem}
.lede{font-size:clamp(1.08rem,1rem + .5vw,1.3rem); color:var(--ink-2); max-width:54ch}
.sec-lede{color:var(--ink-3); max-width:var(--measure); font-size:1.05rem}

/* ---------- hero ---------- */
.hero{padding:clamp(3.5rem,2rem + 5vw,6.5rem) 0 var(--step); position:relative}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2rem,1rem + 4vw,5rem); align-items:center}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr; gap:3.5rem}}
.hero .chip{margin-bottom:1.75rem}
.hero h1{margin-bottom:1.5rem}
.hero .lede{margin:0 0 2.5rem}
.actions{display:flex; flex-wrap:wrap; gap:.85rem; align-items:center}
.hero-glow{position:absolute; z-index:0; width:min(46rem,88vw); height:min(46rem,88vw); right:max(-16rem,-22vw); top:-14rem; pointer-events:none;
  background:radial-gradient(circle, rgba(192,141,77,.16), rgba(192,141,77,0) 62%); filter:blur(8px)}

/* ---------- hero illustration (evidence file) ---------- */
.viz{position:relative; aspect-ratio:1/.92; max-width:32rem; margin-inline:auto; width:100%}
.viz .sheet{
  position:absolute; background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-2); overflow:hidden;
}
.viz .s-back{inset:6% 14% 26% 4%; transform:rotate(-4.5deg); opacity:.55}
.viz .s-mid {inset:10% 8% 20% 10%; transform:rotate(2.5deg); opacity:.8}
.viz .s-front{inset:14% 2% 8% 16%; box-shadow:var(--sh-3)}
.viz .hd{display:flex; align-items:center; gap:.4rem; padding:.7rem .85rem; border-bottom:1px solid var(--line); background:var(--paper-2)}
.viz .dot{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.viz .hd span{margin-left:auto; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); font-weight:600}
.viz .body{padding:.95rem .9rem; display:grid; gap:.42rem}
.viz .ln{height:6px; border-radius:3px; background:var(--paper-3)}
.viz .ln.scan{background:repeating-linear-gradient(90deg,var(--paper-3) 0 7px,transparent 7px 11px)}
.viz .ln.txt{background:var(--ink-4); opacity:.34}
.viz .ln.acc{background:var(--brass); opacity:.55}
/* scan sweep */
.viz .s-front::after{
  content:""; position:absolute; left:0; right:0; height:34%; top:-34%;
  background:linear-gradient(180deg,rgba(192,141,77,0),rgba(192,141,77,.20),rgba(192,141,77,0));
  animation:sweep 4.2s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes sweep{0%{top:-34%}62%{top:100%}100%{top:100%}}
/* condition tags */
.viz .tag{
  position:absolute; display:inline-flex; align-items:center; gap:.45rem; background:#fff;
  border:1px solid var(--line); border-radius:100px; padding:.42rem .8rem; font-size:.76rem; font-weight:600;
  color:var(--ink-2); box-shadow:var(--sh-2); white-space:nowrap;
}
.viz .tag b{width:6px;height:6px;border-radius:50%;background:var(--brass)}
.viz .t1{right:-2%; top:20%; animation:float 6s ease-in-out infinite}
.viz .t2{right:6%;  top:47%; animation:float 6s ease-in-out .9s infinite}
.viz .t3{left:-4%;  bottom:12%; animation:float 6s ease-in-out 1.8s infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media(max-width:520px){.viz .tag{font-size:.68rem; padding:.34rem .62rem}}

/* ---------- sections ---------- */
section{padding-block:var(--step)}
.sec-head{margin-bottom:3rem; max-width:46rem}
.sec-head h2{margin-bottom:1.15rem}
.rule{height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent)}

/* ---------- bento ---------- */
.bento{display:grid; gap:1.15rem; grid-template-columns:repeat(6,1fr)}
.bento > *{grid-column:span 2}
.bento .wide{grid-column:span 3}
.bento .feat{grid-column:span 6}
@media(max-width:900px){.bento{grid-template-columns:repeat(4,1fr)} .bento > *{grid-column:span 2} .bento .wide{grid-column:span 4} .bento .feat{grid-column:span 4}}
@media(max-width:600px){.bento{grid-template-columns:1fr} .bento > *,.bento .wide,.bento .feat{grid-column:span 1}}

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.85rem 1.7rem;
  transition:border-color .25s, transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
  position:relative; overflow:hidden;
}
.card::before{content:""; position:absolute; left:0; right:100%; top:0; height:2px; background:var(--brass); transition:right .35s cubic-bezier(.2,.7,.3,1)}
.card:hover{border-color:var(--line-2); transform:translateY(-3px); box-shadow:var(--sh-2)}
.card:hover::before{right:0}
.card h3{margin-bottom:.6rem}
.card p{margin:0; color:var(--ink-3); font-size:.95rem; max-width:46ch}
.card .ico{
  width:2.4rem;height:2.4rem;border-radius:8px;background:var(--brass-pale);border:1px solid #e8d8bf;
  display:grid;place-items:center;margin-bottom:1.1rem;color:var(--brass);font-size:1rem;
}
.card.feat{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:2rem; align-items:center; padding:2.25rem 2rem; background:linear-gradient(180deg,#fff,var(--paper-2))}
@media(max-width:760px){.card.feat{grid-template-columns:1fr}}
.card.feat h3{font-size:1.55rem; margin-bottom:.75rem}
.card.feat p{font-size:1rem; max-width:52ch}

/* mini API list inside feature card */
.api-list{display:grid; gap:.5rem}
.api-row{display:flex; align-items:center; gap:.65rem; background:#fff; border:1px solid var(--line); border-radius:6px; padding:.6rem .8rem; font-size:.82rem; color:var(--ink-2)}
.api-row b{width:5px;height:5px;border-radius:50%;background:var(--sage); flex:none}
.api-row code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.76rem; color:var(--ink-4); margin-left:auto}

/* ---------- process ---------- */
.flow{display:grid; gap:0; grid-template-columns:repeat(4,1fr); position:relative}
@media(max-width:860px){.flow{grid-template-columns:1fr}}
.flow .node{padding:0 1.5rem 0 0; position:relative}
.flow .node:not(:last-child)::after{
  content:""; position:absolute; top:1.15rem; left:2.6rem; right:.6rem; height:1px;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 5px,transparent 5px 10px);
}
@media(max-width:860px){
  .flow .node{padding:0 0 2rem 0}
  .flow .node:not(:last-child)::after{top:2.6rem; bottom:.4rem; left:1.15rem; right:auto; width:1px; height:auto;
    background:repeating-linear-gradient(180deg,var(--line-2) 0 5px,transparent 5px 10px)}
}
.flow .num{
  width:2.3rem;height:2.3rem;border-radius:50%;background:#fff;border:1px solid var(--line-2);
  display:grid;place-items:center;font-family:var(--serif);font-size:1rem;color:var(--brass);
  margin-bottom:1.1rem; position:relative; z-index:1; box-shadow:var(--sh-1);
}
.flow h3{font-size:1.08rem; margin-bottom:.4rem}
.flow p{margin:0; font-size:.92rem; color:var(--ink-3); max-width:30ch}

/* ---------- dark section ---------- */
.sec-dark{background:var(--ink); color:var(--paper); position:relative; overflow:hidden}
.sec-dark::before{content:""; position:absolute; width:min(40rem,80vw);height:min(40rem,80vw); left:max(-12rem,-18vw); bottom:-18rem;
  background:radial-gradient(circle,rgba(192,141,77,.13),transparent 62%)}
.sec-dark .eyebrow{color:var(--brass-lt)}
.sec-dark .eyebrow::after{background:linear-gradient(90deg,rgba(192,141,77,.5),transparent)}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-dark .sec-lede,.sec-dark p{color:#a7b1c0}
.sec-grid{display:grid; gap:2.5rem; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); align-items:center}
@media(max-width:900px){.sec-grid{grid-template-columns:1fr}}
.sec-list{list-style:none; margin:0; padding:0; display:grid; gap:1.35rem}
.sec-list li{padding-left:1.5rem; position:relative; color:#b8c1cd; font-size:.95rem; max-width:44ch}
.sec-list li::before{content:""; position:absolute; left:0; top:.62em; width:7px;height:1px; background:var(--brass-lt)}
.sec-list strong{color:#fff; font-weight:600; display:block; margin-bottom:.2rem; font-size:1rem}

/* audit-chain visual */
.chain{display:grid; gap:.55rem}
.chain .blk{
  display:flex; align-items:center; gap:.8rem; padding:.85rem 1rem; border-radius:8px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09); position:relative;
}
.chain .blk::after{content:""; position:absolute; left:1.62rem; top:100%; height:.55rem; width:1px; background:rgba(192,141,77,.5)}
.chain .blk:last-child::after{display:none}
.chain .hash{width:1.5rem;height:1.5rem;border-radius:5px;background:rgba(192,141,77,.16);border:1px solid rgba(192,141,77,.35);
  display:grid;place-items:center;font-size:.6rem;color:var(--brass-lt);font-family:ui-monospace,monospace; flex:none}
.chain .meta{font-size:.82rem;color:#c3ccd8}
.chain .meta b{display:block;color:#fff;font-weight:500;font-size:.88rem}
.chain .ok{margin-left:auto;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:#7fa88c;font-weight:600}

/* ---------- panel ---------- */
.panel{
  border:1px solid var(--line-2); border-radius:14px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--paper-2),#fff 60%);
  padding:clamp(2rem,1.3rem + 2.4vw,3.25rem); display:grid; gap:1.75rem;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:center; box-shadow:var(--sh-1);
}
.panel::before{content:""; position:absolute; width:22rem;height:22rem; right:-8rem; top:-10rem;
  background:radial-gradient(circle,rgba(192,141,77,.14),transparent 65%)}
.panel > *{position:relative}
.panel h2{font-size:clamp(1.6rem,1.3rem + 1.4vw,2.2rem); margin-bottom:.8rem}
.panel p{margin:0; color:var(--ink-3)}
.panel .right{justify-self:end}
@media(max-width:780px){.panel{grid-template-columns:1fr} .panel .right{justify-self:start}}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{
  cursor:pointer; list-style:none; padding:1.5rem 2.75rem 1.5rem 0; position:relative;
  font-family:var(--serif); font-size:1.16rem; font-weight:500; letter-spacing:-.012em; transition:color .18s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:.4rem; top:50%; width:13px; height:13px; margin-top:-6px;
  background:
    linear-gradient(var(--brass),var(--brass)) center/13px 1.5px no-repeat,
    linear-gradient(var(--brass),var(--brass)) center/1.5px 13px no-repeat;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq summary:hover{color:var(--brass)}
.faq .answer{padding:0 0 1.7rem; color:var(--ink-3)}
.faq .answer p{margin:0 0 .9rem; font-size:.98rem}
.faq .answer p:last-child{margin-bottom:0}

/* ---------- disclaimer ---------- */
.disclaimer{
  border:1px solid var(--line); border-left:3px solid var(--brass); background:#fff;
  border-radius:8px; padding:1.7rem 1.8rem; box-shadow:var(--sh-1);
}
.disclaimer h3{font-family:var(--sans); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--brass); margin-bottom:.8rem}
.disclaimer p{margin:0 0 .8rem; font-size:.9rem; color:var(--ink-3); max-width:none}
.disclaimer p:last-child{margin-bottom:0}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:3.5rem 0 3.5rem; font-size:.875rem; color:var(--ink-3); background:var(--paper-2); position:relative; z-index:1}
.foot-grid{display:grid; gap:2.5rem; grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr)); margin-bottom:2.75rem}
@media(max-width:640px){.foot-grid{grid-template-columns:1fr 1fr; gap:2rem}}
.foot-grid h4{font-family:var(--sans); font-size:.74rem; letter-spacing:.11em; text-transform:uppercase; font-weight:600; color:var(--ink); margin-bottom:1rem}
.foot-grid ul{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.foot-grid a{color:var(--ink-3); text-decoration:none; border-bottom:1px solid transparent; transition:color .18s,border-color .18s}
.foot-grid a:hover{color:var(--ink); border-color:var(--brass)}
.foot-bottom{border-top:1px solid var(--line); padding-top:1.85rem; display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between; font-size:.82rem; color:var(--ink-4)}
.foot-note{max-width:44ch; font-size:.86rem; color:var(--ink-4); margin:.75rem 0 0}

/* ---------- page head (inner pages) ---------- */
.page-head{padding:clamp(3rem,2rem + 3vw,5rem) 0 clamp(2.5rem,1.5rem + 2.5vw,3.5rem); position:relative}
.page-head h1{font-size:clamp(2.1rem,1.5rem + 2.7vw,3.5rem); margin-bottom:1.1rem}
.grid-2{display:grid; gap:1.15rem; grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))}
.grid{display:grid; gap:1.15rem; grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr))}
ol.steps{list-style:none; counter-reset:s; margin:0; padding:0}
ol.steps li{counter-increment:s; display:grid; grid-template-columns:3.5rem 1fr; gap:1.5rem; padding:1.95rem 0; border-bottom:1px solid var(--line); align-items:start}
ol.steps li:first-child{border-top:1px solid var(--line)}
ol.steps li::before{content:counter(s,decimal-leading-zero); font-family:var(--serif); font-size:1.5rem; color:var(--brass); line-height:1}
ol.steps h3{margin-bottom:.4rem; font-size:1.15rem}
ol.steps p{margin:0; color:var(--ink-3); max-width:58ch; font-size:.96rem}
@media(max-width:520px){ol.steps li{grid-template-columns:2.4rem 1fr; gap:1rem}}