/*
  Quantumstate Interactive Redesign 09/2025
  Author: Christopher Lawrence
  */

/* ==========================================================================
   1. Design Tokens & Global Variables
   ========================================================================== */
:root {
  /* Color Palette */
  --color-background: #f8f9fa;
  --color-text: #212529;
  --color-text-muted: #6c757d;
  --color-primary: #0052cc;
  --color-accent: #ffc107;
  --color-accent-dark: #e0a800;
  --color-white: #ffffff;
  --color-border: #dee2e6;

  /* Typography */
  --font-primary: "Poppins", sans-serif;
  --font-secondary: "Inter", sans-serif;
  --line-height-base: 1.6;

  /* Layout */
  --container-max-width: 1120px;
  --container-padding: clamp(1rem, 1vw, .5rem);
  --border-radius: 8px;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
  
  /* UPDATED: Animation Variables (no extra spaces) */
  --typing-duration: 2.0s;
  --typing-steps: 12; /* "Quantumstate" */
  --interactive-slide-duration: 1.2s; 
}

/* ==========================================================================
   2. Base & Reset Styles
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* UPDATED FOR STICKY FOOTER */
html {
  scroll-behavior: smooth;
  height: 100%;
}
/* UPDATED FOR STICKY FOOTER */
body {
  margin: 0;
  font-family: var(--font-secondary);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

h1, h2, h3 { font-family: var(--font-primary); font-weight: 800; line-height: 1.2; margin: 0 0 0.75rem; }
p { margin: 0 0 1rem; color: var(--color-text-muted); font-size: 1.05rem; max-width: 65ch; }

/* ==========================================================================
   3. Layout: Container
   ========================================================================== */
.container { max-width: var(--container-max-width); margin-inline: auto; padding: var(--container-padding); }

/* ADDED FOR STICKY FOOTER */
main#content {
  flex: 1 0 auto;
}

/* ==========================================================================
   4. Hero Section (FINAL ALIGNMENT)
   ========================================================================== */
.hero { text-align: center; padding-top: clamp(3rem, 10vw, 6rem); padding-bottom:1.5rem;}

.hero__title {
  position: relative;
  font-size: clamp(2.5rem, 9vw, 5.5rem);
  letter-spacing: -0.02em;
  color: var(--color-primary);
  display: inline-block;
  margin-bottom: .5rem; 
}
.hero__title-line-1 { 
  line-height: 1; 
  color: var(--color-text); /* color black */
}

.hero__title-line-2 {
  position: absolute;
  bottom: -0.2em; /* Positioned below the line */
  top: 1.75rem;
  right: 0;
  line-height: 1;
}

/* ==========================================================================
   5. Kinetic Typography Animations (FINAL CORRECTION)
   ========================================================================== */
/* This rule controls the "curtain" reveal effect AND anchors the cursor */
.typing-container {
  display: inline-block;
  position: relative; /* Added to position the cursor */
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: typing var(--typing-duration) steps(var(--typing-steps), end) forwards;
}

/* This rule is now just for the text itself */
.hero__title--typing {
  display: inline-block;
}

/* This creates the cursor and attaches it to the expanding container */
.typing-container::after {
  content: '';
  position: absolute;
  top: 0.1em;
  bottom: 0.1em;
  right: 0; /* Corrected position */
  width: 3px;
  background-color: var(--color-text);
  animation:
    blink 0.75s step-end infinite,
    hide 1ms var(--typing-duration) forwards;
}


.hero__title--interactive {
  display: inline-block;
  font-size: clamp(1.2rem, 4vw, 2.5rem);
  font-weight: 700;
  transform: translateX(100%);
  opacity: 0;
  animation: 
    slideInFromRight var(--interactive-slide-duration) ease-out forwards;
  animation-delay: var(--typing-duration);
}



/* Animation Keyframes */
@keyframes typing {
  to { width: 100%; }
}

/* This creates a simple, repeating blink for the new cursor */
@keyframes blink {
  50% { opacity: 0; }
}

/* This runs once at the end to make the new cursor permanently invisible */
@keyframes hide {
  to { visibility: hidden; }
}

@keyframes slideInFromRight {
  0% { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}



/* ==========================================================================
   6. Call-to-Action (CTA) Buttons
   ========================================================================== */
.cta { display: inline-block; padding: 0.8rem 1.8rem; border-radius: 50px; background-color: var(--color-accent); color: var(--color-text); text-decoration: none; font-weight: 600; font-family: var(--font-secondary); font-size: 1.1rem; box-shadow: var(--shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; }
.cta:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); background-color: var(--color-accent-dark); }
.cta--secondary { background-color: var(--color-primary); color: var(--color-white); }
.cta--secondary:hover { background-color: #0041a3; }

/* ==========================================================================
   7. Proof & Services Sections
   ========================================================================== */
.proof {
  background-color: var(--color-white);
  padding-block: 1rem; /* Adjust this value for more/less vertical space */
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.services {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.proof__card { 
  max-width: 760px; 
  margin: 0 auto; 
  text-align: center; 
  padding: clamp(.5rem, 5vw, 1.5rem); 
}
.proof__title { font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 0.5rem; }
.proof__copy { margin: 0 auto 2rem; max-width: 60ch; font-size: 1.1rem; }

.services__grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(4, 1fr); }

.service-card { background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--border-radius); padding: 1.5rem; box-shadow: var(--shadow-sm); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.service-card h3 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.2rem; color: var(--color-text); }
.service-card p { margin: 0.25rem 0 0; font-size: 1rem; }
.service-card__icon { width: 1.2em; height: 1.2em; color: var(--color-primary); flex-shrink: 0; }

.mobile-break {
  display: none;
}

/* ==========================================================================
   8. Footer & Sticky Mobile CTA
   ========================================================================== */
.footer { text-align: center; padding-block: .2rem; background-color: var(--color-white); border-top: 1px solid var(--color-border); }
.footer small { color: var(--color-text-muted); }

.cta-mobile-sticky { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(5px); padding: 1rem; text-align: center; border-top: 1px solid var(--color-border); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); z-index: 1000; }
.footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ==========================================================================
   9. Responsive Design & Media Queries
   ========================================================================== */
@media (max-width: 1024px) { .services__grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 768px) {
  .hero__title { margin-bottom: 1.5rem; }
  .services__grid { grid-template-columns: 1fr; }
  .cta-mobile-sticky { display: block; }
  body { padding-bottom: 80px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

/*  @media (max-width: 768px) section */

.hero__title--interactive {
  /* This doubles the smallest size from the original clamp() function.
     You can adjust this value as needed. */
  font-size: 2rem;
}

/* Optional: This adjusts the vertical position to accommodate the larger text */
.hero__title-line-2 {
  bottom: -0.5em;
}
.mobile-break {
  display: block;
}