/* BLOCKEN 1:1-inspired landing */
/* Color picks approximated from the Canva: tweak as needed */
:root{
  --bg:#ECE9E2;           /* warm light paper */
  --ink:#08383D;          /* deep teal text */
  --muted:#2A5B5E;        /* slightly lighter teal for elements */
  --btn:#0E3F42;          /* button fill */
  --btn-press:#0B3437;
}

*{box-sizing:border-box}
html,body{height:100%}
html{font-size:16px}
body{
  margin:0;
  background-image: url("assets/images/background-texture.png");
  background-repeat: repeat;
  background-size: auto; /* or try 'contain' if you want original pixel size */
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  line-height:1.5;
}

/* Subtle paper texture using noise overlay (no external assets) */
body::before{
  content:'';
  position:fixed; inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(1000px 600px at 50% 20%, rgba(0,0,0,0.015), transparent 60%),
    radial-gradient(800px 500px at 50% 85%, rgba(0,0,0,0.02), transparent 70%);
  mix-blend-mode:multiply;
  opacity:0.9;
}

/* Layout */
.page{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:64px 16px 48px;
  gap:28px;
  text-align:center;
}

.brand h1{
  font-weight:700;
  letter-spacing:0.18em;
  font-size:1rem;
  margin:0;
  text-transform:uppercase;
  color: var(--ink);
  opacity:0.9;
}

.logo-wrap{
  display:flex; align-items:center; justify-content:center;
}
.logo{
  width:min(52vw, 520px);
  height:auto;
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}

/* Copy */
.copy{
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: var(--ink);
}
.copy p{margin:0.2rem 0}

/* CTA button */
.btn{
  display:inline-block;
  min-width:240px;
  padding:18px 28px;
  border-radius:999px;
  text-decoration:none;
  text-align:center;
  background: var(--btn);
  color: #EAF5F5;
  font-weight:600;
  letter-spacing:0.06em;
  box-shadow: 0 4px 0 var(--btn-press), 0 10px 24px rgba(0,0,0,0.08);
  transition: transform .06s ease, box-shadow .06s ease, filter .06s ease;
}
.btn:hover{transform: translateY(-1px)}
.btn:active{
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--btn-press), 0 4px 14px rgba(0,0,0,0.12);
  filter: brightness(0.98);
}

/* Social icons */
.social{
  display:flex; gap:28px; align-items:center; justify-content:center;
  margin-top:8px;
}
.social a{
  display:grid; place-items:center;
  width:48px; height:48px; border-radius:12px;
  background: transparent;
  transition: transform .08s ease, background .15s ease;
}
.social a svg{fill: var(--ink); opacity:0.9}
.social a:hover{transform: translateY(-2px)}
.social a:active{transform: translateY(1px)}

/* Responsiveness */
@media (max-width: 520px){
  .btn{min-width: 200px; padding:16px 24px}
  .social{gap:20px}
}
/* Subtle red line effect */
.btn, 
.social a {
  position: relative;
  overflow: hidden;
}

.btn::after, 
.social a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
  height: 2px; /* thin line */
  background: #9C2B2B; /* Runic Red */
  opacity: 0.4; /* subtle */
}
.social a::after {
	bottom: 22px;
}