/* NVR Studios — Performance system v1.0 — shared base */

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  --carbon:#0E0E10; --graphite:#1C1C1E; --iron:#3A3A3D; --aluminum:#A8A8AA;
  --white:#FFFFFF; --papaya:#FF7A1A; --ember:#B84F0E;
  --nvr-mask:url('brand_v2/NVR_mark_only_BLACK.svg');
  background:var(--graphite); color:var(--white);
  font-family:'Helvetica Neue', 'Inter', Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}
::selection { background:var(--papaya); color:var(--graphite) }

@keyframes fadeUp { from{opacity:0;transform:translateY(36px)} to{opacity:1;transform:translateY(0)} }
@keyframes lineDraw { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes blink { 0%,55%{opacity:1} 56%,100%{opacity:0.25} }

/* Nav */
.nav { position:sticky; top:0; z-index:50; background:rgba(28,28,30,0.78); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); border-bottom:0.5px solid var(--iron); padding:18px 48px; display:flex; justify-content:space-between; align-items:center }
.nav-mark { width:64px; height:30px; background-color:var(--white); -webkit-mask-image:url('brand_v2/NVR_mark_only_BLACK.svg'); mask-image:url('brand_v2/NVR_mark_only_BLACK.svg'); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; cursor:pointer; transition:background-color 0.4s ease; display:block; text-decoration:none }
.nav-mark:hover { background-color:var(--papaya) }
.nav-links { display:flex; gap:36px; align-items:center }
.nav-link { font-family:'Courier New',monospace; font-size:11px; letter-spacing:0.22em; color:var(--aluminum); text-transform:uppercase; cursor:pointer; position:relative; padding:6px 0; transition:color 0.3s ease; text-decoration:none }
.nav-link.active { color:var(--white) }
.nav-link.active::before { content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%); width:4px; height:4px; background:var(--papaya); border-radius:50% }
.nav-link::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--papaya); transform:scaleX(0); transform-origin:left; transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1) }
.nav-link:hover { color:var(--white) }
.nav-link:hover::after { transform:scaleX(1) }
.nav-cta { background:var(--papaya); color:var(--graphite); padding:12px 22px; border-radius:3px; font-family:'Helvetica Neue',sans-serif; font-weight:700; font-size:12px; letter-spacing:0.04em; cursor:pointer; transition:background 0.3s ease, transform 0.2s ease; text-decoration:none; display:inline-block }
.nav-cta:hover { background:var(--ember); transform:translateY(-1px) }

/* Service / Page header */
.service-head, .page-head { padding:120px 48px 100px; border-bottom:0.5px solid var(--iron); position:relative }
.service-head .breadcrumb, .page-head .breadcrumb { display:flex; gap:18px; align-items:center; font-family:'Courier New',monospace; font-size:11px; letter-spacing:0.24em; color:var(--aluminum); text-transform:uppercase; margin-bottom:48px; flex-wrap:wrap }
.service-head .breadcrumb .num, .page-head .breadcrumb .num { color:var(--papaya) }
.service-head .breadcrumb a, .page-head .breadcrumb a { color:var(--aluminum); text-decoration:none; transition:color 0.3s ease }
.service-head .breadcrumb a:hover, .page-head .breadcrumb a:hover { color:var(--papaya) }
.service-head h1, .page-head h1 { font-family:'Helvetica Neue',sans-serif; font-weight:900; font-size:8vw; letter-spacing:-0.045em; line-height:0.92; max-width:1100px; animation:fadeUp 1s cubic-bezier(0.2,0.8,0.2,1) both }
.service-head h1 .papaya, .page-head h1 .papaya { color:var(--papaya) }
.service-head .deck, .page-head .deck { font-family:'Helvetica Neue',sans-serif; font-weight:500; font-size:24px; line-height:1.4; color:var(--aluminum); margin-top:32px; max-width:760px; letter-spacing:-0.015em; animation:fadeUp 1s 0.2s cubic-bezier(0.2,0.8,0.2,1) both; opacity:0; animation-fill-mode:forwards }
.service-head-line { height:1px; background:var(--papaya); margin-top:64px; transform-origin:left; animation:lineDraw 1.6s 0.7s cubic-bezier(0.6,0,0.4,1) both; transform:scaleX(0); max-width:30% }

/* Section */
.section { padding:120px 48px; border-top:0.5px solid var(--iron); opacity:0; transform:translateY(48px); transition:opacity 1.1s ease, transform 1.1s cubic-bezier(0.2,0.8,0.2,1) }
.section.in-view { opacity:1; transform:translateY(0) }
.section-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:64px; border-bottom:0.5px solid var(--iron); padding-bottom:24px; gap:24px; flex-wrap:wrap }
.section-num { font-family:'Courier New',monospace; font-size:11px; letter-spacing:0.24em; color:var(--papaya) }
.section-title { font-family:'Helvetica Neue',sans-serif; font-weight:500; font-size:48px; letter-spacing:-0.03em; margin-top:14px }
.section-meta { font-family:'Courier New',monospace; font-size:10px; letter-spacing:0.22em; color:var(--aluminum) }

/* Plans grid */
.plans-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.plan-card { background:var(--carbon); border:0.5px solid var(--iron); border-radius:4px; padding:40px 32px; transition:border-color 0.5s ease, transform 0.5s cubic-bezier(0.2,0.8,0.2,1); cursor:pointer; display:flex; flex-direction:column; min-height:560px; position:relative }
.plan-card:hover { border-color:var(--papaya); transform:translateY(-6px) }
.plan-card.featured { border-color:var(--papaya) }
.plan-card.featured::before { content:"+ POPULAR"; position:absolute; top:-1px; right:24px; background:var(--papaya); color:var(--graphite); font-family:'Courier New',monospace; font-size:9px; letter-spacing:0.18em; padding:6px 12px; border-radius:0 0 3px 3px }
.plan-card .plan-num { font-family:'Courier New',monospace; font-size:11px; letter-spacing:0.24em; color:var(--papaya); margin-bottom:14px }
.plan-card .plan-tag { font-family:'Helvetica Neue',sans-serif; font-size:13px; color:var(--aluminum); letter-spacing:-0.01em; margin-bottom:18px }
.plan-card h3 { font-family:'Helvetica Neue',sans-serif; font-weight:900; font-size:42px; letter-spacing:-0.04em; line-height:0.98; margin-bottom:24px }
.plan-card .plan-deck { font-family:'Helvetica Neue',sans-serif; font-size:14px; line-height:1.55; color:var(--aluminum); margin-bottom:28px }
.plan-card ul { list-style:none; padding:0; margin:0 0 28px 0 }
.plan-card li { font-family:'Helvetica Neue',sans-serif; font-size:13px; color:var(--white); padding:11px 0 11px 22px; position:relative; line-height:1.5; border-bottom:0.5px solid var(--iron) }
.plan-card li::before { content:"→"; position:absolute; left:0; top:11px; color:var(--papaya); font-family:'Courier New',monospace; font-size:13px }
.plan-card li:last-child { border-bottom:none }
.plan-card .plan-foot { margin-top:auto; padding-top:24px; border-top:0.5px solid var(--iron); font-family:'Courier New',monospace; font-size:10px; letter-spacing:0.2em; color:var(--aluminum); display:flex; justify-content:space-between; align-items:center }
.plan-card .plan-foot span.papaya { color:var(--papaya) }

/* Funnel / process */
.funnel { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; align-items:stretch }
.funnel.five { grid-template-columns:repeat(5,1fr) }
.funnel-step { background:var(--carbon); border:0.5px solid var(--iron); border-radius:4px; padding:28px 22px; position:relative; transition:border-color 0.4s ease, transform 0.4s ease }
.funnel-step:hover { border-color:var(--papaya); transform:translateY(-4px) }
.funnel-step .step-num { font-family:'Courier New',monospace; font-size:10px; letter-spacing:0.22em; color:var(--papaya); margin-bottom:14px }
.funnel-step h4 { font-family:'Helvetica Neue',sans-serif; font-weight:700; font-size:18px; letter-spacing:-0.02em; margin-bottom:10px }
.funnel-step p { font-family:'Helvetica Neue',sans-serif; font-size:13px; line-height:1.5; color:var(--aluminum) }
.funnel-step::after { content:"→"; position:absolute; right:-14px; top:50%; transform:translateY(-50%); font-family:'Courier New',monospace; font-size:14px; color:var(--papaya); z-index:2 }
.funnel-step:last-child::after { display:none }

/* Who is for / not */
.who-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px }
.who-block { background:var(--carbon); border:0.5px solid var(--iron); border-radius:4px; padding:36px 32px }
.who-block .label { font-family:'Courier New',monospace; font-size:10px; letter-spacing:0.22em; margin-bottom:18px }
.who-block.yes .label { color:var(--papaya) }
.who-block.no .label { color:var(--aluminum) }
.who-block h3 { font-family:'Helvetica Neue',sans-serif; font-weight:700; font-size:24px; letter-spacing:-0.025em; margin-bottom:18px; color:var(--white) }
.who-block.no h3 { color:var(--aluminum) }
.who-block ul { list-style:none; padding:0; margin:0 }
.who-block li { font-family:'Helvetica Neue',sans-serif; font-size:14px; color:var(--white); padding:8px 0 8px 22px; position:relative; line-height:1.5; border-bottom:0.5px solid var(--iron) }
.who-block.no li { color:var(--aluminum) }
.who-block li:last-child { border-bottom:none }
.who-block.yes li::before { content:"✓"; position:absolute; left:0; top:8px; color:var(--papaya); font-weight:700 }
.who-block.no li::before { content:"×"; position:absolute; left:0; top:8px; color:var(--aluminum); font-weight:700 }

/* CTA final with WhatsApp */
.cta-final { background:var(--papaya); padding:120px 48px; color:var(--graphite); display:grid; grid-template-columns:1fr auto; gap:48px; align-items:center }
.cta-final-text { font-family:'Helvetica Neue',sans-serif; font-weight:900; font-size:84px; line-height:0.94; letter-spacing:-0.045em }
.cta-final-sub { font-family:'Helvetica Neue',sans-serif; font-size:17px; margin-top:24px; color:var(--graphite); opacity:0.78; max-width:520px; line-height:1.5 }
.cta-buttons { display:flex; flex-direction:column; gap:12px; align-items:flex-end }
.cta-button { background:var(--graphite); color:var(--white); padding:24px 36px; border-radius:3px; font-family:'Helvetica Neue',sans-serif; font-weight:700; font-size:13px; letter-spacing:0.06em; cursor:pointer; white-space:nowrap; display:flex; align-items:center; gap:12px; text-decoration:none; transition:transform 0.25s ease, background 0.3s ease, box-shadow 0.25s ease }
.cta-button:hover { background:var(--carbon); transform:translate(-4px,-4px); box-shadow:4px 4px 0 var(--graphite) }
.cta-button.wa { background:transparent; color:var(--graphite); border:1.5px solid var(--graphite) }
.cta-button.wa:hover { background:var(--graphite); color:var(--white); box-shadow:4px 4px 0 var(--carbon) }
.cta-button svg { width:18px; height:18px; flex-shrink:0 }

/* Footer */
.foot { background:var(--carbon); padding:40px 48px; display:flex; justify-content:space-between; align-items:center; font-family:'Courier New',monospace; font-size:10px; letter-spacing:0.22em; color:var(--aluminum); text-transform:uppercase; border-top:1px solid var(--papaya); flex-wrap:wrap; gap:18px }
.foot-mark { width:54px; height:25px; background-color:var(--aluminum); -webkit-mask-image:url('brand_v2/NVR_mark_only_BLACK.svg'); mask-image:url('brand_v2/NVR_mark_only_BLACK.svg'); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; transition:background-color 0.4s ease }
.foot-mark:hover { background-color:var(--papaya) }
.foot-side { display:flex; align-items:center; gap:18px }
.foot-social { display:flex; align-items:center; gap:14px }
.foot-right { display:flex; align-items:center; gap:14px }
.foot-link { color:var(--aluminum); text-decoration:none; transition:color 0.3s ease }
.foot-link:hover { color:var(--papaya) }
.foot-sep { color:var(--iron) }

@media (max-width: 900px) {
  .nav { padding:14px 24px } .nav-links { display:none }
  .service-head, .page-head { padding:80px 24px 60px }
  .service-head h1, .page-head h1 { font-size:14vw }
  .service-head .deck, .page-head .deck { font-size:18px }
  .section { padding:64px 24px }
  .section-title { font-size:32px }
  .plans-grid, .funnel, .funnel.five, .who-grid { grid-template-columns:1fr }
  .funnel-step::after { display:none }
  .plan-card { padding:32px 24px; min-height:auto }
  .plan-card h3 { font-size:36px }
  .cta-final { padding:80px 24px; grid-template-columns:1fr }
  .cta-final-text { font-size:48px }
  .cta-buttons { align-items:flex-start }
}

/* WhatsApp flotante */
.wa-float { position:fixed; bottom:28px; right:28px; z-index:999; width:56px; height:56px; border-radius:50%; background:#25d366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(37,211,102,0.4); transition:transform 0.25s ease, box-shadow 0.25s ease }
.wa-float:hover { transform:scale(1.1); box-shadow:0 6px 28px rgba(37,211,102,0.6) }