/* =====================================================================
   PaveDynamics — landing
   Brand: deep forest green system, Archivo, sheared paving-bar motif.
   Tokens mirror the main site so both surfaces read as one system.
   ===================================================================== */

/* ------------------------------ Tokens ------------------------------ */
:root{
  --deep:#1C3A29;      /* deep forest green */
  --mid:#2F6B45;       /* mid green */
  --sage:#8FBC9C;      /* sage */
  --halftone:#5E8F73;  /* half-tone green */
  --ink:#111111;       /* near-black */
  --paper:#F7F7F4;     /* paper */

  --bg:var(--paper);
  --on-bg:var(--ink);
  --line:rgba(17,17,17,0.09);

  --font:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.24s;

  --z-cursor:2000;
}

/* ------------------------------ Reset ------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--on-bg);
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}
img,svg{display:block;max-width:100%;}
img{height:auto;}
a{color:var(--mid);text-decoration:none;}

/* ------------------------------ Stage ------------------------------- */
.stage{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:var(--s7) var(--s5);
}

/* --------------------------- Lane motif ----------------------------- */
.lanes{
  position:absolute;
  inset:-10% -14%;
  z-index:0;
  pointer-events:none;
  transform:skewX(-16deg) scale(1.14);
  transform-origin:center;
  overflow:hidden;
}
.lane{position:absolute;left:-30%;right:-30%;overflow:hidden;}
.lane__move{
  position:absolute;
  inset:0;
  width:260%;
  will-change:transform;
  animation:laneDrift linear infinite;
}
/* One gradient period (200px) per cycle keeps every lane seamless. */
@keyframes laneDrift{to{transform:translateX(-200px);}}

.lane--1{top:9%;height:26px;}
.lane--1 .lane__move{background:repeating-linear-gradient(to right,rgba(143,188,156,.16) 0 64px,transparent 64px 200px);animation-duration:36s;}
.lane--2{top:23%;height:40px;}
.lane--2 .lane__move{background:repeating-linear-gradient(to right,rgba(47,107,69,.12) 0 96px,transparent 96px 200px);animation-duration:52s;}
.lane--3{top:39%;height:18px;}
.lane--3 .lane__move{background:repeating-linear-gradient(to right,rgba(28,58,41,.10) 0 48px,transparent 48px 200px);animation-duration:28s;}
.lane--4{top:55%;height:32px;}
.lane--4 .lane__move{background:repeating-linear-gradient(to right,rgba(94,143,115,.13) 0 78px,transparent 78px 200px);animation-duration:44s;}
.lane--5{top:71%;height:22px;}
.lane--5 .lane__move{background:repeating-linear-gradient(to right,rgba(143,188,156,.17) 0 58px,transparent 58px 200px);animation-duration:32s;}
.lane--6{top:86%;height:44px;}
.lane--6 .lane__move{background:repeating-linear-gradient(to right,rgba(47,107,69,.08) 0 108px,transparent 108px 200px);animation-duration:56s;}

/* Fade the motif at the edges and lift contrast behind the lockup. */
.veil{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(62% 52% at 50% 46%, rgba(247,247,244,.92) 0%, rgba(247,247,244,.55) 45%, rgba(247,247,244,0) 78%),
    linear-gradient(180deg, rgba(247,247,244,.80) 0%, rgba(247,247,244,0) 26%, rgba(247,247,244,0) 72%, rgba(247,247,244,.88) 100%);
}

/* ----------------------------- Content ------------------------------ */
.content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:var(--s6);
  width:100%;
}

.lockup{
  width:min(560px,82vw);
  height:auto;
}

.rule{
  display:block;
  width:56px;
  height:2px;
  background:var(--sage);
}

/* ----------------------------- Contact ------------------------------ */
.contact{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:var(--s2) var(--s5);
}

.contact__item{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;               /* comfortable touch target */
  padding:6px 10px;
  margin:-6px -10px;             /* keep optical alignment tight */
  border-radius:4px;
  color:var(--ink);
  font-size:17px;
  font-weight:500;
  letter-spacing:.01em;
  line-height:1.2;
  cursor:pointer;
  transition:color var(--dur) var(--ease-out);
}
.contact__item:hover,
.contact__item:focus-visible{color:var(--mid);}
.contact__item:hover .contact__icon,
.contact__item:focus-visible .contact__icon{color:var(--deep);}
.contact__item:focus-visible{
  outline:2px solid var(--mid);
  outline-offset:3px;
}

.contact__icon{
  width:18px;
  height:18px;
  flex:none;
  color:var(--halftone);
  transition:color var(--dur) var(--ease-out);
}

.contact__label{white-space:nowrap;}

.contact__sep{
  width:1px;
  height:18px;
  background:var(--line);
}

/* --------------------------- Entrance ------------------------------- */
@keyframes riseIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.lockup,.rule,.contact{animation:riseIn .48s var(--ease-out) both;}
.lockup{animation-delay:.04s;}
.rule{animation-delay:.16s;}
.contact{animation-delay:.24s;}

/* --------------------------- Custom cursor -------------------------- */
.cursor,.cursor-dot{
  position:fixed;
  top:0;left:0;
  border-radius:50%;
  pointer-events:none;
  z-index:var(--z-cursor);
  opacity:0;
  will-change:transform;
  transition:opacity .22s ease,border-color .18s ease,background-color .18s ease;
}
.cursor{
  width:26px;height:26px;
  margin:-13px 0 0 -13px;
  border:1.5px solid var(--halftone);
}
.cursor-dot{
  width:5px;height:5px;
  margin:-2.5px 0 0 -2.5px;
  background:var(--deep);
}
@media (pointer:fine){
  html.cursor-on,html.cursor-on *{cursor:none !important;}
}

/* --------------------------- Responsive ----------------------------- */
@media (max-width:560px){
  .stage{padding:var(--s6) var(--s4);}
  .content{gap:var(--s5);}
  .lockup{width:min(420px,86vw);}
  .contact{flex-direction:column;gap:var(--s3);}
  .contact__sep{display:none;}
  .contact__item{font-size:16px;}
}

@media (max-height:520px) and (orientation:landscape){
  .stage{padding:var(--s5) var(--s4);}
  .content{gap:var(--s4);}
  .lockup{width:min(400px,58vw);}
  .rule{display:none;}
}

/* ------------------------- Reduced motion --------------------------- */
@media (prefers-reduced-motion:reduce){
  .lane__move{animation:none !important;}
  .lockup,.rule,.contact{animation:none !important;opacity:1;transform:none;}
  *,*::before,*::after{transition-duration:.01ms !important;}
}