/* ═══════════════════════════════════════════════
   NEPTIVUS — home.css
   Home page only styles.
═══════════════════════════════════════════════ */

/* ── HERO ── */
#hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
}

/* Cinematic city image background */
/* Replace the Unsplash URL with your downloaded hero.webp in production:
   background-image:url('../images/hero.webp'); */
.hero-bg{
  position:absolute;
  inset:0;
  background-image:url('https://images.unsplash.com/photo-1486325212027-8081e485255e?w=1920&q=85&auto=format&fit=crop');
  background-size:cover;
  background-position:center 40%;
  background-repeat:no-repeat;
  /* Subtle zoom on load — performance safe, GPU composited */
  animation:hero-zoom 12s ease-out forwards;
  will-change:transform;
}
@keyframes hero-zoom{
  from{transform:scale(1.06);}
  to{transform:scale(1);}
}
@media(prefers-reduced-motion:reduce){
  .hero-bg{animation:none;}
}

/* Dark overlay — ensures text always readable */
.hero-overlay{
  position:absolute;
  inset:0;
  /* Dark bottom-weighted gradient for text legibility */
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.45) 0%,
      rgba(0,0,0,.55) 40%,
      rgba(0,0,0,.80) 75%,
      rgba(0,0,0,.92) 100%
    );
}

/* Green top accent slash */
.hero-slash{
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:var(--green);
  z-index:3;
}

/* Content */
.hero-content{
  position:relative;
  z-index:2;
  padding:0 var(--sp-lg) 80px;
  max-width:1200px;
  width:100%;
  margin:0 auto;
}
@media(max-width:768px){.hero-content{padding:0 var(--sp-md) 56px;}}

.hero-eye{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:32px;
}
.hero-eye-rule{
  width:48px;height:1.5px;
  background:var(--green);
  flex-shrink:0;
}
.hero-eye-text{
  font-size:13px;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(255,255,255,.82);
}

/* LCP element */
#hero-headline{
  font-family:var(--font-display);
  font-weight:900;
  font-size:var(--f-xl);
  text-transform:uppercase;
  letter-spacing:-.03em;
  line-height:.9;
  color:var(--white);
  margin-bottom:0;
}
#hero-headline .g{color:var(--green);}

.hero-rule{
  width:100%;height:1px;
  background:rgba(255,255,255,.2);
  margin:40px 0;
}

.hero-bottom{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:64px;
  align-items:end;
}
@media(max-width:768px){
  .hero-bottom{grid-template-columns:1fr;gap:24px;}
}

.hero-tagline{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(18px,2.2vw,28px);
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:1.3;
  color:rgba(255,255,255,.82);
}

.hero-sub{
  font-size:15px;
  font-weight:400;
  line-height:1.85;
  color:rgba(255,255,255,.72);
  border-left:1.5px solid var(--green);
  padding-left:20px;
}
.hero-sub strong{
  font-weight:500;
  color:rgba(255,255,255,.92);
}

/* Scroll indicator */
.hero-scroll{
  position:absolute;
  bottom:32px;right:var(--sp-lg);
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.hero-scroll-line{
  width:40px;height:1px;
  background:rgba(255,255,255,.35);
}
.hero-scroll-text{
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
}

/* ── STATS BAND ── */
#stats{background:var(--green);}

.stats-inner{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-left:1px solid rgba(0,0,0,.14);
}
@media(max-width:768px){
  .stats-inner{grid-template-columns:1fr;}
}

.stat-item{
  padding:64px 48px;
  border-right:1px solid rgba(0,0,0,.14);
}
.stat-item:last-child{border-right:none;}
@media(max-width:768px){
  .stat-item{
    border-right:none;
    border-bottom:1px solid rgba(0,0,0,.14);
    padding:40px var(--sp-md);
  }
  .stat-item:last-child{border-bottom:none;}
}

.stat-num{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(56px,8vw,96px);
  line-height:.9;
  letter-spacing:-.04em;
  color:var(--black);
  display:flex;
  align-items:flex-start;
  gap:0;
}
.stat-num-sup{
  font-size:.38em;
  margin-top:.2em;
  font-weight:900;
}
.stat-label{
  font-size:13px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(0,0,0,.65);
  margin-top:10px;
  line-height:1.5;
}

/* ── MANIFESTO ── */
.mani-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
@media(max-width:768px){.mani-inner{grid-template-columns:1fr;gap:40px;}}

.mani-ghost{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(80px,14vw,180px);
  text-transform:uppercase;
  line-height:.88;
  letter-spacing:-.04em;
  color:rgba(255,255,255,.06);
  user-select:none;
}
.mani-ghost .highlight{color:rgba(0,255,135,.35);}

.mani-quote{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(24px,3.5vw,44px);
  text-transform:uppercase;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--white);
  margin-bottom:28px;
}
.mani-body{
  font-size:16px;
  font-weight:400;
  line-height:1.85;
  color:rgba(255,255,255,.82);
}
.mani-body+.mani-body{
  margin-top:18px;
  color:rgba(255,255,255,.55);
}

/* ── SERVICES ── */
.srv-header{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:end;
  margin-bottom:72px;
}
@media(max-width:768px){
  .srv-header{grid-template-columns:1fr;gap:20px;margin-bottom:48px;}
}
.srv-header-sub{
  font-size:17px;
  font-weight:300;
  line-height:1.8;
  color:#555;
}

.srv-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:var(--rule);
}
@media(max-width:768px){.srv-grid{grid-template-columns:1fr;}}

.srv-item{
  padding:48px 36px 48px 0;
  border-right:var(--rule);
  transition:background .2s;
}
.srv-item:hover{background:#fafafa;}
.srv-item:last-child{border-right:none;padding-right:0;}
.srv-item:not(:first-child){padding-left:36px;}
@media(max-width:768px){
  .srv-item{border-right:none;border-bottom:var(--rule);padding:36px 0;}
  .srv-item:not(:first-child){padding-left:0;}
  .srv-item:last-child{border-bottom:none;}
}

.srv-lbl{
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:16px;
}
.srv-name{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(26px,3vw,42px);
  text-transform:uppercase;
  line-height:.95;
  letter-spacing:-.02em;
  color:var(--black);
  margin-bottom:18px;
}
.srv-desc{
  font-size:var(--f-sm-body);
  font-weight:300;
  line-height:1.8;
  color:#444;
  margin-bottom:28px;
}
.srv-list{list-style:none;border-top:var(--rule);padding-top:20px;}
.srv-list li{
  font-size:13px;
  font-weight:400;
  letter-spacing:.03em;
  padding:7px 0;
  border-bottom:var(--rule-faint);
  color:#555;
  display:flex;
  align-items:center;
  gap:10px;
}
.srv-list li::before{
  content:'';
  width:5px;height:5px;
  background:var(--green);
  border-radius:50%;
  flex-shrink:0;
}
.srv-list li:last-child{border-bottom:none;}

/* ── PROCESS ── */
.proc-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:80px;
  gap:40px;
}
@media(max-width:768px){
  .proc-head{flex-direction:column;align-items:flex-start;margin-bottom:48px;}
}
.proc-head-sub{
  font-size:15px;
  font-weight:400;
  line-height:1.85;
  color:rgba(255,255,255,.72);
  max-width:300px;
}

.proc-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:var(--rule-dark);
}
@media(max-width:768px){.proc-steps{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.proc-steps{grid-template-columns:1fr;}}

.proc-step{
  padding:48px 28px 48px 0;
  border-right:1px solid rgba(255,255,255,.08);
}
.proc-step:last-child{border-right:none;padding-right:0;}
.proc-step:not(:first-child){padding-left:28px;}
@media(max-width:768px){
  .proc-step{padding:32px 0;}
  .proc-step:not(:first-child){padding-left:0;}
  .proc-step:nth-child(2){border-right:none;}
  .proc-step:nth-child(3){border-top:1px solid rgba(255,255,255,.1);padding-top:32px;}
}

.proc-num{
  font-family:var(--font-display);
  font-weight:900;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:24px;
}
.proc-name{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(24px,2.8vw,38px);
  text-transform:uppercase;
  line-height:.95;
  letter-spacing:-.02em;
  color:var(--white);
  margin-bottom:14px;
}
.proc-desc{
  font-size:14px;
  font-weight:400;
  line-height:1.8;
  color:rgba(255,255,255,.75);
}
.proc-dlv{
  margin-top:24px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:16px;
}

/* ── WHY ── */
.why-header{margin-bottom:56px;}

.why-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:var(--rule);
  border-left:var(--rule);
}
@media(max-width:768px){
  .why-grid{grid-template-columns:1fr;border-left:none;}
}

.why-item{
  padding:44px 40px;
  border-right:var(--rule);
  border-bottom:var(--rule);
}
@media(max-width:768px){.why-item{padding:32px 0;border-right:none;}}

.why-n{
  font-family:var(--font-display);
  font-weight:900;
  font-size:52px;
  line-height:1;
  color:var(--green);
  opacity:.18;
  margin-bottom:14px;
}
.why-t{
  font-family:var(--font-display);
  font-weight:700;
  font-size:24px;
  text-transform:uppercase;
  letter-spacing:-.01em;
  margin-bottom:10px;
}
.why-d{
  font-size:var(--f-sm-body);
  font-weight:300;
  line-height:1.8;
  color:#555;
}

/* ── INDUSTRIES ── */
.ind-header{margin-bottom:64px;}

.ind-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:var(--rule);
}
@media(max-width:768px){.ind-grid{grid-template-columns:1fr 1fr;}}

.ind-item{
  padding:28px 24px 28px 24px;
  border-right:var(--rule);
  border-bottom:var(--rule);
  transition:background .2s;
}
.ind-item:hover{background:var(--white);}
.ind-item:nth-child(4n){border-right:none;}
@media(max-width:768px){.ind-item:nth-child(2n){border-right:none;}}

.ind-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:18px;
  text-transform:uppercase;
  letter-spacing:-.01em;
  margin-bottom:4px;
}
.ind-sub{
  font-size:13px;
  font-weight:400;
  color:#666;
}