/* ViceCity OS — neon accent layer (matches hero video). Recolors warm/yellow
   accents to pink / purple / cyan / green. Loaded after the Webflow stylesheet. */

:root{
  --vc-magenta:#ff2d95;
  --vc-cyan:#1ef0ff;
  --vc-violet:#a855ff;
  --vc-green:#39ff9c;
  /* tan/gold panel tone -> soft neon lavender */
  --biege:#cbb6ef;
}

/* active timeline step dot: amber #ffb937 -> neon */
.circle_item.current .circle_dot{
  background:linear-gradient(135deg,var(--vc-cyan),var(--vc-magenta)) !important;
  box-shadow:0 0 14px rgba(255,45,149,.85),0 0 7px rgba(30,240,255,.7) !important;
}
.circle_link:hover .circle_dot{ box-shadow:0 0 12px rgba(30,240,255,.85) !important; }

/* nav separator dots -> neon */
.h_dot{
  background:linear-gradient(135deg,var(--vc-cyan),var(--vc-magenta)) !important;
  box-shadow:0 0 6px rgba(255,45,149,.6);
}
.dot_bold{ background:var(--vc-green) !important; box-shadow:0 0 8px rgba(57,255,156,.7); }
.dot_menu{ background:var(--vc-magenta) !important; }

/* link hover accent */
a:hover,a.h_link:hover,a.h_link:hover div{ color:var(--vc-magenta) !important; }

/* selection */
::selection{ background:var(--vc-magenta); color:#fff; }

/* purple→blue tint on the section background image (theme match, no new image) */
.background_image{ position:relative; overflow:hidden; }
.background_image img{ filter:grayscale(1) contrast(1.12) brightness(.82) !important; position:relative; z-index:0; }
.background_image::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(135deg,#3b1d8f 0%,#6d3bf5 45%,#2563eb 100%);
  mix-blend-mode:lighten; opacity:.62;
}

/* floating "Join Waitlist" button (bottom-right): wider, less oval */
a[data-vc-waitlist]{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  padding:15px 42px !important;
  min-width:210px;
  border-radius:16px !important;
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
}
a[data-vc-waitlist] > div{ width:auto !important; }
/* center the floating button text (Webflow set a tiny line-height) */
a[data-vc-waitlist], a[data-vc-waitlist] > div{ line-height:1 !important; }
a[data-vc-waitlist] > div{ display:flex; align-items:center; }

/* ===== modal waitlist form: bigger, cleaner fields ===== */
.modal_headline{ font-size:clamp(34px,4vw,46px) !important; line-height:1.05 !important; }
.headline_box .txt_base.opacity{ font-size:16px !important; }
.field_text{ font-size:15px !important; font-weight:600 !important; letter-spacing:.01em; margin-bottom:10px !important; display:block; }
.field_input{
  font-size:18px !important; line-height:1.3 !important;
  padding:16px 18px !important; height:auto !important; width:100% !important;
  border:1.5px solid rgba(10,4,20,.14) !important; border-radius:14px !important;
  background:#fff !important; transition:border-color .15s, box-shadow .15s;
}
.field_input::placeholder{ color:rgba(10,4,20,.4); }
.field_input:focus{ border-color:#7c5cff !important; box-shadow:0 0 0 3px rgba(124,92,255,.18) !important; outline:none; }
.field_box{ margin-bottom:24px !important; }
.flex_modal{ margin-top:6px; }
.submit_form{ font-size:18px !important; font-weight:700 !important; padding:18px !important; border-radius:16px !important; }
.note_pp .txt_base{ font-size:14px !important; }

/* hide the floating Join Waitlist button on mobile/tablet (it overlaps the hero CTA;
   mobile already has the Menu + hero "Join the Waitlist") */
@media (max-width: 991px){
  .inline_referral, a[data-vc-waitlist]{ display:none !important; }
}

/* Builder HQ dashboard image: small rounded corners */
.ipad_ui{ border-radius:14px; overflow:hidden; }
.ipad_ui img{ border-radius:14px; display:block; }

/* Hero legibility scrim — bright daytime hero needs darker top (nav+headline) and bottom (feature trio) */
.hero .overlay_video{background:linear-gradient(180deg,rgba(6,3,16,.64) 0%,rgba(6,3,16,.16) 20%,rgba(6,3,16,0) 42%,rgba(6,3,16,.24) 60%,rgba(6,3,16,.82) 100%) !important;opacity:1 !important}

/* Hero legibility v3 — smooth scrim; glyph-following drop-shadow on the split-text
   headline/subhead (text-shadow there gets clipped into per-word boxes by .word{overflow:hidden}) */
.hero .overlay_video{background:linear-gradient(180deg,rgba(6,3,16,.68) 0%,rgba(6,3,16,.34) 24%,rgba(6,3,16,.26) 48%,rgba(6,3,16,.30) 62%,rgba(6,3,16,.86) 100%) !important;opacity:1 !important}
.hero .h1,.hero .heading{filter:drop-shadow(0 2px 6px rgba(0,0,0,.45)) drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.hero .title_txt,.hero .descript_txt{text-shadow:0 1px 10px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.45)}
@media (max-width:767px){
  .hero .overlay_video{background:linear-gradient(180deg,rgba(6,3,16,.60) 0%,rgba(6,3,16,.30) 28%,rgba(6,3,16,.44) 52%,rgba(6,3,16,.84) 100%) !important}
  .hero .descript_txt{color:#efeaff !important;opacity:1 !important}
}

/* Hero subhead + CTA: clean left-aligned column */
.subhead_link{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.subhead_link .heading{margin:0;text-wrap:balance}

/* Animated shiny border beam on the sticky Join Waitlist button */
@property --pd-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.inline_referral a{position:relative;isolation:isolate}
.inline_referral a::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;
  background:conic-gradient(from var(--pd-a),
    rgba(124,92,255,.40) 0deg, rgba(124,92,255,.06) 55deg,
    #1ef0ff 150deg, #ffffff 168deg, #ff2d95 186deg,
    rgba(124,92,255,.06) 275deg, rgba(124,92,255,.40) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;animation:pd-beam 3s linear infinite}
@keyframes pd-beam{to{--pd-a:360deg}}
@media (prefers-reduced-motion:reduce){.inline_referral a::after{animation:none}}

/* Circle timeline — neon active step + glow, clearer steps */
.circle_dot{transition:background .35s ease, box-shadow .35s ease, transform .35s ease}
.circle_item.current .circle_dot{background:#7c5cff !important;box-shadow:0 0 20px 5px rgba(124,92,255,.6) !important;transform:scale(1.25)}
.circle_item.current .headline_circle{color:#fff}

/* Hero subhead one line on desktop */
@media (min-width:992px){ .heading{white-space:nowrap} }

/* Sticky Join Waitlist: hidden while the hero is in view, revealed after scrolling past it */
.inline_referral{opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .35s ease, transform .35s ease, visibility .35s ease}
.inline_referral.pd-show{opacity:1;visibility:visible;transform:none}

/* ===== nav + sticky-button alignment fixes (kit pivot) ===== */
/* header CTA: never wrap to two lines, stay clear of the last nav link */
.header .button_link{flex:0 0 auto;white-space:nowrap;margin-left:12px}
.header .button_link > div:first-child{white-space:nowrap}
.flex_h_menu{flex-wrap:nowrap}
/* re-center the floating sticky "Coming Soon" button — the old [data-vc-waitlist]
   centering hook was removed with the waitlist, leaving the label off-center */
.inline_referral .button_link{display:inline-flex !important;align-items:center;justify-content:center;padding:14px 30px !important;min-width:174px;border-radius:16px !important;white-space:nowrap}
.inline_referral .button_link > div{width:auto !important;line-height:1 !important;display:flex;align-items:center;justify-content:center}

/* Hide the "Everything In One Kit" app-mockup section: its image was a course-era
   dashboard that overpromises software for a $29 template pack. Re-enable once the
   honest neon kit-showcase image (the real thumbnails) replaces builder-ui.jpg. */
.ui_section{display:none !important}