/* =========================================================
   PREMIUM DOMAIN LANDING (Cloudflare Pages)
   Files:
   - index.html
   - styles.css
   - app.js
   - assets/favicon.svg

   Notes:
   - Dark, sophisticated, typewriter feel
   - Responsive (mobile + desktop)
   - No “for sale” language
   ========================================================= */

:root{
  /* --- COLORS (EDIT THESE) --- */
  --bg0:#06070a;
  --bg1:#0b0e14;
  --ink:#eef1f6;
  --muted:rgba(238,241,246,0.70);
  --faint:rgba(238,241,246,0.18);
  --line:rgba(238,241,246,0.10);
  --accent:#c8b88a;   /* warm brass */
  --accent2:#7db8ff;  /* cool highlight */
  --card:rgba(255,255,255,0.035);
  --card2:rgba(255,255,255,0.065);
  --shadow:rgba(0,0,0,0.55);

  /* --- TYPEWRITER FEEL --- */
  --mono:"Courier New", Courier, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --serif:ui-serif, Georgia, "Times New Roman", Times, serif;

  /* --- SIZING --- */
  --radius:18px;
  --pad:clamp(16px, 4vw, 26px);
  --maxw:980px;
}

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

body{
  margin:0;
  background:
    radial-gradient(1200px 700px at 12% 18%, rgba(125,184,255,0.11), transparent 55%),
    radial-gradient(900px 650px at 80% 28%, rgba(200,184,138,0.09), transparent 52%),
    radial-gradient(900px 750px at 50% 90%, rgba(255,255,255,0.045), transparent 58%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color:var(--ink);
  font-family:var(--mono);
  letter-spacing:0.2px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Subtle film grain + vignette (no images) */
body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
}
body::before{
  background:
    radial-gradient(800px 420px at 50% 15%, rgba(0,0,0,0.0), rgba(0,0,0,0.42)),
    radial-gradient(900px 520px at 50% 92%, rgba(0,0,0,0.0), rgba(0,0,0,0.62));
  mix-blend-mode:multiply;
}
body::after{
  opacity:0.22;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 4px);
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:4px; }

.wrap{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:clamp(18px, 5vw, 44px);
  position:relative;
  z-index:1;
}

.frame{
  width:100%;
  max-width:var(--maxw);
  border-radius:calc(var(--radius) + 10px);
  background:
    linear-gradient(180deg, var(--card), transparent 55%),
    radial-gradient(800px 300px at 25% 10%, rgba(125,184,255,0.08), transparent 55%),
    radial-gradient(800px 300px at 75% 10%, rgba(200,184,138,0.08), transparent 55%);
  box-shadow:0 30px 90px var(--shadow);
  border:1px solid rgba(255,255,255,0.08);
  overflow:hidden;
  position:relative;
}

.topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px var(--pad);
  border-bottom:1px solid var(--line);
  background:rgba(0,0,0,0.12);
  backdrop-filter:blur(10px);
}

.mark{
  display:inline-flex;
  gap:10px;
  align-items:center;
  font-size:12px;
  color:var(--muted);
  letter-spacing:0.12em;
  text-transform:uppercase;
  user-select:none;
}

.dot{
  width:9px;
  height:9px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--accent), rgba(200,184,138,0.25));
  box-shadow:0 0 0 3px rgba(200,184,138,0.10);
}

.host{
  font-size:12px;
  color:var(--muted);
  letter-spacing:0.08em;
  user-select:text;
}

.content{
  padding:clamp(22px, 6vw, 54px) var(--pad) clamp(18px, 5vw, 34px);
  display:grid;
  gap:clamp(16px, 4vw, 28px);
}

.name{
  font-family:var(--serif); /* change to var(--mono) if you want pure typewriter */
  font-weight:600;
  line-height:0.95;
  letter-spacing:0.01em;
  font-size:clamp(44px, 6.2vw, 86px);
  margin:0;
  text-align:center;
}

.name .accent{
  background:linear-gradient(90deg, var(--ink), rgba(238,241,246,0.88), var(--accent));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.tagline{
  margin:0 auto;
  max-width:48ch;
  text-align:center;
  color:var(--muted);
  font-size:clamp(14px, 1.8vw, 18px);
  line-height:1.7;
}
.tagline .line{
  display:block;
  padding:2px 0;
}

.divider{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  margin:0 auto;
  width:min(620px, 92%);
}

.cta{
  display:grid;
  gap:12px;
  place-items:center;
  text-align:center;
}

.ctaLabel{
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--muted);
}

.contactRow{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:12px 14px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,0.10);
  background:linear-gradient(180deg, var(--card2), rgba(255,255,255,0.02));
  box-shadow:0 14px 36px rgba(0,0,0,0.35);
  max-width:100%;
}

.email{
  font-size:14px;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:min(70vw, 460px);
}

.pillBtn{
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.22);
  color:var(--muted);
  font-family:var(--mono);
  font-size:12px;
  padding:10px 12px;
  border-radius:999px;
  cursor:pointer;
  transition:transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.pillBtn:hover{ background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.18); transform:translateY(-1px); }
.pillBtn:active{ transform:translateY(0px); }
.pillBtn:focus{ outline:2px solid rgba(125,184,255,0.55); outline-offset:2px; }

.note{
  margin:0;
  max-width:64ch;
  color:rgba(238,241,246,0.62);
  font-size:13px;
  line-height:1.7;
}

.prose{
  margin:0 auto;
  max-width:74ch;
  color:rgba(238,241,246,0.70);
  font-size:14px;
  line-height:1.8;
  border-top:1px dashed rgba(255,255,255,0.12);
  padding-top:18px;
}
.prose p{ margin:0 0 14px; }
.prose p:last-child{ margin-bottom:0; }

.foot{
  display:grid;
  gap:8px;
  padding:16px var(--pad);
  border-top:1px solid var(--line);
  color:rgba(238,241,246,0.55);
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  text-align:center;
  background:rgba(0,0,0,0.10);
}

/* Tiny toast */
.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.55);
  color:rgba(238,241,246,0.80);
  font-size:12px;
  letter-spacing:0.06em;
  opacity:0;
  pointer-events:none;
  transition:opacity 180ms ease, transform 180ms ease;
  z-index:20;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-4px); }

/* Mobile niceties */
@media (max-width:420px){
  .host{ display:none; }
  .email{ max-width:62vw; }
  .contactRow{ gap:8px; padding:11px 12px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .pillBtn{ transition:none; }
  .toast{ transition:none; }
}