@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ---------- Tokens ---------- */
:root{
  --ink:        #0F1B2B;
  --ink-2:      #14263B;
  --ink-3:      #1B3049;
  --paper:      #F3EFE6;
  --paper-dim:  #AEB9C8;
  --paper-faint:#7C8898;
  --brass:      #C9A227;
  --brass-soft: #E4C567;
  --teal:       #4C8C82;
  --line:       rgba(243,239,230,0.14);
  --line-soft:  rgba(243,239,230,0.07);

  --display: 'Fraunces', serif;
  --body: 'Inter', sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --max: 1180px;
  --pad: clamp(24px, 5vw, 64px);
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
}

/* Blueprint grid backdrop */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events:none;
  z-index:0;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 40%, transparent 90%);
}

a{color:inherit;text-decoration:none;}
ul{list-style:none;}
img{max-width:100%;display:block;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad);position:relative;z-index:1;}

::selection{background:var(--brass);color:var(--ink);}

/* ---------- Cursor glow ---------- */
#cursor-glow{
  position:fixed;
  width:520px;height:520px;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(circle, rgba(201,162,39,0.07) 0%, transparent 70%);
  transform:translate(-50%,-50%);
  transition:opacity .3s ease;
  opacity:0;
}
@media(hover:hover){ #cursor-glow{opacity:1;} }

/* ---------- Nav ---------- */
header.site-nav{
  position:sticky;top:0;
  z-index:50;
  background:rgba(15,27,43,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:20px var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.brand .name{
  font-family:var(--display);
  font-weight:600;
  font-size:1.15rem;
  letter-spacing:0.01em;
}
.brand .role{
  font-family:var(--mono);
  font-size:0.62rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--brass);
  margin-top:2px;
}
nav.links{
  display:flex;
  gap:36px;
  align-items:center;
}
nav.links a{
  font-family:var(--mono);
  font-size:0.75rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--paper-dim);
  position:relative;
  padding:4px 0;
  transition:color .25s ease;
}
nav.links a::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:0;height:1px;
  background:var(--brass);
  transition:width .3s ease;
}
nav.links a:hover,
nav.links a.active{color:var(--paper);}
nav.links a:hover::after,
nav.links a.active::after{width:100%;}
nav.links a.active{color:var(--brass-soft);}

.nav-cta{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border:1px solid var(--brass);
  color:var(--brass-soft);
  padding:9px 18px;
  transition:all .3s ease;
  white-space:nowrap;
}
.nav-cta:hover{background:var(--brass);color:var(--ink);}

.nav-toggle{display:none;}

/* ---------- Section basics ---------- */
section{position:relative;z-index:1;padding:96px 0;}
.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--brass);
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:28px;height:1px;
  background:var(--brass);
  display:inline-block;
}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-0.01em;}
h1{font-size:clamp(2.6rem, 6vw, 4.6rem);line-height:1.02;}
h2{font-size:clamp(1.9rem, 4vw, 2.7rem);line-height:1.1;}
h3{font-size:1.3rem;}
p.lede{font-size:1.15rem;color:var(--paper-dim);max-width:640px;}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:15px 28px;
  border:1px solid var(--brass);
  transition:all .3s ease;
}
.btn-solid{background:var(--brass);color:var(--ink);}
.btn-solid:hover{background:var(--brass-soft);border-color:var(--brass-soft);}
.btn-ghost{color:var(--paper);}
.btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.btn svg{width:14px;height:14px;transition:transform .3s ease;}
.btn:hover svg{transform:translate(3px,-3px);}

/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.in{opacity:1;transform:translateY(0);}

/* ---------- Footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding:56px 0 40px;
  position:relative;
  z-index:1;
}
.footer-grid{
  display:flex;
  flex-wrap:wrap;
  gap:32px;
  justify-content:space-between;
  align-items:flex-end;
}
.footer-brand .name{font-family:var(--display);font-size:1.4rem;font-weight:600;}
.footer-brand .tag{font-family:var(--mono);font-size:0.72rem;color:var(--paper-faint);margin-top:6px;letter-spacing:0.05em;}
.footer-links{display:flex;gap:40px;flex-wrap:wrap;}
.footer-col{display:flex;flex-direction:column;gap:10px;}
.footer-col .head{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--brass);margin-bottom:4px;}
.footer-col a, .footer-col span{font-size:0.88rem;color:var(--paper-dim);transition:color .25s ease;}
.footer-col a:hover{color:var(--paper);}
.footer-bottom{
  margin-top:48px;
  padding-top:24px;
  border-top:1px solid var(--line-soft);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  font-family:var(--mono);
  font-size:0.7rem;
  color:var(--paper-faint);
  letter-spacing:0.05em;
}

/* ---------- Corner-tick card device (signature element) ---------- */
.tick-card{
  position:relative;
  border:1px solid var(--line);
  background:linear-gradient(180deg, var(--ink-2), var(--ink));
  padding:32px;
  transition:border-color .35s ease, transform .35s ease, background .35s ease;
}
.tick-card::before,.tick-card::after,
.tick-card .tick-tr,.tick-card .tick-br{
  content:"";
  position:absolute;
  width:14px;height:14px;
  border:1px solid transparent;
  opacity:0;
  transition:opacity .35s ease, width .35s ease, height .35s ease;
}
.tick-card::before{top:-1px;left:-1px;border-top-color:var(--brass);border-left-color:var(--brass);}
.tick-card::after{bottom:-1px;right:-1px;border-bottom-color:var(--brass);border-right-color:var(--brass);}
.tick-card .tick-tr{top:-1px;right:-1px;border-top-color:var(--brass);border-right-color:var(--brass);}
.tick-card .tick-br{bottom:-1px;left:-1px;border-bottom-color:var(--brass);border-left-color:var(--brass);}
.tick-card:hover{transform:translateY(-4px);border-color:var(--line-soft);}
.tick-card:hover::before,.tick-card:hover::after,
.tick-card:hover .tick-tr,.tick-card:hover .tick-br{opacity:1;width:20px;height:20px;}

/* ---------- responsive ---------- */
@media (max-width:860px){
  nav.links{
    position:fixed;
    top:0;right:0;
    height:100vh;
    width:min(320px,80vw);
    background:var(--ink-2);
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:28px;
    padding:40px;
    transform:translateX(100%);
    transition:transform .4s cubic-bezier(.2,.7,.2,1);
    border-left:1px solid var(--line);
  }
  nav.links.open{transform:translateX(0);}
  .nav-toggle{
    display:flex;
    flex-direction:column;
    gap:5px;
    background:none;border:none;cursor:pointer;
    z-index:60;
    padding:8px;
  }
  .nav-toggle span{width:22px;height:1.5px;background:var(--paper);display:block;transition:all .3s ease;}
  .nav-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
  .nav-cta{display:none;}
}