/* ============================================
   LANDING PAGE COMPONENT LIBRARY — ROOT CSS
   Core design system extracted from NextSaaS AI Voice Generator template.
   Link this file in every landing page: <link rel="stylesheet" href="root.css">
   ============================================ */

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ---------- GOOGLE FONT ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* ---------- CSS CUSTOM PROPERTIES ---------- */
:root {
  /* — Fonts — */
  --font-main: 'Inter Tight', system-ui, -apple-system, sans-serif;

  /* — Primary palette — */
  --primary-50:  #f4f2fe;
  --primary-100: #ece8ff;
  --primary-200: #dcd4ff;
  --primary-300: #c3b1ff;
  --primary-400: #a585ff;
  --primary-500: #864ffe;
  --primary-600: #7c31f6;
  --primary-700: #6d1fe2;
  --primary-800: #5a19be;

  /* — Neutrals — */
  --secondary:    #1a1a1c;
  --accent:       #fcfcfc;

  /* — Backgrounds — */
  --bg-1: #fcfcfd;
  --bg-2: #f9fafb;
  --bg-3: #f4f5f8;
  --bg-4: #f0f2f6;
  --bg-5: #13171e;
  --bg-6: #0f1217;
  --bg-7: #181d26;
  --bg-8: #070b10;
  --bg-9: #1f252f;
  --bg-10: #ebebeb;
  --bg-11: #b5b5b9;
  --bg-12: #eaeceb;

  /* — Strokes / Borders — */
  --stroke-1: #dfe4eb;
  --stroke-2: #e3e7ed;
  --stroke-3: #d7dde5;
  --stroke-10: #dfd1c5;

  /* — Accent colours — */
  --ns-yellow:       #f9eb57;
  --ns-green:        #c6f56f;
  --ns-red:          #ffb9a2;
  --ns-cyan:         #83e7ee;
  --ns-green-light:  #e8fbc6;
  --ns-cyan-light:   #cdf5f8;
  --ns-yellow-light: #fdf7bc;
  --ns-ivory:        #f4efe7;
  --ns-linen:        #beab9a;
  --ns-oatmeal:      #ecc5a2;

  /* — Gradients — */
  --gradient-1: linear-gradient(135deg, #a585ff 0%, #ffc2ad 100%);
  --gradient-2: linear-gradient(135deg, #f9eb57 0%, #f99988 100%);
  --gradient-4: linear-gradient(135deg, #864ffe 0%, #23eed6 100%);

  /* — Typography scale — */
  --text-h1:      4.25rem;
  --text-h2:      3.25rem;
  --text-h3:      2.5rem;
  --text-h4:      2rem;
  --text-h5:      1.5rem;
  --text-h6:      1.25rem;
  --text-body:    1rem;
  --text-small:   0.875rem;
  --text-xs:      0.75rem;

  /* — Shadows — */
  --shadow-1: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  --shadow-2: 0px 10px 20px -5px rgba(28, 34, 43, 0.05), 0px 20px 65px -5px rgba(28, 34, 43, 0.05);
  --shadow-3: 0px 25px 80px -12px rgba(28, 34, 43, 0.1);

  /* — Layout — */
  --container-max: 1290px;
  --container-px:  20px;

  /* — Radius — */
  --radius-full: 9999px;
  --radius-4xl:  2rem;
  --radius-2xl:  1rem;
  --radius-xl:   0.75rem;
}

/* ---------- BASE TYPOGRAPHY ---------- */
body {
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--secondary);
  background: #fff;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-main);
  color: var(--secondary);
  line-height: 1.2;
}

h1 { font-size: var(--text-h4); font-weight: 500; }
h2 { font-size: var(--text-h5); }
h3 { font-size: var(--text-h5); }
h4 { font-size: var(--text-h4); }
h5 { font-size: var(--text-h5); }
h6 { font-size: var(--text-h6); }

p {
  font-size: var(--text-small);
  color: rgba(26, 26, 28, 0.6);
  font-weight: 400;
  line-height: 1.5;
}

@media (min-width: 640px) {
  h1 { font-size: var(--text-h3); }
  h2 { font-size: var(--text-h4); }
  p  { font-size: var(--text-body); }
}
@media (min-width: 768px) {
  h1 { font-size: var(--text-h2); }
  h2 { font-size: var(--text-h3); }
}
@media (min-width: 1280px) {
  h1 { font-size: var(--text-h1); }
  h2 { font-size: var(--text-h2); }
  h3 { font-size: var(--text-h3); }
}

/* ---------- LAYOUT UTILITIES ---------- */
.container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-px);
  padding-right: var(--container-px);
}
@media (min-width: 1440px) {
  .container { padding-left: 0; padding-right: 0; }
}

.flex-center { display: flex; align-items: center; justify-content: center; }
.text-center { text-align: center; }
.text-left   { text-align: left; }

/* ---------- BADGE ---------- */
.badge {
  display: inline-block;
  font-size: var(--text-small);
  font-weight: 400;
  padding: 6px 20px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  text-transform: lowercase;
}
.badge::first-letter { text-transform: uppercase; }

.badge-ivory       { background: var(--ns-ivory);        color: var(--secondary); }
.badge-green       { background: var(--ns-green-light);  color: var(--secondary); }
.badge-yellow      { background: var(--ns-yellow-light); color: var(--secondary); }
.badge-cyan        { background: var(--ns-cyan-light);   color: var(--secondary); }
.badge-white       { background: #fff;                   color: rgba(26,26,28,0.6); }
.badge-metal       { background: rgba(252,252,252,0.1);  color: rgba(252,252,252,0.6); }
.badge-gray        { background: var(--bg-3);            color: rgba(26,26,28,0.6); }
.badge-primary     { background: var(--bg-4);            color: var(--primary-500); }
.badge-secondary   { background: var(--secondary);       color: #fff; font-weight: 500; }

/* ---------- BUTTONS ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-main);
  font-weight: 500;
  border-radius: var(--radius-full);
  white-space: nowrap;
  text-transform: lowercase;
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
}
.btn::first-letter { text-transform: uppercase; }
.btn:hover { transform: scale(1.02); }

/* sizes */
.btn-sm  { font-size: var(--text-small); padding: 6px 16px; }
.btn-md  { font-size: var(--text-small); padding: 10px 20px; min-width: 90px; }
.btn-lg  { font-size: var(--text-body);  padding: 10px 24px; }
.btn-xl  { font-size: var(--text-body);  padding: 14px 32px; }

/* colour variants */
.btn-primary   { background: var(--primary-500); color: #fff; border: 1px solid var(--primary-600); box-shadow: var(--shadow-1); }
.btn-secondary { background: var(--secondary);   color: #fff; border: 1px solid #000; box-shadow: var(--shadow-1); }
.btn-white     { background: #fff;               color: var(--secondary); border: 1px solid var(--stroke-3); box-shadow: var(--shadow-1); }
.btn-ghost     { background: transparent;         color: var(--secondary); border: 1px solid var(--stroke-3); }
.btn-accent    { background: rgba(252,252,252,0.2); color: #fff; border: none; backdrop-filter: blur(1px); }
.btn-gray      { background: var(--bg-1);         color: var(--secondary); border: none; box-shadow: var(--shadow-1); }
.btn-green     { background: var(--ns-green);     color: var(--secondary); border: 1px solid var(--ns-green-light); }
.btn-ivory     { background: var(--ns-ivory);     color: var(--secondary); border: none; }

.btn-primary:hover { background: var(--primary-600); }
.btn-secondary:hover { background: #333; }

/* Arrow icon for buttons (optional — add class btn-arrow) */
.btn-arrow::after {
  content: '';
  display: inline-block;
  width: 12px; height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5H13V7H11V5Z' fill='currentColor'/%3E%3Cpath d='M5 5H7V7H5V5Z' fill='currentColor'/%3E%3Cpath d='M14 8H16V10H14V8Z' fill='currentColor'/%3E%3Cpath d='M8 8H10V10H8V8Z' fill='currentColor'/%3E%3Cpath d='M17 11H19V13H17V11Z' fill='currentColor'/%3E%3Cpath d='M11 11H13V13H11V11Z' fill='currentColor'/%3E%3Cpath d='M14 14H16V16H14V14Z' fill='currentColor'/%3E%3Cpath d='M8 14H10V16H8V14Z' fill='currentColor'/%3E%3Cpath d='M11 17H13V19H11V17Z' fill='currentColor'/%3E%3Cpath d='M5 17H7V19H5V17Z' fill='currentColor'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
}
.btn-arrow:hover::after { transform: translateX(4px); }

/* ---------- CARDS ---------- */
.card {
  background: #fff;
  border-radius: var(--radius-4xl);
  padding: 24px;
  overflow: hidden;
}
.card-ivory   { background: var(--ns-ivory); }
.card-dark    { background: var(--secondary); color: #fff; }
.card-linen   { background: var(--ns-linen); }

/* ---------- SECTION SPACING ---------- */
.section       { padding: 80px 0; }
.section-lg    { padding: 80px 0; }
@media (min-width: 768px) {
  .section-lg  { padding: 120px 0; }
}
@media (min-width: 1024px) {
  .section-lg  { padding: 156px 0; }
}

/* ---------- GRID SYSTEM ---------- */
.grid-2  { display: grid; grid-template-columns: 1fr; gap: 24px; }
.grid-3  { display: grid; grid-template-columns: 1fr; gap: 24px; }
.grid-4  { display: grid; grid-template-columns: 1fr; gap: 24px; }

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- FOOTER LINKS ---------- */
.footer-link {
  font-size: var(--text-body);
  font-weight: 400;
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.footer-link::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 1px; width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s ease;
}
.footer-link:hover::before { transform: scaleX(1); transform-origin: left; }

/* ---------- MARQUEE (pure CSS fallback) ---------- */
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 30s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }

/* ---------- FADE-IN ANIMATION ---------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-in {
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }

/* ---------- HERO TEXT GRADIENT ---------- */
@keyframes textGradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.text-gradient {
  background-size: 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
  animation: textGradientShift 5s linear infinite;
}
.text-gradient-purple { background-image: linear-gradient(45deg, #a585ff, #ffc2ad, #a585ff); }
.text-gradient-cyan   { background-image: linear-gradient(45deg, #83e7ee, #f9eb57, #83e7ee); }

/* ---------- ACCENT TEXT COLOUR HELPERS ---------- */
.text-linen   { color: var(--ns-linen); }
.text-muted   { color: rgba(26, 26, 28, 0.6); }
.text-white   { color: #fff; }
.text-accent  { color: var(--accent); }

/* ---------- BACKGROUND HELPERS ---------- */
.bg-ivory     { background: var(--ns-ivory); }
.bg-white     { background: #fff; }
.bg-dark      { background: var(--secondary); }
.bg-linen     { background: var(--ns-linen); }

/* ---------- CHECK ICON (for feature lists) ---------- */
.check-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-small);
  color: var(--secondary);
  font-weight: 400;
}
.check-list li::before {
  content: '';
  flex-shrink: 0;
  width: 20px; height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='20' height='20' rx='10' fill='%231a1a1c'/%3E%3Cpath d='M9.31661 13.7561L14.7491 8.42144C15.0836 8.0959 15.0836 7.5697 14.7491 7.24416C14.4145 6.91861 13.8736 6.91861 13.539 7.24416L8.7116 11.9901L6.46096 9.78807C6.12636 9.46253 5.58554 9.46253 5.25095 9.78807C4.91635 10.1136 4.91635 10.6398 5.25095 10.9654L8.1066 13.7561C8.27347 13.9184 8.49253 14 8.7116 14C8.93067 14 9.14974 13.9184 9.31661 13.7561Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.check-list-light li::before {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='20' height='20' rx='10' fill='%23f4efe7'/%3E%3Cpath d='M9.31661 13.7561L14.7491 8.42144C15.0836 8.0959 15.0836 7.5697 14.7491 7.24416C14.4145 6.91861 13.8736 6.91861 13.539 7.24416L8.7116 11.9901L6.46096 9.78807C6.12636 9.46253 5.58554 9.46253 5.25095 9.78807C4.91635 10.1136 4.91635 10.6398 5.25095 10.9654L8.1066 13.7561C8.27347 13.9184 8.49253 14 8.7116 14C8.93067 14 9.14974 13.9184 9.31661 13.7561Z' fill='%231a1a1c'/%3E%3C/svg%3E");
}

/* ---------- PRICING TOGGLE ---------- */
.pricing-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--ns-ivory);
  border-radius: var(--radius-full);
  padding: 24px 57px;
  box-shadow: var(--shadow-1);
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.pricing-toggle input { display: none; }
.pricing-toggle .toggle-track {
  position: relative;
  width: 52px; height: 28px;
  border-radius: 34px;
  border: 1px solid rgba(223, 228, 235, 0.3);
}
.pricing-toggle .toggle-thumb {
  position: absolute;
  top: 50%; left: 2px;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform 0.3s ease;
}
.pricing-toggle input:checked ~ .toggle-track .toggle-thumb {
  transform: translateY(-50%) translateX(24px);
}

/* ---------- ACCORDION / FAQ ---------- */
.accordion-item { border-bottom: 1px solid var(--stroke-10); }
.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0;
  font-size: var(--text-h6);
  font-weight: 400;
  color: var(--secondary);
  cursor: pointer;
  text-align: left;
}
.accordion-trigger .icon {
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 10px;
}
.accordion-item.active .accordion-trigger .icon { transform: rotate(180deg); }
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.accordion-item.active .accordion-content {
  max-height: 500px;
  padding-bottom: 20px;
}
.accordion-content p { padding-top: 0; }

/* ---------- STAR RATING ---------- */
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 16px; height: 16px; fill: #f59e0b; }

/* ---------- FORM INPUTS ---------- */
.input {
  display: block;
  width: 100%;
  height: 45px;
  padding: 12px 18px;
  border: 1px solid var(--stroke-3);
  border-radius: var(--radius-full);
  font-size: var(--text-body);
  font-family: var(--font-main);
  background: var(--bg-1);
  color: var(--secondary);
  outline: none;
}
.input::placeholder { color: rgba(26, 26, 28, 0.6); font-weight: 400; }
.input:focus { border-color: var(--primary-500); }

/* ---------- MISC UTILITIES ---------- */
.rounded-full { border-radius: var(--radius-full); }
.rounded-4xl  { border-radius: var(--radius-4xl); }
.rounded-2xl  { border-radius: var(--radius-2xl); }
.overflow-hidden { overflow: hidden; }
.relative { position: relative; }
.mx-auto { margin-left: auto; margin-right: auto; }
.w-full { width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }