:root{
  --blue: #8fd0ec;
  --blue-deep: #5fb6dc;
  --blue-text: #1f6e8c;
  --paper: #faf8f3;
  --charcoal: #14201d;
  --green: #5fb98a;
  --black: #000000;

  --shadow-sm: 4px 4px 0px 0px var(--black);
  --shadow-md: 6px 6px 0px 0px var(--black);
  --shadow-lg: 10px 10px 0px 0px var(--black);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }

::selection{
  background: var(--green);
  color: var(--black);
}
::-moz-selection{
  background: var(--green);
  color: var(--black);
}

body{
  background: var(--blue);
  color: var(--black);
  font-family:'Space Grotesk', sans-serif;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow-x:hidden;
  position:relative;
  padding: clamp(1rem, 4vw, 2.5rem);

  background-image:
    radial-gradient(rgba(0,0,0,0.09) 1.6px, transparent 1.6px);
  background-size: 30px 30px;
}

/* soft color wash so it isn't flat single-tone blue */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(60% 50% at 12% 10%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(50% 45% at 100% 100%, rgba(95,182,220,0.55), transparent 65%);
  pointer-events:none;
  z-index:0;
}

.frame{
  width:min(960px, 100%);
  background: var(--paper);
  border:2px solid var(--black);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.75rem, 5vw, 4rem);
  position:relative;
  z-index:2;
}

/* ---------- top row ---------- */
.top-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom: clamp(2.25rem, 8vw, 4.5rem);
  flex-wrap:wrap;
}

.logo{
  display:flex;
  align-items:center;
  gap:0.65rem;
}
.logo-mark{
  width:36px;
  height:36px;
  background: var(--black);
  border:2px solid var(--black);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.logo-mark svg{ width:17px; height:17px; }
.logo-text{
  font-weight:800;
  font-size:1.1rem;
  letter-spacing:-0.02em;
}

.status-pill{
  background: var(--blue);
  border:2px solid var(--black);
  border-radius:999px;
  padding:0.45rem 1rem;
  box-shadow: 3px 3px 0px 0px var(--black);
  font-family:'JetBrains Mono', monospace;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.04em;
  display:flex;
  align-items:center;
  gap:0.55rem;
  text-transform:uppercase;
  white-space:nowrap;
}
.status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background: var(--green);
  border:1px solid var(--black);
  animation: blink 1.4s infinite;
  flex-shrink:0;
}
@keyframes blink{
  0%,100%{ opacity:1; }
  50%{ opacity:0.25; }
}

/* ---------- headline ---------- */
.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: var(--blue-text);
  margin-bottom:1rem;
  display:flex;
  align-items:center;
  gap:0.6rem;
}
.eyebrow::before{
  content:"";
  width:22px;
  height:2px;
  background: var(--black);
  display:inline-block;
}

.headline{
  font-weight:800;
  font-size: clamp(2.5rem, 8vw, 5.25rem);
  line-height:0.96;
  letter-spacing:-0.03em;
  margin-bottom: clamp(2rem, 6vw, 3.25rem);
}
.headline .outline{
  -webkit-text-stroke: 2px var(--black);
  color: transparent;
}
.headline .fill-blue{
  color: var(--blue-text);
}

.error-message{
  font-size: 1.05rem;
  line-height:1.5;
  max-width:38ch;
  color: var(--charcoal);
  margin-bottom: clamp(2rem, 6vw, 3rem);
}

/* ---------- bottom row ---------- */
.bottom-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
  border-top:2px solid var(--black);
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
}

.domain-tag{
  background: var(--charcoal);
  color: var(--green);
  border:2px solid var(--black);
  box-shadow: var(--shadow-sm);
  padding:0.75rem 1.25rem;
  font-family:'JetBrains Mono', monospace;
  font-size:0.95rem;
  font-weight:700;
  letter-spacing:0.02em;
}

.contact-btn{
  background: var(--black);
  color: var(--paper);
  padding:0.95rem 1.7rem;
  border:2px solid var(--black);
  border-radius:0.75rem;
  box-shadow: var(--shadow-md);
  font-weight:700;
  font-size:0.95rem;
  display:inline-block;
  white-space:nowrap;
}

/* interactive variant of the same box, used for real links (e.g. error pages) */
.home-btn{
  background: var(--black);
  color: var(--paper);
  padding:0.95rem 1.7rem;
  border:2px solid var(--black);
  border-radius:0.75rem;
  box-shadow: var(--shadow-md);
  font-weight:700;
  font-size:0.95rem;
  text-decoration:none;
  transition: transform 0.2s cubic-bezier(0.175,0.885,0.32,1.275),
              box-shadow 0.2s cubic-bezier(0.175,0.885,0.32,1.275);
  display:inline-block;
  white-space:nowrap;
}
.home-btn:hover,
.home-btn:focus-visible{
  transform: translate(4px,4px);
  box-shadow: 2px 2px 0px 0px var(--black);
}
.home-btn:focus-visible{
  outline: 2px dashed var(--blue-text);
  outline-offset: 3px;
}

.corner-tag{
  position:absolute;
  top:-2px;
  right:28px;
  background: var(--green);
  color: var(--charcoal);
  border:2px solid var(--black);
  border-top:none;
  padding:0.4rem 0.9rem;
  font-family:'JetBrains Mono', monospace;
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
}

/* ---------- decorative corner blocks ---------- */
.deco{
  position:absolute;
  border:2px solid var(--black);
  z-index:1;
}
.deco-1{
  width:26px; height:26px;
  background: var(--green);
  top:-14px; left:-14px;
  transform:rotate(8deg);
}
.deco-2{
  width:18px; height:18px;
  background: var(--paper);
  bottom:22px; right:-11px;
  border-radius:50%;
}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .frame{
    padding: 1.5rem;
    box-shadow: 7px 7px 0px 0px var(--black);
  }
  .top-row{
    margin-bottom:2.25rem;
  }
  .headline{
    font-size: clamp(2.1rem, 11vw, 2.9rem);
  }
  .bottom-row{
    flex-direction:column;
    align-items:stretch;
  }
  .domain-tag,
  .contact-btn,
  .home-btn{
    text-align:center;
    width:100%;
  }
  .corner-tag{ display:none; }
  .deco-2{ display:none; }
}

@media (max-width:360px){
  .logo-text{ font-size:1rem; }
  .status-pill{ font-size:0.65rem; padding:0.4rem 0.75rem; }
}

@media (prefers-reduced-motion: reduce){
  .status-dot{ animation:none; }
}

/* ---------- text pressure (headline hover effect) ---------- */
.tp-word{
  display:inline-block;
}
.tp-char{
  display:inline-block;
  font-variation-settings:'wght' 700;
  transform: scaleX(1) skewX(0deg);
  transform-origin: center bottom;
}