/* enjeneer.win homepage. Black page, white type, one accent per app. */

:root{
  --bg:#000;
  --fg:#fff;
  --muted:#b6b6b9;
  --dim:#8a8a90;
  --faint:#6a6a70;
  --line:rgba(255,255,255,.14);
  --line-strong:rgba(255,255,255,.38);
  --card:rgba(255,255,255,.025);
  --card-hover:rgba(255,255,255,.055);
  --pink:#ff0066;
  --sans:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',
         Roboto,'Helvetica Neue',Arial,sans-serif;
  --display:'Space Grotesk',var(--sans);
  --maxw:920px;
  --gutter:clamp(20px,5vw,40px);
  --ease:cubic-bezier(.22,.68,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.sprite{display:none}

/* A soft wash behind the masthead so the page is not a flat void. */
.glow{
  position:absolute;
  inset:0 0 auto;
  height:620px;
  pointer-events:none;
  background:
    radial-gradient(70% 100% at 50% -10%,rgba(255,255,255,.10),transparent 68%),
    radial-gradient(38% 60% at 78% 4%,rgba(255,0,102,.11),transparent 70%);
}

/* ---------- masthead ---------- */

.masthead{
  position:relative;
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(64px,13vh,120px) var(--gutter) clamp(40px,6vh,64px);
}

.wordmark{
  margin:0;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.6rem,10.5vw,4.6rem);
  line-height:1;
  letter-spacing:-.045em;
}
.wordmark .dot{color:var(--pink)}
.wordmark .tld{color:var(--faint);font-weight:500}

.kicker{
  margin:18px 0 0;
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.28em;
  color:var(--dim);
}

.intro{
  margin:24px 0 0;
  max-width:46ch;
  font-size:clamp(1rem,2.4vw,1.075rem);
  line-height:1.65;
  color:var(--muted);
}

/* ---------- sections ---------- */

.wrap{
  position:relative;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
}

.section + .section{margin-top:clamp(48px,7vh,72px)}

.section-title{
  display:flex;
  align-items:center;
  gap:18px;
  margin:0 0 22px;
  font-size:.7rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.24em;
  color:var(--dim);
}
.section-title::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}

.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
@media (min-width:760px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
}

/* ---------- cards ---------- */

/* One accent per app, set on the card so the icon and tagline both pick it up.
   Adding an app means adding a rule here and a class on its <article>. */
.a-tr4ck  {--accent:#39c46e}
.a-mash   {--accent:#46c7b8}
.a-designs{--accent:#ff0066}
.a-iconic {--accent:#f0913f}

.card{
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--card);
  overflow:hidden;
}

.card-link{
  display:flex;
  gap:18px;
  height:100%;
  padding:22px;
  color:inherit;
  text-decoration:none;
  transition:background .22s var(--ease),transform .22s var(--ease);
}

a.card-link:hover{background:var(--card-hover)}
.card:has(a.card-link:hover){border-color:var(--line-strong);transform:translateY(-2px)}
.card{transition:border-color .22s var(--ease),transform .22s var(--ease)}

a.card-link:focus-visible{
  outline:2px solid #fff;
  outline-offset:-2px;
  border-radius:17px;
}

.icon{
  flex:0 0 auto;
  width:56px;
  height:56px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
  object-fit:cover;
  /* The real app icons are light tiles, so knock the glare back a little and
     bring them fully up on hover, the way a home screen icon lights up. */
  filter:saturate(.96) brightness(.94);
  transition:filter .22s var(--ease);
}
a.card-link:hover .icon{filter:none}
.is-soon .icon{filter:saturate(.9) brightness(.9)}

.body{display:flex;flex-direction:column;min-width:0}

.head{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:26px;
}

.name{
  font-family:var(--display);
  font-weight:700;
  font-size:1.18rem;
  letter-spacing:-.02em;
  line-height:1.25;
}

.go{
  width:15px;
  height:15px;
  flex:0 0 auto;
  fill:none;
  stroke:var(--faint);
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:stroke .22s var(--ease),transform .22s var(--ease);
}
a.card-link:hover .go{stroke:#fff;transform:translate(2px,-2px)}

.badge{
  font-size:.6rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--dim);
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px 9px;
  white-space:nowrap;
}

.tagline{
  margin-top:5px;
  font-size:.68rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.17em;
  color:var(--accent,var(--dim));
}

.desc{
  margin-top:11px;
  font-size:.925rem;
  line-height:1.62;
  color:var(--muted);
}

.host{
  margin-top:14px;
  font-size:.75rem;
  letter-spacing:.02em;
  color:var(--faint);
}

.is-soon .name{color:#e6e6e8}

/* ---------- footer ---------- */

.foot{
  max-width:var(--maxw);
  margin:clamp(56px,9vh,96px) auto 0;
  padding:22px var(--gutter) 48px;
  border-top:1px solid var(--line);
}
.foot p{
  margin:0;
  font-size:.78rem;
  color:var(--faint);
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .card:has(a.card-link:hover){transform:none}
  a.card-link:hover .go{transform:none}
}