/* bullnet.ai — holding page.
   Sub-brand of BullPrint Net: same tokens, same type, no separate mark, always
   subordinate (BRAND_KIT.md). Every value below is the master brand's. */

:root{
  --bg:#07060C;
  --fg-1:#F3F1FA;
  --fg-2:#A7A3BC;
  --fg-3:#6E6A83;
  --hair:rgba(255,255,255,.08);
  --step-1:#221E31;
  --wrap:1240px;
  --pad:clamp(20px,4vw,40px);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--fg-1);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--fg-1);text-decoration:none}
h1,p{margin:0}
::selection{background:var(--fg-1);color:var(--bg)}

.shell{min-height:100vh;display:flex;flex-direction:column;position:relative;overflow:hidden}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);width:100%}

/* 56px hairline grid, drawn in CSS — no image request. */
.grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:56px 56px;
}

/* ------------------------------------------------------------------ header */
.hd{position:relative;border-bottom:1px solid var(--hair)}
.hd__in{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.wordmark{font-size:14px;font-weight:600;letter-spacing:.06em}
.wordmark__tld{color:var(--fg-3)}
.parent{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--fg-3);
  text-transform:uppercase;transition:color .2s;text-align:right}
.parent:hover{color:var(--fg-1)}

/* -------------------------------------------------------------------- main */
.main{position:relative;flex:1;display:flex;align-items:center;
  padding:clamp(64px,10vh,120px) 0}

.status{display:flex;align-items:center;gap:12px;margin-bottom:32px;
  font-family:var(--mono);font-size:12px;letter-spacing:.3em;color:var(--fg-2);
  text-transform:uppercase}
.dot{width:7px;height:7px;border-radius:50%;background:var(--fg-1);flex:none;
  animation:bp-pulse 2.4s ease-in-out infinite}
@keyframes bp-pulse{0%,100%{opacity:.2}50%{opacity:1}}

h1{font-size:clamp(56px,9vw,128px);font-weight:600;letter-spacing:-.03em;line-height:.96;
  margin-bottom:12px}

.domain{font-family:var(--mono);font-size:clamp(13px,1.6vw,17px);letter-spacing:.14em;
  color:var(--fg-3);margin-bottom:40px}
.caret{display:inline-block;width:.55em;height:1.1em;background:var(--fg-3);
  margin-left:6px;vertical-align:text-bottom;animation:bp-cursor 1.1s step-end infinite}
@keyframes bp-cursor{0%,49%{opacity:1}50%,100%{opacity:0}}

.lede{max-width:520px;font-size:clamp(15px,1.6vw,18px);line-height:1.65;
  color:var(--fg-2);text-wrap:pretty;margin-bottom:48px}

.rail{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin-bottom:56px;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--fg-3);
  text-transform:uppercase}
.rail i{font-style:normal;color:var(--step-1)}

.cta{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.btn{display:inline-block;background:var(--fg-1);color:var(--bg);border-radius:2px;
  font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:16px 30px;transition:background-color .2s}
.btn:hover{background:#fff;color:var(--bg)}
.monolink{font-family:var(--mono);font-size:12px;color:var(--fg-3);transition:color .2s}
.monolink:hover{color:var(--fg-1)}

/* ------------------------------------------------------------------ footer */
.ft{position:relative;border-top:1px solid var(--hair)}
.ft__in{padding-top:24px;padding-bottom:24px;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:12px;font-family:var(--mono);font-size:11px;
  color:var(--fg-3)}

/* A blinking caret and a pulsing dot are exactly what this setting exists to
   stop. Both hold at full opacity instead of animating. */
@media (prefers-reduced-motion:reduce){
  .dot,.caret{animation:none;opacity:1}
  *{transition-duration:.01ms!important}
}