/**
 * File: /assets/css/vi-landing.css
 * Path: e:/Vignetta/site/vignetta_dev/public/assets/css/vi-landing.css
 * Date: October 15, 2025 — 12:54 PM CDT
 *
 * Purpose:
 *   Styling for the Vignetta public landing page.
 *
 * Shout-out:
 *   Built with ❤️ by the Vignetta Devs
 *
 * And ChatGPT says: "I helped!"
 */




/* ----------------------------------------------------------
   Theme Tokens
---------------------------------------------------------- */
@import url("/assets/css/vi-tokens.css");



/* ----------------------------------------------------------
   Base
---------------------------------------------------------- */
*{box-sizing:border-box}
html,body{height:100%}

body.vi-landing{
  margin:0;
  font-family:'Share Tech Mono', monospace;
  letter-spacing:0.025em;
  color:var(--vi-ink);
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(245,66,182,.08), transparent 60%),
    radial-gradient(1000px 500px at 20% 110%, rgba(52,110,191,.08), transparent 60%),
    linear-gradient(180deg, var(--vi-bg-0), var(--vi-bg-1));
  overflow-x:hidden;
}

/* ----------------------------------------------------------
   Header
---------------------------------------------------------- */
.vi-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 24px;
  position:sticky;
  top:0;
  z-index:40;
  background:linear-gradient(180deg,rgba(7,7,10,.9),rgba(7,7,10,.4)60%,transparent);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid rgba(255,255,255,.05);
}

.vi-brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-transform:uppercase;
  font-weight:700;
  font-size:14px;
}


.vi-brand-badge{
  width:28px;
  height:28px;
  border-radius:8px;
  position:relative;
  background:linear-gradient(135deg,var(--vi-neon-a),var(--vi-neon-b));
  box-shadow: 0 0 16px rgba(0, 208, 255, 0.979), 0 0 24px rgba(255, 43, 214, .3) inset;
}

.vi-brand-badge::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:6px;
  background:var(--vi-bg-0);
}



.vi-nav a{
  color:var(--vi-muted);
  text-decoration:none;
  margin-left:18px;
  font-size:14px;
}

.vi-nav a:hover{color:var(--vi-ink)}

/* ----------------------------------------------------------
   Hero
---------------------------------------------------------- */
.vi-hero{
  padding:96px 24px 64px;
  text-align:center;
}

.vi-hero-title{
  font-size:clamp(34px,6vw,64px);
  margin-bottom:16px;
  text-transform:uppercase;
}

.vi-neon-underline{
  position:relative;
  display:inline-block;
}

.vi-neon-underline::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-8px;
  height:3px;
  background:linear-gradient(90deg,var(--vi-neon-a),var(--vi-neon-b),var(--vi-neon-c));
  filter:drop-shadow(0 0 8px rgba(245,66,182,.6));
  animation:vi-flow 3.6s linear infinite;
  background-size:200% 100%;
}

@keyframes vi-flow{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}

.vi-hero-image{
  margin:64px auto 48px;
}

.vi-hero-image img{
  width:800px;
  max-width:85%;
}

.vi-cta-wrap{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}

/* ----------------------------------------------------------
   Buttons
---------------------------------------------------------- */
.vi-btn{
  padding:14px 22px;
  border-radius:10px;
  text-decoration:none;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.vi-btn--primary{
  background:linear-gradient(135deg,var(--vi-neon-a),var(--vi-neon-b));
  color:#000;
}

.vi-btn--ghost{
  border:1px solid rgba(255,255,255,.2);
  color:var(--vi-ink);
}