:root {
  /* Core Violet Spectrum */
  --violet-50:  #F7F7FB;
  --violet-100: #F1EFF8;
  --violet-200: #E5E2F2;
  --violet-300: #D0CAE8;
  --violet-400: #B6ACD9;
  --violet-500: #9C8AC8;
  --violet-600: #886FB8;
  --violet-700: #785EA5;
  --violet-800: #644D8A;
  --violet-900: #534171;
  --violet-950: #34294c;
  --violet-900-transparent: rgba(52, 41, 76, 0.8);
  --violet-100-transparent: hsla(253, 39%, 95%, 0.8);
  --dark: #2B1F42;

  /* Accent Colors */
  --accent-coral:     #EF767A;
  --accent-blue:      #3A86FF;
  --accent-lime:      #A3F7B5;
  --accent-clay:      #D7B49E;
  --accent-gold:      #D8A31D;
  --hover-accent:     #C2A0FF;
  --accent-electric-purple: #E304FC;
  

  /* Semantic Color Mapping */
  --color-bg:          var(--violet-950); /* overall background */
  --color-surface:     var(--violet-900); /* card/section bg on dark */
  --color-surface-alt: var(--violet-50);  /* card/section bg on light */
  --color-text:        var(--violet-50);  /* base text on dark */
  --color-heading:     var(--violet-100); /* big headlines */
  --color-muted:       var(--violet-400); /* supporting text */
  --color-primary:     var(--violet-600); /* main brand color */
  --color-accent:      var(--accent-coral); /* punchy CTA/emphasis */
  --color-accent2:    #DA4AB4
  ;
  --color-border:      var(--violet-800); /* dividers, outlines */
  --color-link:        var(--accent-coral); /* or accent-blue */
  --color-link-hover:  var(--violet-200);  /* lighter contrast on hover */
  --color-dark: var(--dark);


  --navbar-height: 60px;
  --navbar-offset: 1rem;
  --navbar-total-offset: calc(var(--navbar-height) + var(--navbar-offset));
  
  --brand-bg-transparent: var(--violet-900-transparent);
  --max-width: 1600px;

  --cabinet: 'Cabinet Grotesk', sans-serif;
  --satoshi: 'Satoshi', sans-serif;


}

html {
  font-size:13px;
}
body {
  font-family: var(--satoshi);
  font-weight: 400;
  line-height: 1.34;
  color: var(--color-bg); 
}

.brand-front {
  font-family: var(--cabinet);
}

.non-brand-font {
  font-family: var(--satoshi);
}

.container {
  
  max-width: var(--max-width);
}

.primary {
color: var(--violet-950);
}

.accent {
color:var(--accent-coral);
}

.navbar-wrapper {
position: sticky;
top: var(--navbar-offset);
height: var(--navbar-height);
z-index: 999;
display: flex;
align-items: center;
background: transparent;
}

.navbar-wrapper::before,
.navbar-wrapper::after {
content: '';
position: absolute;
top: 0;
height: 100%;
background:none;
z-index: 0;
width: max(calc((100vw - 1600px) / 2), 0px);
transition: background 0.3s ease;
}

.navbar-wrapper::before {
left: 0;
}

.navbar-wrapper::after {
right: 0;
background: transparent;
}

.navbar-container {
max-width: var(--max-width);
width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0;
z-index: 1;
position: relative;
background: transparent;
}
.logo-pill > * {
opacity: 0;
transform: translateY(-20px);
animation: slideIn 0.6s ease-out forwards;
}

.nav-pill > * {
opacity: 0;
transform: translateY(-20px);
animation: slideIn 0.6s ease-out forwards;
animation-delay: 0.15s;
}

.logo-pill,
.nav-pill {
transition: background 0.3s ease;
background:var(--color-accent2);
}


.navbar-wrapper.scrolled::before {
background: none;
}

.navbar-wrapper.scrolled .logo-pill {
background: var(--color-accent2);
transition: background 0.3s ease;
}

.navbar-wrapper.scrolled:hover .logo-pill {
background:var(--dark);
}

.navbar-wrapper.scrolled .logo-pill {
color: var(--violet-50);
}

.navbar-wrapper.scrolled::after {
  background: var(--violet-100);
}
  
.navbar-wrapper.scrolled .nav-pill {
background: var(--violet-100);
transition: background 0.3s ease;
}
  
.navbar-wrapper.scrolled:hover .nav-pill,
.navbar-wrapper.scrolled:hover::after  {
background:var(--violet-100);
}
  
.navbar-wrapper.scrolled .nav-links a {
color: var(--violet-900);
}

.navbar-wrapper.scrolled .hamburger span {
  background: var(--dark);
  }

body.cta-hovered .logo-pill,
body.cta-hovered .nav-pill {
background: transparent;
transition: background 0.3s ease;
}


body.cta-hovered .logo-pill  #lowgo {
  display: none;
}

body.cta-hovered {
.logo-pill,
.nav-pill,
.navbar-wrapper::before,
.navbar-wrapper::after,
.navbar-wrapper.scrolled .logo-pill,
.navbar-wrapper.scrolled .nav-pill,
.nav-links a {
  background: transparent;
  color: transparent;
  transition: background 0.3s ease;
}

}


@keyframes slideIn {
to {
  opacity: 1;
  transform: translateY(0);
}
}


/* Inside .logo-pill to inherit pill styling */
.logo-pill {
  height: var(--navbar-height);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  overflow: hidden;
  position: relative;
  

}

/* Morph container */
#lowgo {
  width: 100%;
  height: 100%;
  filter: url(#threshold) blur(0.4px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Text inside morph */
#text1, #text2 {
  position: absolute;
  width: 100%;
  text-align: center;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 2.54rem;
  font-weight: 800;
  color: var(--violet-50);
  user-select: none;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #lowgo, #text1, #text2 {
    animation: none !important;
    transition: none !important;
    filter: none !important;
  }
}

.nav-gap {
width: 24px;
background: transparent;
pointer-events: none;
}



.nav-pill {
display: flex;
align-items: center;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
height: var(--navbar-height);
padding: 0 2rem;
flex-grow: 1;
justify-content: space-between;
background: transparent;
}

.nav-links {
display: flex;
gap: 2rem;
margin-left: auto;
}

.nav-links a, .nav-links a:hover {
color:var(--violet-900);
font-family: var(--satoshi);
text-decoration: none;
font-weight: 400;
position: relative;
font-size: 1.34rem;
}

.nav-links a::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 100%;
height: 4px;
background: var(--violet-900);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}

.nav-links a:hover::after {   
transform: scaleX(1);
}

.hamburger {
display: none;
margin-left: 2rem;
cursor: pointer;
}

.hamburger span {
display: block;
height: 3px;
width: 30px;
background: var(--violet-50);
margin: 5px 0;
transition: all 0.3s ease;
}

.page-content {
margin-top: calc(-1 * var(--navbar-total-offset));
}

.no-wrap {
  white-space: nowrap;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cabinet);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.fw-bolder {
  font-weight: 800;
}

.fw-900 {
font-weight: 900;
}

/* Backgrounds */
.bg-page        { background-color: var(--color-bg); }
.bg-surface     { background-color: var(--color-surface); }
.bg-surface-alt { background-color: var(--color-surface-alt); }
.bg-primary     { background-color: var(--color-primary); }

/* Text Colors */
.text-heading   { color: var(--color-heading); }
.text-body      { color: var(--color-muted); }
.text-muted     { color: var(--color-muted); }
.text-accent    { color: var(--color-accent); }
.text-accent2    { color: var(--color-accent2); }

.text-primary   { color: var(--color-primary); }

/* Borders */
.border-color   { border-color: var(--color-border); }

/* Links */

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover {
  color: var(--color-link-hover);
}

a,
a:focus,
a:active,
a span.label {
  outline: none !important;
  -webkit-tap-highlight-color: transparent; /* 🧼 Removes iOS tap flash */
}

/* Buttons */
.btn-primary {
  font-weight: 600;
  padding: 0.75rem 1.5rem;
}

.btn-primary {
  font-weight: 600;
  padding: 0.75rem 1.5rem;
}

.btn-hero-cta,
.hold-submit-btn {
  position: relative;
  display: inline-block;
  padding: 1.15rem 3rem;
  font-family: var(--cabinet);
  font-size: 1.84rem;
  border-radius: 9999px;
  font-weight: 600;
  text-align: center;
  background: transparent;
  color: var(--color-text);
  z-index: 1;
  isolation: isolate; 
  text-decoration: none;
  background: linear-gradient(30deg, #34294c, #4c3d72 );

  -webkit-touch-callout: none;   /* Disable iOS callout (open in new tab etc.) */
  -webkit-user-select: none;     /* Disable text selection on iOS Safari */
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-tap-highlight-color: transparent; /* Remove gray highlight on tap */
  touch-action: manipulation; /* Prevent default gestures */
  outline: none;
}

.btn-hero-cta * {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

.btn-hero-cta .label {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  pointer-events: none;
}

.btn-hero-cta::before{
  content: '';
  position: absolute;
  inset: 0;
  padding: 4px;
  border-radius: 9999px;
  background: linear-gradient(
    135deg,
    var(--violet-500),
var(--violet-600),
var(--accent-coral),
var(--accent-blue)
  );

background-size: 300% 300%;
animation: rotate-gradient 6s linear infinite;

-webkit-mask: linear-gradient(rgba(255,255,255,0.99) 0 0) content-box, linear-gradient(rgba(255,255,255,0.99) 0 0);
-webkit-mask-composite: xor;
  
  mask: linear-gradient(rgba(255,255,255,0.99) 0 0) content-box, linear-gradient(rgba(255,255,255,0.99) 0 0);
  mask-composite: exclude;
  z-index: -1;
  pointer-events: none;
}

.hold-submit-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 4px;
  border-radius: 9999px;
  background: linear-gradient(
    135deg,
    var(--violet-500),
var(--violet-600),
var(--accent-coral),
var(--accent-blue)
  );

background-size: 300% 300%;
animation: rotate-gradient 6s linear infinite;

-webkit-mask: linear-gradient(rgba(255,255,255,0.99) 0 0) content-box, linear-gradient(rgba(255,255,255,0.99) 0 0);
-webkit-mask-composite: xor;
  
  mask: linear-gradient(rgba(255,255,255,0.99) 0 0) content-box, linear-gradient(rgba(255,255,255,0.99) 0 0);
  mask-composite: exclude;
  z-index: -1;
  pointer-events: none;
}

.btn-hero-cta:hover {
  color: var(--color-heading);
}

.btn-hero-cta:hover::before {
  background: var(--color-bg);
  mask: none;
  -webkit-mask: none;
  filter: brightness(1.1) saturate(0.85);
}



@keyframes rotate-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* other */


.display-1 {
  line-height:0.86;
  font-size:5.5rem;
}
.display-2 {
line-height:0.92;
font-size:4.75rem;
}
.display-3 {
line-height:0.72;
font-size:4rem;
}

p.display-2 {
 color: var(--color-surface);
}

.hero-headline {
  color:var(--color-text);
}
.hero-subhead, .display-2 span {
  color: var(--color-accent2);
}

section.hero > * {
  position: relative;
  z-index: 1;
}

section.hero h1.display-1 {
  font-size: 7.3rem;
  font-weight: 900;
  letter-spacing:normal;
}

.section-headline {
color: var(--violet-900);
}

.section-subhead {
color: var(-color-mute);
}

section.hero .hero-headline,
section.hero .hero-subtext,
section.hero .hero-subcta {
  color: var(--color-text);
  transition: color 0.3s ease;
}

section.hero {
  background-image: url('/assets/image/flying-fig_transparent_up.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: scroll;
  color: var(--color-text); 
  position: relative;
  z-index: 0;
  padding-top: 4rem;
  transition: background-image 0.3s ease-in-out;
}

@media (max-width: 991px) {
  section.hero {
    background-size: contain;
    background-position: top right;
    padding-top: 8rem;
  }
}
section.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      185deg,
      rgba(52, 41, 76, 0.28) 0%,       
      rgba(200, 77, 138, 0.13) 40%,    
      rgba(223, 237, 209, 0.18) 70%,   
      rgba(255, 255, 252, 0.36) 100%    
    );
  z-index: 0;
}

section.hero:has(.btn-hero-cta:hover) {
  background-color: var(--violet-50);
  background-image: url('/assets/image/flying-fig_transparent_down.webp');
  transition: background-image 0.2s, transform 0.2s;
  background-color: var(--color-bg);
  transition:  0.3s ease-in-out;
}

section.hero:has(.btn-hero-cta:hover)::before {
  background-color: color-mix(in srgb, var(--violet-50) 94%, transparent);
  background: linear-gradient(
      185deg,
      rgba(52, 41, 76, 0.98) 0%,       /* --violet-950 */
      rgba(100, 77, 138, 0.23) 40%,    /* --violet-800 */
      rgba(223, 137, 109, 0.28) 70%,   /* coral/gold pop */
      rgba(52, 41, 76, 0.96) 100%      /* fade back into base */
    );
}

section.hero .hero-headline,
section.hero h2,
section.hero p.lead{
  color: var(--violet-900);
}

section.hero:has(.btn-hero-cta:hover) .hero-headline,
section.hero:has(.btn-hero-cta:hover) h2,
section.hero:has(.btn-hero-cta:hover) p.lead{
  color: var(--violet-50);
}

section.hero:has(.btn-hero-cta:hover) .hero-subtext {
  color: var(--violet-800);
}

section.hero:has(.btn-hero-cta:hover) .hero-subcta {
  color: var(--accent-coral);
}

section.temp {
  background-color: var(--color-surface-alt);
}

#f64qForm.formContainer {
border: 3px solid var(--accent-electric-purple);
border-radius: 1rem;
padding: 2rem 1.5rem 3rem;
}

#f64qForm input,
#f64qForm textarea {
margin-bottom: 1rem;
padding: 0.75rem;
border-radius: 6px;
font-size: 1rem;
background-color: var(--color-surface-alt);
color: var(--color-text);
border: 1px solid var(--color-border);
}

#f64qForm input,
#f64qForm textarea {
color: var(--color-bg); /* usually light on dark bg */
background-color: var(--color-surface-alt); /* or another contrasting shade */
border: 1px solid var(--color-border);
border-radius: 6px;
padding: 0.75rem;
font-size: 1rem;
width: 100%;
box-sizing: border-box;
}

/* Placeholder fix if needed */
#f64qForm ::placeholder {
color: var(--color-muted); /* Slight contrast for hint text */
opacity: 1; /* Firefox fix */
}

/* Only validate *after* user attempts submit */
#f64qForm.was-validated input:invalid,
#f64qForm.was-validated textarea:invalid {
border: 2px solid #EF767A !important;
box-shadow: 0 0 0 3px rgba(239, 118, 122, 0.25);
}

#f64qForm.was-validated input:valid,
#f64qForm.was-validated textarea:valid {
border-color: var(--accent-lime);
box-shadow: 0 0 0 3px rgba(163, 247, 181, 0.25);
}

/* Optional: focus state */
#f64qForm input:focus,
#f64qForm textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(156, 138, 200, 0.25);
}

body.modal-open {
overflow: hidden;
}

.modal-overlay {
display: none;
position: fixed;
inset: 0;
background-color: rgba(255, 255, 255, 0.88); /* Soft light */
transition: background-color 0.3s ease;
z-index: 999;
justify-content: flex-end;
align-items: center;
padding: 1rem;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}

.modal-overlay.show {
display: flex;
background-color: rgba(255, 255, 255, 0.92);
opacity: 1;
pointer-events: auto;
}

/* Prevent flicker by applying the hover effect ONLY when modal is active */
.btn-hero-cta:hover ~ .modal-overlay {
background-color: rgba(255, 255, 255, 0.92);
}

.modal-content {
background: var(--color-bg);
color: var(--color-text);
width: 100%;
max-width: 500px;
height: 100%;
padding: 2rem;
position: relative;
overflow-y: auto;

}

.modal-illustration {
position: absolute;
bottom: 0;
width: 100%;
z-index: 0;
pointer-events: none;
opacity: 0.27;
}

@media (min-width: 768px) {
.modal-content {
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
  width: 50%;
  height: 100%;
}
}

.modal-content h2 {
font-family: var(--cabinet);
}

.modal-content input,
.modal-content textarea {
width: 100%;
padding: 0.75rem;
margin-bottom: 1rem;
background: var(--color-surface);
border: none;
border-radius: 6px;
color: var(--color-text);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
font-family: var(--satoshi);
}


.close-btn {
position: absolute;
top: 0;
right: 0.55rem;
font-size: 2rem;
background: none;
border: none;
color: var(--color-muted);
cursor: pointer;
}

.hold-submit-btn {
position: relative;
display: block;
margin: 1rem auto 0 auto; 

font-weight: 600;
color: var(--color-accent);
border: none;
border-radius: 999px;
overflow: hidden;
cursor: pointer;
user-select: none;
transition: all 0.3s ease;
}

.hold-submit-btn::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: var(--accent-electric-purple);
transform: scaleY(0);
transform-origin: bottom;
transition: transform 3s linear;
z-index: 0;
}

.hold-submit-btn .label {
position: relative;
z-index: 1;
color: var(--color-surface-alt);
transition: color 0.2s ease;
}

.hold-submit-btn.filling .label {
color: var(--color-heading); /* or keep the same for clarity */
}

.hold-submit-btn.filling::after {
transform: scaleY(1);
}

.form-hint {
color: var(--color-text);
font-size: 0.925rem;
margin-top: 0.5rem;
text-align: center;
}

.shake {
animation: shake 0.3s ease;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-6px); }
50% { transform: translateX(6px); }
75% { transform: translateX(-3px); }
}

/*  Guesswork section */

/* Update for section.guesswork gradient to visually continue from hero */
section.guesswork {
min-height: 65vh;
  display: flex;
  align-items: center;
}

.guesswork p.display-5 {
  padding-right: 10%;
}

.grow-line {
 
  white-space: normal; /* Allow wrapping */
  display: inline; /* Or inline-block if needed, but test */
  word-break: break-word; /* Optional: breaks long words gracefully */
}

#growTarget {
  transition: opacity 0.6s ease, transform 0.7s ease;
}

section.guesswork .col-9 {
background: linear-gradient(
  5deg, /* Opposite of 185deg */
  rgba(52, 41, 76, 0.36) 0%,      /* was 100% */
  rgba(223, 137, 109, 0.18) 30%,  /* was 70% */
  rgba(100, 77, 138, 0.13) 60%,   /* was 40% */
  rgba(52, 41, 76, 0.28) 100%     /* was 0% */
);
}



.fade-in-on-scroll {
opacity: 0;
transition: opacity 0.7s ease;
}

.fade-in-on-scroll.is-visible {
opacity: 1;
}



@media (max-width: 768px) {

  .navbar-container {
    justify-content: space-between;
    
  }

  .nav-pill {
    padding-right: 1rem;
    flex-grow: 0;
    flex-shrink:1;
  }
  
  .nav-links {
    display: none;
  }
  
  .hamburger {
    display: block;
    margin-left: auto; /* pushes it to the far right */
    padding-right: 1rem;
  }

  section.hero h1.display-1,
  .hero-subhead  {
    font-size: 3rem;
  }

  h2.display-1,
  .section-headline {
    font-size: 3rem;
  }

 
  p.lead {
    font-size: 1.1rem;
  }

  .logo-pill {
    font-size: 2rem;
  }

  .nav-links {
    display: none;
  }
  
  .modal-overlay {
    padding: 0;
  }

 .close-btn {
  right: 20px;
    font-size: 2.5rem;
    color: var(--accent-electric-purple);
    padding: 0;
  }

  #f64qForm.formContainer {
    padding: 2.3rem 0.35rem 3rem;
    border: none;
  }

}