/* ===== CSS VARIABLES ===== */
:root {
  /* Color Palette */
  --background-dark: #1A1A1A;
  --background-purple-dark: #1D1A21;
  --text-primary: #FFFFFF;
  --text-secondary: #A0A0A0;
  --accent-purple: #9B59B6;
  --accent-purple-hover: #A86CBF;

  /* Typography */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Lato', sans-serif;
  --font-button: 'Poppins', sans-serif;
  --font-microcopy: 'Lora', serif;

  /* Fluid Typography Clamps */
  --fs-h1: clamp(2.5rem, 5vw + 1rem, 4rem);
  --fs-subheading: clamp(1rem, 1vw + 0.75rem, 1.25rem);
  --fs-button: clamp(1rem, 0.75vw + 0.85rem, 1.125rem);
  --fs-microcopy: clamp(0.75rem, 0.5vw + 0.65rem, 0.875rem);

  /* Spacing */
  --section-padding-y: clamp(4rem, 10vw, 7.5rem);
  --container-padding-x: clamp(1rem, 5vw, 2rem);

  /* Container */
  --container-max-width: 68.75rem;
  --content-max-width: 43.75rem;

  /* Animation Timing */
  --transition-fast: 200ms;
  --transition-medium: 300ms;
  --transition-slow: 500ms;

  /* Z-index Layers */
  --z-background: -1;
  --z-content: 1;
  --z-overlay: 2;
}

/* ===== GLOBAL ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background-color: var(--background-dark);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}
.container {
  width: min(var(--container-max-width), 100% - (var(--container-padding-x) * 2));
  margin-inline: auto;
  position: relative;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.02em; }
h2 { font-weight: 600; font-size: 2.5rem; }
h3 { font-weight: 600; font-size: 1.8rem; }
p  { font-family: var(--font-body); color: var(--text-secondary); }

/* Buttons */
.btn {
  font-family: var(--font-button);
  font-weight: 600;
  font-size: var(--fs-button);
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  letter-spacing: 0.02em;
  transition: all var(--transition-medium) cubic-bezier(0.4, 0, 0.2, 1);
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; line-height: 1; position: relative; z-index: 2;
}
.btn-primary { background: var(--accent-purple); color: var(--text-primary); box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3); }
.btn-primary:hover { background: var(--accent-purple-hover); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(155, 89, 182, 0.4); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(155, 89, 182, 0.3); }
.btn-outline-light { border: 2px solid var(--text-primary); color: var(--text-primary); background: transparent; transition: background-color .2s, color .2s, transform .2s, border-color .2s; }
.btn-outline-light:hover { background: var(--text-primary); border-color: var(--text-primary); color: var(--background-dark); transform: translateY(-2px); }

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

/* ===== HEADER ===== */
.kodeally-header { background: transparent; box-shadow: none; border-bottom: none; transition: all .3s cubic-bezier(.4,0,.2,1); padding: 1.5rem 0; position: fixed; inset: 0 0 auto 0; z-index: 1000; transform: translateY(0); will-change: transform; }
.kodeally-header.nav-hidden { transform: translateY(-100%); transition: all .4s cubic-bezier(.4,0,.2,1); }
.kodeally-header.scrolled { background-color: rgba(26,26,26,0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(160,160,160,0.15); box-shadow: 0 4px 12px rgba(0,0,0,0.08); padding: 1rem 0; }
.kodeally-logo { display:flex; align-items:center; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.kodeally-logo:focus,
.kodeally-logo:active,
.kodeally-logo:focus-visible { outline:none !important; box-shadow:none !important; -webkit-tap-highlight-color:transparent; }
.kodeally-logo img { display:block; -webkit-user-select:none; user-select:none; }
.kodeally-nav-center { flex:1 1 auto; display:flex; justify-content:center; align-items:center; }
.navbar-nav { flex-direction: row; gap: .5rem; }
.kodeally-nav-link { font-family:'Montserrat',sans-serif; font-weight:600; font-size:1rem; color:#A0A0A0 !important; position:relative; padding:.5rem 1rem; transition:color .2s; background:none; }
.kodeally-nav-link:hover,.kodeally-nav-link:active { color:#fff !important; text-decoration:none; }
.kodeally-nav-link::after { content:''; display:block; width:0; height:2px; background:var(--accent-purple); transition:width .2s; margin:8px auto 0; border-radius:2px; }
.kodeally-nav-link:hover::after,.kodeally-nav-link:active::after { width:80%; }
.kodeally-header-cta { display:flex; align-items:center; }
.kodeally-ghost-btn { font-family:'Montserrat',sans-serif; font-weight:600; font-size:1rem; color:var(--accent-purple); border:1px solid var(--accent-purple); background:transparent; border-radius:8px; padding:8px 22px; transition:background .2s, color .2s, box-shadow .2s; box-shadow:none; }
.kodeally-ghost-btn:hover,.kodeally-ghost-btn:focus { background:var(--accent-purple); color:#fff; box-shadow:0 2px 12px rgba(155,89,182,0.15); }
@media (max-width:991px){ .kodeally-nav-center,.kodeally-header-cta{ display:none !important; } .kodeally-header{ padding:1rem 0; } }

/* ===== HERO ===== */
.hero-section { position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; padding: var(--section-padding-y) 0; }
.hero-section .container { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.hero-content { position:relative; z-index:5; text-align:center; width:100%; padding:2rem 0; }
.hero-section::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 50% 50%, rgba(155,89,182,.08) 0%, rgba(155,89,182,.05) 25%, rgba(26,26,26,.03) 50%, rgba(26,26,26,0) 100%); z-index:2; pointer-events:none; }
.hero-section::after { content:''; position:absolute; inset:0; background: linear-gradient(160deg, rgba(155,89,182,.07) 0%, rgba(26,26,26,0) 35%, rgba(26,26,26,0) 65%, rgba(155,89,182,.05) 100%); z-index:3; pointer-events:none; }
.network-pattern { position:absolute; inset:0; opacity:.45; z-index:4; overflow:hidden; mix-blend-mode:screen; pointer-events:none; }
.network-pattern svg{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(1.2); min-width:100%; min-height:100%; }
.network-pattern svg line{ stroke:#9B59B6; stroke-width:2; stroke-opacity:.3; }
.network-pattern svg circle{ fill:#9B59B6; fill-opacity:.5; }
.hero-title { margin-bottom:1.5rem; display:flex; flex-direction:column; align-items:center; gap:.25rem; }
.title-line { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; }
.title-word { opacity:0; transform:translateY(1rem); animation: fadeSlideUp .5s ease-out forwards; white-space:nowrap; }
.hero-subtitle { max-width:var(--content-max-width); margin:0 auto 3rem; font-size:var(--fs-subheading); opacity:0; transform:translateY(1rem); animation: fadeSlideUp .5s ease-out .8s forwards; display:flex; flex-direction:column; align-items:center; gap:.25rem; }
.subtitle-line { display:block; line-height:1.4; }
.title-line:nth-child(1) .title-word:nth-child(1){animation-delay:.3s} .title-line:nth-child(1) .title-word:nth-child(2){animation-delay:.4s} .title-line:nth-child(1) .title-word:nth-child(3){animation-delay:.5s} .title-line:nth-child(2) .title-word:nth-child(1){animation-delay:.6s} .title-line:nth-child(2) .title-word:nth-child(2){animation-delay:.7s}
.hero-cta { display:flex; flex-direction:column; align-items:center; gap:.75rem; position:relative; z-index:10; margin-top:2rem; }
.hero-cta .btn { min-width:200px; font-weight:600; background-color:var(--accent-purple); color:var(--text-primary); padding:1.25rem 2.5rem; font-size:1.125rem; box-shadow:0 4px 15px rgba(155,89,182,.3); transition:all .3s ease; }
.hero-cta .btn:hover{ background-color:var(--accent-purple-hover); transform:translateY(-2px); box-shadow:0 6px 20px rgba(155,89,182,.4); }
.cta-microcopy { font-family:var(--font-microcopy); font-size:var(--fs-microcopy); color:var(--text-secondary); opacity:.9; margin-top:.5rem; position:relative; z-index:10; font-style:italic; letter-spacing:.02em; font-weight:500; }
@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeSlideUp{from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}
@media (max-width:768px){ .hero-section{ min-height:100vh; padding:60px 0 0 } .hero-section .container{ padding:60px 0 } .hero-content{ padding:1.5rem 1rem } .hero-title{ margin-bottom:1.25rem; gap:.2rem; font-size:2.5rem; line-height:1.2 } .hero-subtitle{ margin-bottom:2.5rem; padding:0 1rem; gap:.2rem; font-size:1rem; max-width:90% } .hero-cta .btn{ padding:1rem 2rem; font-size:1rem; min-width:180px; min-height:2.75rem } }
@media (max-width:576px){ .hero-section .container{ padding:50px 0 } .hero-title{ font-size:2.25rem } .hero-subtitle{ font-size:.875rem; max-width:95% } .title-line{ gap:.35rem } }
@media (max-width:375px){ .title-line{ flex-direction:column; gap:.15rem } .title-word{ text-align:center } }

/* ===== SECTION TITLE ===== */
.section-title { font-size:2.5rem; font-weight:600; margin-bottom:3rem; text-align:center; background:linear-gradient(135deg, var(--text-primary) 0%, rgba(255,255,255,.9) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ===== PROBLEM ===== */
.problem-section { position:relative; background:linear-gradient(180deg, var(--background-purple-dark) 0%, var(--background-dark) 100%); padding: var(--section-padding-y) 0 calc(var(--section-padding-y) * .25); overflow:hidden; }
.problem-section .section-title { font-size: clamp(2rem, 3vw + 1rem, 3rem); margin-bottom:4rem; max-width:800px; margin-inline:auto; line-height:1.2; background:linear-gradient(135deg, var(--text-primary) 0%, rgba(255,255,255,.9) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.problem-pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; position:relative; }
.problem-pillar { display:flex; flex-direction:column; align-items:center; text-align:center; padding:2rem; position:relative; transition:transform .3s ease; }
.problem-pillar:hover { transform:translateY(-5px); }
@media (min-width:992px){ .problem-pillar:not(:last-child)::after{ content:''; position:absolute; right:-1rem; top:10%; height:80%; width:1px; background:linear-gradient(180deg, rgba(155,89,182,0) 0%, rgba(155,89,182,.25) 50%, rgba(155,89,182,0) 100%);} }
.problem-icon { width:clamp(3.5rem, 3vw + 2.5rem, 4.5rem); height:clamp(3.5rem, 3vw + 2.5rem, 4.5rem); color:var(--accent-purple); margin-bottom:1.5rem; filter: drop-shadow(0 2px 8px rgba(155,89,182,.2)); transition:all .3s ease; }
.problem-pillar:hover .problem-icon { color:var(--accent-purple-hover); transform:scale(1.05) translateY(-2px); filter: drop-shadow(0 4px 12px rgba(155,89,182,.3)); }
.problem-pillar-title { font-weight:600; font-size:clamp(1.25rem, 1vw + 1rem, 1.5rem); color:var(--text-primary); margin-bottom:1rem; }
.problem-pillar-description { font-size:clamp(1rem, .5vw + .875rem, 1.125rem); color:var(--text-secondary); line-height:1.6; max-width:300px; margin:0 auto; }
@media (max-width:768px){ .problem-section{ padding: calc(var(--section-padding-y) * .8) 0 } .problem-section .section-title{ margin-bottom:3rem; padding:0 1rem; font-size:2rem } .problem-pillars{ display:flex; flex-direction:column; gap:.75rem } .problem-pillar{ padding:1.5rem 1rem } .problem-pillar::after{ display:none } .problem-icon{ width:3.5rem; height:3.5rem } }
@media (max-width:576px){ .problem-section .section-title{ margin-bottom:2.5rem; font-size:1.875rem } .problem-pillars{ gap:.5rem } .problem-pillar:not(:last-child){ border-bottom:1px solid rgba(155,89,182,.1); padding-bottom:1.5rem } }

/* ===== SOLUTION ===== */
.solution-section { margin-top: calc(var(--section-padding-y) * -0.125); background:#1A1A1A; padding: calc(var(--section-padding-y) * .5) 0 calc(var(--section-padding-y) * .125); scroll-margin-top:5rem; }
.solution-transition { font-family:var(--font-microcopy); font-size:1.25rem; color:var(--text-secondary); text-align:center; margin-bottom:1.5rem; font-style:italic; letter-spacing:.01em; }
.solution-section .section-title { font-weight:600; font-size:clamp(2rem, 3vw + 1.5rem, 3rem); margin-bottom:4rem; max-width:800px; margin-inline:auto; background:linear-gradient(135deg, var(--text-primary) 0%, rgba(255,255,255,.9) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.solution-pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; max-width:75rem; margin:0 auto; padding-bottom:5rem; }
.solution-pillar { display:flex; flex-direction:column; align-items:center; text-align:center; padding:2rem; position:relative; transition: all .4s cubic-bezier(.165,.84,.44,1); border-radius:16px; }
.solution-pillar:hover { transform:translateY(-12px); }
.solution-pillar::after { content:''; position:absolute; inset:0; border-radius:16px; background: radial-gradient(circle at center, rgba(255,255,255,.03) 0%, transparent 70%); opacity:0; transition:all .4s cubic-bezier(.165,.84,.44,1); z-index:-1; }
.solution-pillar:hover::after{ opacity:1; transform:scale(1.1) }
.solution-pillar-icon { width:clamp(3.5rem, 3vw + 2.5rem, 4.5rem); height:clamp(3.5rem, 3vw + 2.5rem, 4.5rem); color:var(--accent-purple); margin-bottom:1.5rem; filter: drop-shadow(0 2px 8px rgba(155,89,182,.2)); transition: all .4s cubic-bezier(.165,.84,.44,1); }
.solution-pillar:hover .solution-pillar-icon{ transform:scale(1.1); filter: drop-shadow(0 4px 12px rgba(155,89,182,.4)) }
.solution-pillar-title { font-weight:600; font-size:clamp(1.25rem, 1vw + 1rem, 1.5rem); color:var(--text-primary); margin-bottom:1rem; }
.solution-pillar-description { font-size:clamp(1rem, .5vw + .875rem, 1.125rem); color:var(--text-secondary); line-height:1.6; max-width:300px; margin:0 auto; }
@media (max-width:768px){ .solution-section{ padding: calc(var(--section-padding-y) * .8) 0 } .solution-transition{ font-size:1rem; margin-bottom:1.25rem } .solution-section .section-title{ font-size:2rem; margin-bottom:3rem; padding:0 1rem } .solution-pillars{ display:flex; flex-direction:column; gap:.75rem; padding-bottom:3rem } .solution-pillar{ padding:1.5rem 1rem } .solution-pillar::before{ display:none } .solution-pillar-title{ font-size:1.25rem; margin-bottom:.75rem } .solution-pillar-description{ font-size:1rem; max-width:90% } .solution-pillar-icon{ width:3.5rem; height:3.5rem; margin-bottom:1rem } }
@media (max-width:576px){ .solution-section .section-title{ margin-bottom:2.5rem } .solution-pillars{ gap:.5rem } .solution-pillar:not(:last-child){ border-bottom:1px solid rgba(155,89,182,.1); padding-bottom:1.5rem } .solution-pillar:hover{ transform:translateY(-6px) } }

/* ===== HOW IT WORKS ===== */
.how-it-works-section { margin-top: calc(var(--section-padding-y) * -0.075); background:#1A1A1A; padding: calc(var(--section-padding-y) * .25) 0; position:relative; overflow:hidden; }
.how-it-works-section .section-title { text-align:center; font-size:clamp(2rem, 3vw + 1.5rem, 3rem); margin-bottom:5rem; background:linear-gradient(135deg, var(--text-primary) 0%, rgba(255,255,255,.9) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.timeline-container { position:relative; max-width:1200px; margin:0 auto; padding:0 1rem; }
.timeline-line { position:absolute; left:50%; top:0; bottom:0; width:2px; background: linear-gradient(to bottom, transparent, #A0A0A0 10%, #A0A0A0 90%, transparent); transform:translateX(-50%); opacity:.2; }
.timeline-line::before{ content:''; position:absolute; top:0; left:0; right:0; bottom:100%; background:linear-gradient(to bottom, transparent, #A0A0A0); animation: drawLine 1.5s ease forwards; animation-play-state: paused; }
@keyframes drawLine{ to{ bottom:0 } }
.timeline-step { position:relative; margin-bottom:3rem; opacity:0; transform:translateY(20px); transition: all .6s cubic-bezier(.165,.84,.44,1); }
.timeline-step.animate-in{ opacity:1; transform:translateY(0) }
.timeline-step:last-child{ margin-bottom:0 }
.timeline-content { position:relative; width:calc(50% - 2rem); padding:1.5rem; background:rgba(255,255,255,.02); border-radius:16px; transition: all .4s cubic-bezier(.165,.84,.44,1); }
.timeline-step:nth-child(odd) .timeline-content{ margin-left:auto; margin-right:2rem }
.timeline-step:nth-child(even) .timeline-content{ margin-left:2rem }
.timeline-content:hover{ transform:translateY(-8px); background:rgba(255,255,255,.03) }
.timeline-dot { position:absolute; top:2rem; left:calc(50% - 8px); width:16px; height:16px; background:var(--accent-purple); border-radius:50%; box-shadow:0 0 0 4px rgba(155,89,182,.1); transition: all .4s ease; }
.timeline-content:hover + .timeline-dot { transform:scale(1.2); box-shadow:0 0 0 6px rgba(155,89,182,.2) }
.step-number { position:absolute; top:50%; right:1rem; transform:translateY(-50%); font-family:'Poppins',sans-serif; font-weight:700; font-size:clamp(6rem, 10vw, 8rem); color:#282828; opacity:.65; z-index:0; pointer-events:none; }
.step-icon { width:3rem; height:3rem; background:rgba(155,89,182,.1); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; transition: all .3s ease; }
.step-icon svg{ width:1.75rem; height:1.75rem; color:var(--accent-purple); transition:transform .3s ease }
.timeline-content:hover .step-icon{ transform:scale(1.1); box-shadow:0 6px 16px rgba(155,89,182,.3) }
.step-title { font-weight:600; font-size:clamp(1.25rem, 1.5vw + 1rem, 1.5rem); color:#fff; margin-bottom:.75rem; position:relative; z-index:1; }
.step-description { font-size:clamp(.95rem, .85vw + .65rem, 1.1rem); color:#A0A0A0; line-height:1.6; position:relative; z-index:1; }
@media (max-width:768px){ .how-it-works-section{ padding: calc(var(--section-padding-y) * .8) 0; margin-top: calc(var(--section-padding-y) * -0.8) } .how-it-works-section .section-title{ font-size:2rem; margin-bottom:3rem; padding:0 1rem } .timeline-content{ width:calc(100% - 3rem); margin-left:3rem !important; margin-right:0 !important; padding:1.5rem; text-align:left } .timeline-line{ left:0; transform:none } .timeline-dot{ left:-8px !important } .step-number{ opacity:.7; font-size:clamp(6rem, 12vw, 8rem) } }
@media (max-width:576px){ .how-it-works-section .section-title{ margin-bottom:2.5rem } .timeline-content{ padding:1.25rem; width:calc(100% - 2.5rem); margin-left:2.5rem !important } .timeline-step{ margin-bottom:3rem } .step-number{ opacity:.6; right:.75rem; font-size:clamp(5rem, 10vw, 6rem) } .timeline-dot{ left:-6px !important } }

/* ===== GUARANTEE ===== */
.guarantee-bar{ margin: calc(var(--section-padding-y) * .65) 0; padding:1rem 0; position:relative }
.guarantee-container{ display:flex; justify-content:center; align-items:center; gap:3.5rem; max-width:var(--container-max-width); margin:0 auto; padding:0 var(--container-padding-x) }
.guarantee-item{ display:flex; align-items:center; gap:.75rem }
.guarantee-bullet{ color:var(--accent-purple); font-size:1.25rem; position:relative; top:-.2em; }
.guarantee-title{ font-family:var(--font-heading); font-weight:500; font-size:1.125rem; color:var(--text-primary); white-space:nowrap }
@media (max-width:768px){ .guarantee-bar{ margin: calc(var(--section-padding-y) * -0.2) 0 } .guarantee-container{ flex-direction:column; gap:1rem; padding:.5rem var(--container-padding-x) } .guarantee-item{ justify-content:center; text-align:center } .guarantee-title{ font-size:1rem } }

/* ===== PRICING ===== */
.pricing-section{ padding: calc(var(--section-padding-y) * .5) 0 var(--section-padding-y); background:var(--background-dark); position:relative; overflow:hidden; margin-top: calc(var(--section-padding-y) * -0.25) }
@media (max-width:768px){ .pricing-section{ margin-top: calc(var(--section-padding-y) * 0.25) } }
.pricing-toggle{ display:flex; align-items:center; justify-content:center; gap:.5rem; margin-bottom:4rem; padding:.25rem; background:rgba(155,89,182,.1); border-radius:2rem; width:fit-content; margin-inline:auto }
.toggle-option{ font-family:var(--font-button); font-weight:500; font-size:1rem; padding:.75rem 1.5rem; border-radius:1.5rem; border:none; background:transparent; color:var(--text-secondary); cursor:pointer; transition:all var(--transition-medium) }
.toggle-option.active{ background:var(--accent-purple); color:var(--text-primary) }
.save-tag{ font-family:var(--font-microcopy); font-size:.875rem; color:var(--accent-purple); margin-left:.5rem; font-style:italic; transition:color var(--transition-medium) }
.toggle-option.active .save-tag{ color:var(--text-primary) }
.pricing-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; max-width:75rem; margin:0 auto 5rem; padding:0 var(--container-padding-x) }
.pricing-card{ background:rgba(255,255,255,.02); border:1px solid rgba(155,89,182,.1); border-radius:1rem; padding:2.5rem; position:relative }
.pricing-card.featured{ background:rgba(155,89,182,.05); border-color:var(--accent-purple) }
.popular-tag{ position:absolute; top:-1rem; right:2rem; background:var(--accent-purple); color:#fff; font-family:var(--font-microcopy); font-size:.875rem; font-weight:500; padding:.5rem 1rem; border-radius:1rem; letter-spacing:.05em }
.card-title{ font-size:1.5rem; margin-bottom:1.5rem; color:var(--text-primary) }
.price-container{ margin-bottom:1.5rem }
.price{ font-family:var(--font-heading); font-size:3.5rem; font-weight:700; color:var(--text-primary); line-height:1 }
.price-period{ font-size:1rem; color:var(--text-secondary); margin-top:.5rem }
.card-description{ color:var(--text-secondary); font-size:1rem; line-height:1.6; margin-bottom:2rem }
.feature-divider{ height:1px; background:linear-gradient(to right, transparent, rgba(155,89,182,.35), transparent); margin:2rem 0 }
.core-feature{ font-family:var(--font-heading); font-size:1.125rem; font-weight:600; color:var(--text-primary); margin-bottom:1.5rem; text-align:center; padding:.5rem 0 }
.feature-list{ list-style:none; margin:0 0 2.5rem; padding:0 }
.feature-list li{ color:var(--text-secondary); font-size:1rem; margin-bottom:1rem; padding-left:1.75rem; position:relative }
.feature-list li::before{ content:"✓"; position:absolute; left:0; color:var(--accent-purple) }
.feature-list li.no-check{ padding-left:0 } .feature-list li.no-check::before{ content:none }
.feature-list .featured-feature{ color:var(--text-primary); font-weight:500 }
.pricing-card .btn{ display:block; width:100%; margin-top:auto; text-align:center; padding:1rem; font-size:1rem; transition: background-color .2s, transform .2s }
.btn-outline-purple{ border:2px solid var(--accent-purple); color:var(--accent-purple); background:transparent; transition: background-color .2s, color .2s, transform .2s, border-color .2s }
.btn-outline-purple:hover{ background:var(--accent-purple); border-color:var(--accent-purple); color:#fff; transform:translateY(-2px) }
@media (max-width:991px){ .pricing-cards{ grid-template-columns:1fr; gap:3rem } .pricing-card{ max-width:35rem; margin:0 auto } }
@media (max-width:768px){ .pricing-toggle{ flex-direction:column; gap:.75rem; margin-bottom:3rem; width:100% } .toggle-option{ width:100%; text-align:center } .pricing-cards{ display:flex; flex-direction:column; gap:2rem } .pricing-card:not(.featured){ order:2 } .pricing-card.featured{ order:1 } .pricing-card{ padding:1.5rem; max-width:none; margin:0 } .card-title{ font-size:1.25rem; margin-bottom:1rem } .price-container{ margin-bottom:1rem } .card-description{ font-size:.875rem; line-height:1.5; margin-bottom:1.5rem } .feature-divider{ margin:1.5rem 0 } .core-feature{ font-size:1rem; margin-bottom:1rem } .feature-list{ margin:0 0 2rem } .feature-list li{ font-size:.875rem; margin-bottom:.75rem; padding-left:1.5rem } .mobile-only{ display:block } .desktop-only{ display:none } .mobile-bottom{ font-weight:500 } }
@media (max-width:576px){ .price{ font-size:3rem } .card-title{ font-size:1.25rem } .core-feature{ font-size:1rem } }
@media (min-width:769px){ .mobile-only{ display:none } .desktop-only{ display:block } }

/* ===== COMPARISON ===== */
.comparison-section{ padding: calc(var(--section-padding-y) * .35) 0 var(--section-padding-y); background:var(--background-dark); position:relative; overflow:hidden; margin-top: calc(var(--section-padding-y) * -0.15) }
.comparison-section .container{ max-width:80%; width:80%; margin-inline:auto }
.comparison-grid{ display:grid; grid-template-columns:1.8fr 1.6fr 1.2fr 1.2fr 1.2fr; gap:1.5rem; margin-top:4rem; position:relative }
.comparison-column{ background:#212121; border-radius:1rem; overflow:hidden; display:flex; flex-direction:column }
.comparison-column.kodeally-column{ background:linear-gradient(135deg, rgba(155,89,182,.15) 0%, rgba(155,89,182,.08) 100%); border:1px solid rgba(155,89,182,.25); position:relative; z-index:1; box-shadow:0 4px 20px rgba(155,89,182,.08); transform:scale(1.02); margin-block:-.5rem; padding-block:.5rem }
.column-header{ padding:1.75rem; text-align:center; position:relative; height:90px; display:flex; align-items:center; justify-content:center }
.column-header::after{ content:''; position:absolute; bottom:0; left:2rem; right:2rem; height:1px; background:rgba(155,89,182,.3); border-radius:1px }
.column-header h3{ font-family:var(--font-heading); font-size:1.125rem; font-weight:600; color:var(--text-primary); margin:0 }
.kodeally-column .column-header h3{ font-size:1.75rem; letter-spacing:-.01em; color:var(--accent-purple) }
.feature-row{ padding:1.5rem 2rem; position:relative; height:80px; display:flex; align-items:center; justify-content:center }
.feature-row:not(:last-child)::after{ content:''; position:absolute; bottom:0; left:2rem; right:2rem; height:1px; background:rgba(155,89,182,.3); border-radius:1px }
.feature-column .feature-row{ font-family:var(--font-heading); font-size:1rem; font-weight:500; color:var(--text-primary); justify-content:flex-start }
.feature-row-content{ display:flex; align-items:center; gap:.75rem }
.feature-text{ font-size:.95rem; color:var(--text-secondary) }
.kodeally-column .feature-text{ font-size:1.05rem; color:var(--text-secondary) }
.circle-icon{ width:1.5rem; height:1.5rem; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; line-height:1 }
.circle-icon-outline{ border:.125rem solid rgba(155,89,182,.5); color:var(--accent-purple) }
.kodeally-column .circle-icon-filled{ background:var(--accent-purple); color:#fff; border:none; display:flex; align-items:center; justify-content:center }
.circle-icon svg{ width:1rem; height:1rem }
@media (max-width:1200px){ .comparison-grid{ gap:1rem } .feature-row{ padding:1.5rem } }
@media (max-width:991px){ .comparison-grid{ grid-template-columns:200px repeat(2,1fr); overflow-x:auto; padding-bottom:1rem; gap:1rem; scroll-snap-type:x mandatory } .comparison-column.kodeally-column{ transform:scale(1.01); margin-block:-.25rem; padding-block:.25rem } .comparison-column:not(.feature-column){ scroll-snap-align:start; min-width:280px } }
@media (max-width:768px){ .comparison-grid{ display:none !important } .comparison-mobile{ display:flex; flex-direction:column; margin-top:3rem } .comparison-section .container{ max-width:100% !important; width:100% !important; padding:0 !important; margin:0 !important } }
/* Mobile comparison controls */
.comparison-button-container{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; margin-bottom:2rem; padding:0 1rem }
.comparison-button-container::-webkit-scrollbar{ display:none }
.comparison-buttons{ display:flex; gap:1rem; min-width:max-content; padding:.5rem 0 }
.comparison-btn{ background:#212121; border:1px solid rgba(255,255,255,.1); border-radius:.75rem; padding:1rem 1.5rem; color:var(--text-secondary); font-size:1rem; font-weight:500; cursor:pointer; transition:all .3s ease; white-space:nowrap; min-width:120px; text-align:center; position:relative; overflow:hidden }
.comparison-btn[data-target="kodeally"]{ font-size:1.125rem; font-weight:600 }
.comparison-btn::before{ content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(155,89,182,.1), transparent); transition:left .3s ease }
.comparison-btn:hover::before{ left:100% }
.comparison-btn:hover{ border-color:rgba(155,89,182,.3); color:#fff; transform:translateY(-1px) }
.comparison-btn.active{ background:var(--accent-purple); border-color:var(--accent-purple); color:#fff; box-shadow:0 4px 12px rgba(155,89,182,.3) }
.comparison-feature-card,.comparison-details-card{ background:#212121; border-radius:1rem; border:1px solid rgba(255,255,255,.1); overflow:hidden; flex:1; min-width:0; width:50% }
.comparison-cards-container{ display:flex; gap:1rem; margin-top:2rem; padding:0 1rem; width:100% }
.comparison-feature-list{ padding:1.5rem }
.comparison-feature-item{ display:flex; align-items:center; padding:1.25rem 0; border-bottom:1px solid rgba(255,255,255,.05); min-height:4rem; height:4rem; transition:all .3s ease }
.comparison-feature-item:last-child{ border-bottom:none }
.feature-name{ font-weight:500; color:#fff; width:100%; font-size:.9rem; line-height:1.4 }
.feature-value{ color:var(--text-secondary); text-align:center; width:100%; display:flex; justify-content:center; align-items:center; font-size:.9rem; line-height:1.4; padding:0 .5rem }
.comparison-panel{ display:none; opacity:0; transform:translateY(10px); transition: all .4s cubic-bezier(.4,0,.2,1) }
.comparison-panel.active{ display:block; opacity:1; transform:translateY(0) }
@keyframes fadeInUp{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.comparison-panel.active .comparison-feature-item{ animation: fadeInUp .4s ease forwards }
.comparison-panel.active .comparison-feature-item:nth-child(1){animation-delay:.1s} .comparison-panel.active .comparison-feature-item:nth-child(2){animation-delay:.15s} .comparison-panel.active .comparison-feature-item:nth-child(3){animation-delay:.2s} .comparison-panel.active .comparison-feature-item:nth-child(4){animation-delay:.25s} .comparison-panel.active .comparison-feature-item:nth-child(5){animation-delay:.3s} .comparison-panel.active .comparison-feature-item:nth-child(6){animation-delay:.35s} .comparison-panel.active .comparison-feature-item:nth-child(7){animation-delay:.4s}

/* ===== FOUNDER ===== */
.founder-section{ padding: calc(var(--section-padding-y) * .35) 0 var(--section-padding-y); background:var(--background-dark); position:relative; overflow:hidden; margin-top: calc(var(--section-padding-y) * .4) }
.founder-intro{ max-width:50rem; margin:0 auto 4rem; text-align:center; padding:0 var(--container-padding-x) }
.founder-intro p{ font-size:1.25rem; line-height:1.6; color:var(--text-secondary); margin-top:1.5rem }
.founder-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; max-width:75rem; margin:0 auto; padding:0 var(--container-padding-x) }
.founder-card{ background:#212121; border:1px solid rgba(255,255,255,.1); border-radius:1rem; padding:2.5rem; text-align:center; transition: transform .3s, border-color .3s, box-shadow .3s }
.founder-card:hover{ transform:translateY(-.5rem); border-color:rgba(155,89,182,.3); box-shadow:0 1rem 2rem rgba(155,89,182,.1) }
.founder-image{ width:10rem; height:10rem; border-radius:50%; margin:0 auto 1.5rem; position:relative; padding:.125rem; background:var(--accent-purple); transition: transform .3s, padding .3s }
.founder-image::after{ content:''; position:absolute; inset:.125rem; border-radius:50%; background:#212121 }
.founder-card:hover .founder-image{ transform:scale(1.05); padding:.1875rem }
.founder-card:hover .founder-name{ color:var(--accent-purple) }
.founder-image img{ width:100%; height:100%; border-radius:50%; object-fit:cover; position:relative; z-index:1; filter:grayscale(100%); transition:filter .3s }
.founder-card:hover .founder-image img{ filter:grayscale(70%) }
.founder-name{ font-size:1.5rem; font-weight:600; color:#fff; margin-bottom:.25rem; transition:color .3s }
.founder-title{ font-size:1rem; font-weight:400; color:var(--text-secondary); margin-bottom:1rem }
.founder-bio{ font-size:1rem; line-height:1.6; color:var(--text-secondary); margin-bottom:1.5rem }
@media (max-width:991px){ .founder-cards{ grid-template-columns:repeat(2,1fr); max-width:50rem } .founder-image{ width:9rem; height:9rem } }
@media (max-width:768px){ .founder-intro p{ font-size:1.125rem } .founder-cards{ grid-template-columns:1fr; max-width:25rem; gap:1.5rem } .founder-card{ padding:2rem } .founder-image{ width:8rem; height:8rem } .founder-name{ font-size:1.375rem } }

/* ===== FAQ ===== */
.faq-section{ padding: calc(var(--section-padding-y) * .35) 0; background:var(--background-dark); position:relative; overflow:hidden; margin-top: calc(var(--section-padding-y) * .4) }
.faq-container{ max-width:50rem; margin:0 auto; padding:0 var(--container-padding-x) }
.faq-section .section-title{ font-size:3rem; font-weight:600; margin-bottom:4rem; text-align:center }
.faq-accordion{ display:flex; flex-direction:column; gap:.75rem }
.accordion-item{ border-bottom:1px solid #333333; transition:border-color .3s ease }
.accordion-header{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:1.5rem 0; background:transparent; border:none; cursor:pointer; transition:all var(--transition-medium); position:relative; overflow:hidden }
.accordion-header::before{ content:''; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(155,89,182,.03) 20%, rgba(155,89,182,.03) 80%, transparent); transform:translateX(-100%); transition: transform .4s ease }
.accordion-header:hover::before{ transform:translateX(0) }
.question{ font-family:var(--font-heading); font-weight:500; font-size:1.25rem; color:#fff; text-align:left; padding-right:2rem; line-height:1.4 }
.accordion-icon{ width:1.5rem; height:1.5rem; position:relative; flex-shrink:0; transition: transform .3s ease }
.accordion-item.active .accordion-icon{ transform:rotate(180deg) }
.accordion-icon::before,.accordion-icon::after{ content:''; position:absolute; background:var(--accent-purple); border-radius:1px; transition:all .3s ease }
.accordion-icon::before{ width:1.5rem; height:.125rem; top:50%; left:0; transform:translateY(-50%) }
.accordion-icon::after{ width:.125rem; height:1.5rem; left:50%; top:0; transform:translateX(-50%); opacity:1 }
.accordion-item.active .accordion-icon::after{ transform:translateX(-50%) scaleY(0); opacity:0 }
.accordion-content{ max-height:0; overflow:hidden; transition:all .4s cubic-bezier(.4,0,.2,1); opacity:0; transform:translateY(-.5rem) }
.accordion-item.active .accordion-content{ max-height:50rem; opacity:1; transform:translateY(0) }
.answer{ padding:.5rem 0 1.5rem; font-size:1.125rem; line-height:1.6; color:var(--text-secondary); position:relative }
.answer::before{ content:''; position:absolute; left:-2rem; top:0; bottom:0; width:2px; background: linear-gradient(to bottom, transparent, rgba(155,89,182,.2) 20%, rgba(155,89,182,.2) 80%, transparent); opacity:0; transform:scaleY(.8); transition:all .4s ease }
.accordion-item.active .answer::before{ opacity:1; transform:scaleY(1) }
@media (max-width:768px){ .answer::before{ left:-1rem } .accordion-header{ padding:1.25rem 0 } .faq-section{ padding: calc(var(--section-padding-y) * .6) 0; margin-top: calc(var(--section-padding-y) * .6) } .faq-section .section-title{ font-size: clamp(2rem, 4vw + 1rem, 2.5rem); margin-bottom:3rem; padding:0 1.5rem } .faq-container{ padding:0 1.5rem } .faq-accordion{ gap:.5rem } .accordion-header{ min-height:3.5rem } .question{ font-size:1.125rem; padding-right:2.5rem } .answer{ font-size:1rem; padding:.75rem 0 1.25rem } .accordion-icon{ width:1.75rem; height:1.75rem } .accordion-icon::before{ width:1.75rem } .accordion-icon::after{ height:1.75rem } .answer::before{ left:-1.5rem } }
@media (max-width:576px){ .faq-section .section-title{ font-size: clamp(1.75rem, 3.5vw + 1rem, 2rem); margin-bottom:2.5rem } .accordion-header{ padding:1rem 0; min-height:3rem } }

/* ===== FINAL CTA ===== */
.final-cta-section{ padding: calc(var(--section-padding-y) * .75) 0; position:relative; overflow:hidden; margin-top:5rem; background: linear-gradient(135deg, var(--background-dark) 0%, #1D1A21 50%, #201B25 100%); min-height:500px; display:flex; align-items:center; justify-content:center }
.gradient-mesh{ position:absolute; inset:0; overflow:hidden; pointer-events:none }
.mesh-overlay{ position:absolute; inset:0; background: radial-gradient(circle at 50% 50%, rgba(155,89,182,.15) 0%, rgba(155,89,182,.1) 20%, rgba(155,89,182,.05) 40%, transparent 60%); mix-blend-mode:screen }
.animated-shapes{ position:absolute; inset:0; opacity:.6 }
.shape{ position:absolute; border-radius:50%; background:var(--accent-purple); filter:blur(80px); opacity:.3; animation: shapeFloat 20s infinite }
.shape-1{ width:400px; height:400px; top:-100px; left:-100px; animation-delay:0s }
.shape-2{ width:300px; height:300px; bottom:-50px; right:-50px; animation-delay:-5s }
.shape-3{ width:250px; height:250px; top:50%; left:50%; transform:translate(-50%,-50%); animation-delay:-10s }
@keyframes shapeFloat{ 0%,100%{ transform:translate(0,0) } 25%{ transform:translate(50px,-30px) } 50%{ transform:translate(-20px,50px) } 75%{ transform:translate(-40px,-20px) } }
.final-cta-container{ position:relative; z-index:2; width:100%; max-width:var(--container-max-width); margin:0 auto; padding:0 var(--container-padding-x) }
.cta-content{ display:flex; flex-direction:column; align-items:center; gap:3rem; text-align:center }
.cta-text{ max-width:800px; margin:0 auto }
.final-cta-section .section-title{ font-size: clamp(2.25rem, 5vw, 3.5rem); margin-bottom:1.5rem; background:linear-gradient(135deg, var(--text-primary) 0%, rgba(255,255,255,.9) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }
.cta-subtitle{ font-size: clamp(1rem, 2vw, 1.25rem); color:var(--text-secondary); line-height:1.6; max-width:600px; margin:0 auto }
.cta-actions{ margin-top:1rem }
.cta-main-btn{ display:inline-flex; align-items:center; gap:1rem; padding:1.25rem 2.5rem; font-size:1.125rem; font-weight:600; color:#fff; border:2px solid #fff; border-radius:.5rem; background:transparent; position:relative; overflow:hidden; transition: transform .3s ease }
.cta-main-btn::before{ content:''; position:absolute; top:0; left:0; width:0; height:100%; background:#fff; transition:width .3s ease; z-index:1 }
.btn-text,.btn-icon{ position:relative; z-index:2; transition:color .3s ease }
.cta-main-btn:hover{ transform:scale(1.02) }
.cta-main-btn:hover .btn-text,.cta-main-btn:hover .btn-icon{ color:#1A1A1A }
.cta-main-btn:hover::before{ width:100% }
@media (max-width:768px){ .final-cta-section{ padding: calc(var(--section-padding-y) * .6) 0; margin-top:3rem; min-height:400px } .cta-content{ gap:2rem } .final-cta-container{ padding:0 1.5rem } .cta-main-btn{ width:100%; justify-content:center; padding:1rem 2rem; font-size:1rem; min-height:3.5rem } .shape-1{ width:200px; height:200px; top:-50px; left:-50px } .shape-2{ width:150px; height:150px; bottom:-25px; right:-25px } .shape-3{ width:120px; height:120px } }
/* override button anims */
.btn.cta-main-btn{ color:#fff !important; background:transparent !important; border:2px solid #fff !important; transform:none !important; transition:none !important; box-shadow:none !important }
.btn.cta-main-btn:hover,.btn.cta-main-btn:active,.btn.cta-main-btn:focus{ color:#fff !important; background:transparent !important; border-color:#fff !important; transform:none !important; box-shadow:none !important }

/* ===== FOOTER ===== */
.footer{ background:var(--background-dark); padding:4rem 0 2rem; border-top:.0625rem solid #333 }
.footer-container{ max-width:var(--container-max-width); margin:0 auto; padding:0 var(--container-padding-x) }
.footer-main{ display:flex; gap:6rem; margin-bottom:3rem }
.footer-brand-section{ flex:0 0 25% }
.footer-logo{ display:block; margin-bottom:1.25rem }
.footer-tagline{ font-family:var(--font-heading); font-size:1rem; font-weight:500; color:#fff; margin-bottom:2rem; line-height:1.5 }
.social-icons{ display:flex; gap:1.25rem }
.social-icon{ color:var(--text-secondary); transition:color .3s ease }
.social-icon:hover{ color:#fff }
.social-icon svg{ width:1.25rem; height:1.25rem }
.footer-links-grid{ flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:3rem }
.footer-links-column{ display:flex; flex-direction:column }
.footer-title{ color:#fff; font-weight:500; font-size:1rem; margin-bottom:1.5rem }
.footer-links{ list-style:none; padding:0; margin:0 }
.footer-links li{ margin-bottom:.75rem }
.footer-links a,.footer-links a:link,.footer-links a:visited{ color:var(--text-secondary); text-decoration:none; font-size:1rem; transition:color .3s ease }
.footer-links a:hover,.footer-links a:active,.footer-links a:focus{ color:#fff; text-decoration:none }
.footer-contact li{ display:flex; align-items:center; gap:.75rem; color:var(--text-secondary) }
.contact-icon{ width:1rem; height:1rem; flex-shrink:0 }
.footer-bottom{ padding-top:2rem; border-top:.0625rem solid #333; text-align:center }
.footer-bottom p{ font-size:.875rem; color:var(--text-secondary) }
@media (max-width:991px){ .footer-main{ flex-direction:column; gap:3rem } .footer-brand-section{ text-align:center } .social-icons{ justify-content:center } .footer-links-grid{ grid-template-columns:repeat(2,1fr); gap:2rem } }
@media (max-width:768px){ .footer{ padding:2.5rem 0 1.5rem } .footer-main{ gap:2.5rem } .footer-links-grid{ gap:1.75rem } }
@media (max-width:576px){ .footer{ padding:3rem 0 2rem } .footer-main{ gap:2rem } .footer-links-grid{ grid-template-columns:1fr; gap:1.5rem } .footer-links-column{ text-align:center } .footer-contact li{ justify-content:center; gap:.5rem } .footer-title{ margin-bottom:1rem } .footer-links li{ margin-bottom:.5rem } .social-icons{ gap:1rem } .social-icon svg{ width:1.125rem; height:1.125rem } }

/* ===== UTILITIES ===== */
.text-gradient{ background:linear-gradient(135deg, var(--text-primary), var(--accent-purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.bg-gradient{ background:linear-gradient(135deg, var(--background-dark), #2A2A2A) }
.shadow-purple{ box-shadow:0 4px 15px rgba(155,89,182,.3) }

/* ===== MOBILE MENU (Single, deduped) ===== */
.hamburger-btn{ display:none; position:relative; width:48px; height:48px; padding:12px; border:none; background:none; cursor:pointer; margin-left:1rem; z-index:1001 }
.hamburger-line{ display:block; width:24px; height:2px; background-color:var(--text-primary); transition: transform .3s ease, opacity .3s ease; transform-origin:center }
.hamburger-line:not(:first-child){ margin-top:6px }
.hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(1){ transform: translateY(8px) rotate(45deg) }
.hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(2){ opacity:0; transform: translateX(-100%) }
.hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(3){ transform: translateY(-8px) rotate(-45deg) }
.mobile-menu{ position:fixed; top:0; left:0; width:100%; height:100%; visibility:hidden; z-index:999; transition:visibility .3s ease }
.mobile-menu[aria-hidden="false"]{ visibility:visible }
.mobile-menu-backdrop{ position:absolute; inset:0; background-color:rgba(26,26,26,.98); opacity:0; transition:opacity .3s ease }
.mobile-menu[aria-hidden="false"] .mobile-menu-backdrop{ opacity:1 }
.mobile-menu-content{ position:absolute; top:0; right:0; width:100%; height:100%; background-color:var(--background-dark); padding:1rem; transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column }
.mobile-menu[aria-hidden="false"] .mobile-menu-content{ transform:translateX(0) }
.mobile-nav{ flex:1; display:flex; align-items:center; justify-content:center; margin:2rem 0 }
.mobile-nav-links{ list-style:none; padding:0; margin:0; width:100%; text-align:center }
.mobile-nav-links li:not(:last-child){ margin-bottom:2rem }
.mobile-nav-links a{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:1.125rem; letter-spacing:.01em; color:#fff; text-decoration:none; transition: color .15s ease, background-color .15s ease; display:block; padding:.75rem .25rem; border-radius:6px }
.mobile-nav-links a:hover,.mobile-nav-links a:focus{ color:var(--accent-purple); background-color:rgba(155,89,182,.08) }
.mobile-cta{ padding-top:2rem; margin-top:auto; border-top:1px solid rgba(255,255,255,.1) }
.mobile-cta .btn{ width:100%; min-height:3rem }
@media (max-width:991px){ .hamburger-btn{ display:inline-flex; align-items:center; justify-content:center } .kodeally-nav-center,.kodeally-header-cta{ display:none !important } .navbar .container{ gap:.5rem } .mobile-header-cta{ padding:.5rem .875rem !important; font-size:.9375rem !important; line-height:1 !important; border-radius:.5rem !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; box-shadow:0 2px 10px rgba(155,89,182,.25) !important } .kodeally-header .container{ padding-left:.5rem !important; padding-right:.5rem !important } body.menu-open{ overflow:hidden } }

/* ===== RESPONSIVE TYPOGRAPHY ===== */
@media (max-width:768px){ h1{ font-size:2.5rem } h2{ font-size:2rem } .hero-title{ font-size:2.5rem } .hero-subtitle{ font-size:1.1rem } }
@media (max-width:576px){ .section-title{ font-size:1.8rem } .btn{ padding:10px 20px; font-size:.9rem } .hero-cta .btn{ display:block; width:100%; margin-bottom:1rem } .hero-cta .btn:last-child{ margin-bottom:0 } } 

/* ===== ENTERPRISE CALLOUT ===== */
.enterprise-callout {
  text-align: center;
  max-width: 43.75rem;
  margin: 4rem auto 0;
  padding: 3.5rem;
  background: linear-gradient(
    135deg,
    rgba(155, 89, 182, 0.08) 0%,
    rgba(155, 89, 182, 0.03) 100%
  );
  border-radius: 1rem;
  border: 1px solid rgba(155, 89, 182, 0.15);
  position: relative;
  overflow: hidden;
}
.enterprise-callout::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(155, 89, 182, 0.3),
    transparent
  );
}
.enterprise-callout h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: var(--text-primary);
}
.enterprise-callout p {
  color: var(--text-secondary);
  margin-bottom: 2rem;
  font-size: 1rem;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .enterprise-callout {
    padding: 2rem;
    max-width: 100%;
    width: 100%;
  }
}

/* ===== FAQ SUPPLEMENTS (exact from original) ===== */
button.accordion-header {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.accordion-header { 
  outline: none !important; 
  -webkit-tap-highlight-color: transparent; 
}
.accordion-item:hover {
  border-color: rgba(155, 89, 182, 0.2);
} 

/* ===== RESPONSIVE LOGO SIZES (from original) ===== */
@media (max-width: 768px) {
  .kodeally-logo img {
    height: 22px !important;
    width: 124px !important;
  }
}
@media (max-width: 576px) {
  .kodeally-logo img {
    height: 20px !important;
    width: 112px !important;
  }
}
@media (max-width: 375px) {
  .kodeally-logo img {
    height: 18px !important;
    width: 100px !important;
  }
} 

/* ===== DISABLE HERO ANIMATIONS (global) ===== */
.hero-section *,
.hero-section *::before,
.hero-section *::after {
  animation: none !important;
  transition: none !important;
}
.title-word,
.hero-subtitle {
  opacity: 1 !important;
  transform: none !important;
} 

/* ===== HEADER/FOOTER LINK INTERACTION RESETS ===== */
/* Remove focus/active outlines and tap highlight in header and footer only */
.kodeally-nav-link,
.kodeally-nav-link:focus,
.kodeally-nav-link:active,
.kodeally-nav-link:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

.footer-links a,
.footer-links a:focus,
.footer-links a:active,
.footer-links a:focus-visible,
.social-icon,
.social-icon:focus,
.social-icon:active,
.social-icon:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
} 

/* Extra coverage for all header/footer anchors (logo, CTA, etc.) */
.kodeally-header a,
.kodeally-header a:focus,
.kodeally-header a:active,
.kodeally-header a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

.footer a,
.footer a:focus,
.footer a:active,
.footer a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
} 

/* Ensure header CTA retains outlined border */
.kodeally-header .kodeally-ghost-btn {
  border: 1px solid var(--accent-purple) !important;
}