/* DynamicDNSPro Vault — landing. Usa tokens.css + base.css; aquí solo su maqueta.
   Elemento memorable: la consola iLO que recibe la credencial tecleada. */
.landing{min-height:100vh}
.lnav{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);
  padding:var(--s-3) clamp(16px,5vw,64px);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.lnav .brand{display:flex;align-items:center;gap:var(--s-2);font-weight:600}
.lnav .brand .ic{color:var(--accent-text);width:20px;height:20px}
.lnav-acts{display:flex;gap:var(--s-2)}
.btn.big{min-height:44px;padding:12px 22px;font-size:var(--t-md)}

.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,5vw,72px);align-items:center;
  max-width:1180px;margin:0 auto;padding:clamp(40px,9vh,96px) clamp(16px,5vw,64px)}
.hero h1{font-size:clamp(32px,4.4vw,52px);line-height:1.08;letter-spacing:-.02em;max-width:16ch}
.hero .sub{margin-top:var(--s-4);color:var(--muted);font-size:var(--t-lg);line-height:1.6;max-width:56ch}
.hero .cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}

/* La consola: siempre oscura, como una consola real */
.console{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid #30363d;background:#010409;box-shadow:var(--shadow)}
.console-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#161b22;border-bottom:1px solid #30363d}
.console-bar .dot{width:10px;height:10px;border-radius:50%;background:#30363d}
.console-title{margin-left:var(--s-2);font:500 var(--t-xs)/1 var(--mono);color:#8b949e}
.console-body{margin:0;padding:var(--s-5);min-height:220px;font:var(--t-md)/1.7 var(--mono);color:#c9d1d9;white-space:pre-wrap}
.typed{display:inline-block;overflow:hidden;vertical-align:bottom;white-space:nowrap;color:#e6edf3;width:0}
.t1{animation:type 1.1s steps(13,end) .6s forwards}
.t2{animation:type 1.1s steps(14,end) 2s forwards}
@keyframes type{to{width:14ch}}
.caret{display:inline-block;width:.6ch;height:1.1em;background:#3fb950;vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.console-chip{display:flex;align-items:center;gap:var(--s-2);padding:10px 14px;border-top:1px solid #30363d;background:#0d1117;
  font-size:var(--t-sm);color:#3fb950}
@media (prefers-reduced-motion:reduce){.typed{width:auto}.caret{animation:none}}

.points,.pricing,.download{max-width:1180px;margin:0 auto;padding:clamp(32px,7vh,72px) clamp(16px,5vw,64px);border-top:1px solid var(--line)}
.points h2,.pricing h2,.download h2{font-size:var(--t-2xl);margin-bottom:var(--s-5)}
.points dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s-5) var(--s-6)}
.points dt{display:flex;align-items:center;gap:var(--s-2);font-weight:600;margin-bottom:6px}
.points dt .ic{color:var(--accent-text)}
.points dd{margin:0;color:var(--muted);line-height:1.6;max-width:52ch}

.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s-4)}
.tier{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.tier-main{border-color:var(--accent)}
.tier h3{font-size:var(--t-lg);display:flex;align-items:center;gap:var(--s-2)}
.tier h3 .ic{color:var(--accent-text);width:18px;height:18px}
.tier .btn[aria-disabled]{opacity:.55;cursor:default}
.price{font-size:var(--t-2xl);font-weight:600;font-variant-numeric:tabular-nums}
.price small{font-size:var(--t-sm);font-weight:400;color:var(--muted)}
.tier ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:var(--t-sm);flex:1}
.tier li::before{content:"✓ ";color:var(--ok)}
.lfoot{padding:var(--s-5) clamp(16px,5vw,64px);border-top:1px solid var(--line);color:var(--muted);font-size:var(--t-sm);text-align:center}

@media (max-width:860px){.hero{grid-template-columns:1fr}.lnav .brand{font-size:var(--t-sm)}}