/* ==========================================================================
   VOLKER — Coming Soon
   Industrial Oils & Chemicals
   Aesthetic: technical / blueprint industrial, deep navy field, refinery green
   ========================================================================== */

:root{
  /* brand */
  --navy-deep : #070919;
  --navy-900  : #0A0C1F;
  --navy-800  : #12163A;
  --navy-700  : #191D45;
  --green     : #2CB742;
  --green-lit : #58E37A;
  --green-dim : #1B7A2E;

  /* neutrals */
  --paper     : #EEF0F7;
  --muted     : #9AA0BE;
  --faint     : rgba(238,240,247,.10);
  --hairline  : rgba(238,240,247,.14);

  /* type */
  --display   : "Archivo", "Arial Narrow", sans-serif;
  --mono      : "Azeret Mono", ui-monospace, SFMono-Regular, monospace;

  /* rhythm */
  --pad       : clamp(1.15rem, 4vw, 3.5rem);
  --frame     : clamp(10px, 1.6vw, 22px);
  --ease      : cubic-bezier(.22,.61,.36,1);
}

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

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

body{
  margin:0;
  min-height:100svh;
  background:var(--navy-900);
  color:var(--paper);
  font-family:var(--display);
  font-variation-settings:"wdth" 100,"wght" 400;
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{ background:var(--green); color:#06210C; }

a{ color:inherit; text-decoration:none; }

/* ------------------------------------------------------------------ layers */

.bg-grid,
.bg-glow,
.bg-sheen,
.bg-noise,
.frame{ position:fixed; inset:0; pointer-events:none; z-index:0; }

/* blueprint grid + heavier 5th line, fading toward the bottom */
.bg-grid{
  background-image:
    linear-gradient(to right , rgba(238,240,247,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(238,240,247,.045) 1px, transparent 1px),
    linear-gradient(to right , rgba(44,183,66,.09)    1px, transparent 1px),
    linear-gradient(to bottom, rgba(44,183,66,.09)    1px, transparent 1px);
  background-size:52px 52px, 52px 52px, 260px 260px, 260px 260px;
  -webkit-mask-image:radial-gradient(120% 95% at 50% 6%, #000 20%, transparent 88%);
          mask-image:radial-gradient(120% 95% at 50% 6%, #000 20%, transparent 88%);
  opacity:.85;
}

/* atmosphere */
.bg-glow{
  background:
    radial-gradient(58rem 42rem at 12% -12%, rgba(44,183,66,.20), transparent 62%),
    radial-gradient(52rem 40rem at 92% 108%, rgba(25,29,69,.95), transparent 60%),
    radial-gradient(38rem 30rem at 78% 8%,  rgba(34,52,140,.28), transparent 66%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy-deep) 100%);
}

/* slow oil-slick sheen */
.bg-sheen{
  background:conic-gradient(from 0deg at 50% 50%,
      rgba(44,183,66,.16), rgba(34,52,140,.14), rgba(88,227,122,.10),
      rgba(25,29,69,.18), rgba(44,183,66,.16));
  filter:blur(90px);
  opacity:.5;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 115%, #000, transparent 72%);
          mask-image:radial-gradient(70% 60% at 50% 115%, #000, transparent 72%);
  animation:sheen 46s linear infinite;
}
@keyframes sheen{ to{ transform:rotate(1turn) scale(1.12); } }

/* film grain */
.bg-noise{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.05;
  mix-blend-mode:overlay;
}

/* technical drawing frame with corner ticks */
.frame{
  inset:var(--frame);
  border:1px solid var(--faint);
  z-index:3;
}
.frame span{
  position:absolute; width:14px; height:14px;
  border:1px solid rgba(44,183,66,.65);
}
.frame span:nth-child(1){ top:-1px;    left:-1px;    border-right:0;  border-bottom:0; }
.frame span:nth-child(2){ top:-1px;    right:-1px;   border-left:0;   border-bottom:0; }
.frame span:nth-child(3){ bottom:-1px; left:-1px;    border-right:0;  border-top:0;    }
.frame span:nth-child(4){ bottom:-1px; right:-1px;   border-left:0;   border-top:0;    }

/* ------------------------------------------------------------------- shell */

.shell{
  position:relative;
  z-index:2;
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto 1fr auto auto;
  gap:clamp(1.5rem, 3vh, 2.75rem);
  padding:calc(var(--frame) + clamp(1rem, 3vh, 2.25rem)) calc(var(--frame) + var(--pad));
  max-width:1560px;
  margin-inline:auto;
}

/* ------------------------------------------------------------------ topbar */

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}

.lockup{ display:inline-flex; align-items:center; gap:.7rem; }

.mark{
  width:auto; height:clamp(34px,4.6vw,46px);
  overflow:visible;
  transition:transform .6s var(--ease);
}
.m-hex{ fill:var(--navy-700); stroke:rgba(238,240,247,.16); stroke-width:1.5; }
.m-kite{ fill:var(--green); transition:fill .45s var(--ease); }
.m-v{ fill:none; stroke:#fff; stroke-width:2.6; stroke-linejoin:round; stroke-linecap:round; }
.m-v--in{ stroke-width:1.8; }

.lockup:hover .mark{ transform:translateY(-3px) rotate(-4deg); }
.lockup:hover .m-kite{ fill:var(--green-lit); }

.lockup__word{
  font-variation-settings:"wdth" 118,"wght" 800;
  font-size:clamp(1.05rem,2vw,1.35rem);
  letter-spacing:.14em;
  text-transform:uppercase;
}

.status{
  margin:0;
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--hairline);
  border-radius:999px;
  padding:.5rem .95rem;
  background:rgba(10,12,31,.5);
  backdrop-filter:blur(6px);
}
.status__dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 0 rgba(44,183,66,.55);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%  { box-shadow:0 0 0 0   rgba(44,183,66,.55); }
  70% { box-shadow:0 0 0 10px rgba(44,183,66,0);   }
  100%{ box-shadow:0 0 0 0   rgba(44,183,66,0);    }
}

/* ------------------------------------------------------------------- stage */

.stage{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-block:clamp(.5rem,2vh,1.75rem);
}

.eyebrow{
  margin:0 0 clamp(.9rem,2vh,1.4rem);
  display:flex; align-items:center; gap:1rem;
  font-family:var(--mono);
  font-size:clamp(.62rem,1.5vw,.76rem);
  font-weight:500;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--green-lit);
}
.eyebrow__rule{
  width:clamp(28px,7vw,86px); height:1px;
  background:linear-gradient(90deg, transparent, var(--green));
  flex:0 0 auto;
}

/* the wordmark: oversized, expanded, tightly tracked */
.wordmark{
  margin:0;
  display:flex;
  flex-wrap:nowrap;
  font-variation-settings:"wdth" 125,"wght" 800;
  font-size:clamp(2.8rem, 15.4vw, 13rem); /* fallback — refined below with cqw */
  line-height:.86;
  letter-spacing:-.012em;
  text-transform:uppercase;
  color:var(--paper);
}
.wordmark span{
  display:block;
  animation:drop .9s var(--ease) both;
  animation-delay:calc(var(--d,0s) + var(--i,0) * .055s);
}
.wordmark span:nth-child(1){ --i:1; color:var(--green); } /* echoes the green V in the mark */
.wordmark span:nth-child(2){ --i:2 }
.wordmark span:nth-child(3){ --i:3 }
.wordmark span:nth-child(4){ --i:4 }
.wordmark span:nth-child(5){ --i:5 }
.wordmark span:nth-child(6){ --i:6 }
@keyframes drop{
  from{ opacity:0; transform:translateY(.28em) rotate(1.5deg); filter:blur(8px); }
  to  { opacity:1; transform:none; filter:blur(0); }
}

.underline{
  height:2px;
  margin:clamp(.9rem,2.2vh,1.5rem) 0 clamp(1.6rem,4vh,2.6rem);
  background:linear-gradient(90deg, var(--green) 0%, var(--green-dim) 42%, var(--hairline) 42%, var(--hairline) 100%);
  transform-origin:left;
  animation:sweep 1.5s var(--ease) both;
  animation-delay:.6s;
}
@keyframes sweep{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* lede + contact */
.lede-row{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.6rem,4vw,4rem);
  align-items:start;
}

.lede{
  margin:0;
  max-width:46ch;
  font-size:clamp(1rem,1.6vw,1.22rem);
  line-height:1.62;
  color:var(--muted);
  font-variation-settings:"wdth" 100,"wght" 400;
}

.contact{
  position:relative;
  border:1px solid var(--hairline);
  border-left:2px solid var(--green);
  background:linear-gradient(180deg, rgba(25,29,69,.55), rgba(10,12,31,.35));
  backdrop-filter:blur(10px);
  padding:clamp(1.1rem,2.4vw,1.6rem) clamp(1.15rem,2.6vw,1.8rem);
}
.contact::after{
  content:"";
  position:absolute; top:10px; right:10px;
  width:6px; height:6px; border-radius:50%;
  background:var(--green);
  opacity:.8;
}
.contact__label,
.contact__note{
  margin:0;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}
.contact__note{ letter-spacing:.14em; opacity:.75; }

.contact__number{
  display:inline-block;
  margin:.55rem 0 .7rem;
  font-variation-settings:"wdth" 112,"wght" 700;
  font-size:clamp(1.5rem,3.6vw,2.35rem);
  letter-spacing:-.01em;
  line-height:1.1;
  white-space:nowrap;
  background:linear-gradient(90deg, var(--green-lit), var(--green-lit)) no-repeat;
  background-size:0% 2px;
  background-position:0 100%;
  transition:background-size .5s var(--ease), color .35s var(--ease);
}
.contact__number:hover,
.contact__number:focus-visible{
  color:var(--green-lit);
  background-size:100% 2px;
}

/* spec row */
.specs{
  list-style:none;
  margin:clamp(1.5rem,3.5vh,2.6rem) 0 0;
  padding:clamp(1.3rem,3vh,1.9rem) 0 0;
  border-top:1px solid var(--hairline);
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(1.1rem,3vw,2.75rem);
}
.spec{
  display:grid;
  gap:.35rem;
  position:relative;
  padding-left:clamp(1.9rem,3vw,2.6rem);
}
.spec__num{
  position:absolute; left:0; top:.1rem;
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--green);
}
.spec__name{
  font-variation-settings:"wdth" 105,"wght" 650;
  font-size:clamp(.92rem,1.5vw,1.04rem);
  letter-spacing:.005em;
}
.spec__desc{
  font-size:clamp(.8rem,1.25vw,.9rem);
  line-height:1.55;
  color:var(--muted);
  max-width:30ch;
}

/* ------------------------------------------------------------------ ticker */

.ticker{
  position:relative;
  overflow:hidden;
  border-block:1px solid var(--hairline);
  padding-block:.85rem;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track{
  display:flex;
  width:max-content;
  animation:roll 34s linear infinite;
}
.ticker__group{
  display:inline-flex; align-items:center; gap:1.4rem;
  padding-right:1.4rem;
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:rgba(238,240,247,.52);
  white-space:nowrap;
}
.ticker__group i{
  width:6px; height:6px;
  background:var(--green);
  transform:rotate(45deg);
  flex:0 0 auto;
}
@keyframes roll{ to{ transform:translateX(-50%); } }

/* ----------------------------------------------------------------- footbar */

.footbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem 1.5rem;
  flex-wrap:wrap;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.footbar p{ margin:0; }
.footbar__mid{ color:rgba(238,240,247,.38); }
.footbar a{ transition:color .3s var(--ease); }
.footbar a:hover{ color:var(--green-lit); }

/* ------------------------------------------------------- mobile call button */

.call-fab{
  position:fixed;
  right:calc(var(--frame) + .75rem);
  bottom:calc(var(--frame) + .75rem);
  z-index:5;
  display:none;
  align-items:center;
  gap:.5rem;
  padding:.85rem 1.15rem;
  border-radius:999px;
  background:var(--green);
  color:#06210C;
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  box-shadow:0 12px 30px -10px rgba(44,183,66,.75);
}
.call-fab svg{ width:16px; height:16px; fill:currentColor; }
.call-fab:active{ transform:translateY(1px); }

/* ----------------------------------------------------------------- reveals */

.reveal{
  animation:rise .95s var(--ease) both;
  animation-delay:var(--d, 0s);
}
@keyframes rise{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:none; }
}

:focus-visible{
  outline:2px solid var(--green-lit);
  outline-offset:4px;
  border-radius:2px;
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 1080px){
  .lede-row{ grid-template-columns:1fr; gap:1.8rem; }
  .contact{ justify-self:start; width:min(100%, 26rem); }
  .lede{ max-width:60ch; }
}

@media (max-width: 720px){
  .shell{
    gap:1.4rem;
    padding-bottom:calc(var(--frame) + 5.25rem); /* clearance for the call button */
  }
  .specs{
    grid-template-columns:1fr;
    gap:1.1rem;
  }
  .spec__desc{ max-width:44ch; }
  .status{ font-size:.6rem; padding:.42rem .8rem; letter-spacing:.2em; }
  .footbar{ justify-content:flex-start; gap:.35rem 1rem; }
  .footbar__mid{ display:none; }
  .footbar p:last-child{ display:none; }
  .call-fab{ display:inline-flex; }
  .ticker{ margin-bottom:.25rem; }
}

@media (max-width: 400px){
  .wordmark{ letter-spacing:-.02em; }
  .contact__number{ font-size:1.42rem; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal,.wordmark span,.underline{ opacity:1; transform:none; filter:none; }
}

/* -------------------------------------------------- optical fit (modern UA)
   Size the wordmark off its container, not the viewport, so it lands flush
   against the grid edges at every width without overflowing the frame.
   Declared last so it wins over the breakpoints above.                       */
@supports (width: 1cqw){
  .stage{ container-type:inline-size; }
  .wordmark{ font-size:min(18cqw, 15rem); }
}