/* ============================================================================
   KODA WEBAPP DESIGN SYSTEM - COLORS & STYLING ONLY
   Visual consistency without typography changes
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------------------------- */
:root {
  /* Spacing grid (8px base) */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-2xl: 64px;

  /* Color palette */
  --koda-bg-page: #F5F5F5;
  --koda-bg-section: #FFFFFF;
  --koda-bg-footer: #F1F0EF;

  --koda-text-primary: #181818;
  --koda-text-secondary: #32302C;
  --koda-text-body: #55534E;
  --koda-text-muted: #6C6B6E;

  --koda-border-subtle: #E6E6EC;

  --koda-button-primary-bg: #181818;
  --koda-button-primary-text: #FFFFFF;
  --koda-button-primary-hover: #000000;

  /* Layout */
  --max-content-width: 1120px;

  /* Typography */
  --font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ----------------------------------------------------------------------------
   2. GLOBAL BASE STYLES (COLORS ONLY)
   ---------------------------------------------------------------------------- */
body {
  background: var(--koda-bg-page) !important;
  color: var(--koda-text-body) !important;
  font-family: var(--font-family) !important;
}

/* Force light backgrounds */
.homepage {
  background-color: var(--koda-bg-page) !important;
  background-image: none !important;
}

/* Hero section should be WHITE */
.hero-section {
  background-color: #FFFFFF !important;
  background-image: none !important;
}

.hero-section::after {
  display: none !important;
}

/* Since section should be GREY */
.since-section {
  background-color: #F5F5F5 !important;
}

/* Hero image - reduced size */
.hero-image-container {
  width: 80vw !important;
  max-width: 1300px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 0 !important;
}

.hero-image-container img {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  object-fit: contain !important;
}

/* ----------------------------------------------------------------------------
   3. TYPOGRAPHY COLORS (NO SIZES)
   ---------------------------------------------------------------------------- */
h1,
.hero-content h1 {
  color: var(--koda-text-primary) !important;
}

h2,
.workflow-section h2,
.chaos-header h2,
.section-header h2 {
  color: var(--koda-text-primary) !important;
}

h3,
.workflow-card h3,
.how-card-title,
.feature-item h3 {
  color: var(--koda-text-secondary) !important;
}

p,
.subtitle,
.intro-text,
.workflow-card p,
.how-card-body,
.feature-item p {
  color: var(--koda-text-body) !important;
}

.smart-secure-mobile-new {
  background-color: var(--koda-bg-page) !important;
}

.smart-secure-mobile-new .title .text-muted {
  color: var(--koda-text-body) !important;
}

.smart-secure-mobile-new .title .text-white {
  color: var(--koda-text-primary) !important;
}

.smart-secure-mobile-new .description {
  color: var(--koda-text-primary) !important;
}

small,
.small-text,
.meta-text,
.footer-copyright {
  color: var(--koda-text-muted) !important;
}

/* ----------------------------------------------------------------------------
   4. BUTTONS & CTAs (COLORS & BORDERS ONLY)
   ---------------------------------------------------------------------------- */
.btn-primary,
.demo-button,
.workflow-button,
.mobile-cta-btn,
.submit-btn,
button[type="submit"],
.newsletter-submit {
  border-radius: 999px !important;
  border: none !important;
  background: var(--koda-button-primary-bg) !important;
  color: var(--koda-button-primary-text) !important;
  font-family: var(--font-family) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 0.2s ease !important;
}

.btn-primary:hover,
.demo-button:hover,
.workflow-button:hover,
button[type="submit"]:hover {
  background: var(--koda-button-primary-hover) !important;
}

/* ----------------------------------------------------------------------------
   5. NAVIGATION
   ---------------------------------------------------------------------------- */
.main-nav {
  background-color: var(--koda-bg-section) !important;
  border: 1px solid var(--koda-border-subtle) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
  backdrop-filter: none !important;
}

.nav-links a {
  color: var(--koda-text-body) !important;
}

.nav-links a:hover {
  color: var(--koda-text-primary) !important;
  background-color: rgba(24, 24, 24, 0.04) !important;
}

/* ----------------------------------------------------------------------------
   6. WORKFLOW CARDS (COLORS & BORDERS)
   ---------------------------------------------------------------------------- */
.workflow-section {
  background: var(--koda-bg-page) !important;
}

.workflow-card {
  background: var(--koda-bg-section) !important;
  border: 1px solid var(--koda-border-subtle) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.03) !important;
  padding: 32px !important;
}

.workflow-image {
  /* Remove the fading shadow effect */
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.workflow-divider {
  border-color: var(--koda-border-subtle) !important;
}

/* ----------------------------------------------------------------------------
   7. CHAOS SECTION (COLORS)
   ---------------------------------------------------------------------------- */
.chaos-section {
  background: var(--koda-bg-section) !important;
}

.chaos-image-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  visibility: visible !important;
}

.chaos-image-container img {
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
  filter: brightness(0.9) contrast(1.15) saturate(0.9) !important;
  width: 800px !important;
  height: auto !important;
  mix-blend-mode: normal !important; /* Override screen blend mode from index.css */
  mask-image: none !important; /* Remove radial gradient mask */
  -webkit-mask-image: none !important;
  margin: 0 auto !important;
}

/* ----------------------------------------------------------------------------
   8. HOW IT WORKS CARDS (COLORS & BORDERS)
   ---------------------------------------------------------------------------- */
.how-it-works-section {
  background: var(--koda-bg-page) !important;
}

.homepage-block,
.container2 {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Hide decorative background pattern and borders */
.how-it-works-section .background-pattern,
.how-it-works-section .block-child {
  display: none !important;
}

/* How It Works icons - medium grey color #666666 */
.how-it-works-section .iconixtolinearcloud-transfer {
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
  width: 64px !important;
  height: 64px !important;
}

/* ----------------------------------------------------------------------------
   9. SMART SECURE SECTION (COLORS & BORDERS)
   ---------------------------------------------------------------------------- */
.smart-secure-section {
  background: var(--koda-bg-section) !important;
}

.feature-item {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

.icon-circle {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Smart Secure section icons - match How It Works styling */
.smart-secure-section .icon-circle img {
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
  width: 64px !important;
  height: 64px !important;
}

/* ----------------------------------------------------------------------------
   10. FORMS (COLORS & BORDERS)
   ---------------------------------------------------------------------------- */
.form-section {
  background: var(--koda-bg-page) !important;
}

.form-container,
.contact-form,
.waitlist-form {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

label,
.form-field label {
  color: var(--koda-text-secondary) !important;
}

.form-field input,
.form-field textarea {
  background-color: var(--koda-bg-section) !important;
  border: 1px solid var(--koda-border-subtle) !important;
  color: var(--koda-text-primary) !important;
  border-radius: 50px !important;
  font-family: var(--font-family) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

select {
  background-color: var(--koda-bg-section) !important;
  border: 1px solid var(--koda-border-subtle) !important;
  color: var(--koda-text-primary) !important;
  border-radius: 50px !important;
  font-family: var(--font-family) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.form-field textarea {
  border-radius: 24px !important;
}

.newsletter-form input,
.newsletter-form input[type="email"],
footer .newsletter-form input {
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--koda-border-subtle) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 14px 0 !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--koda-text-muted) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--koda-text-primary) !important;
  outline: none !important;
}

/* ----------------------------------------------------------------------------
   11. NEWSLETTER & CTA BLOCK (COLORS)
   ---------------------------------------------------------------------------- */
.homepage-cta-block,
.homepage-cta {
  background: var(--koda-bg-page) !important;
}

/* ----------------------------------------------------------------------------
   12. FOOTER (COLORS & BORDERS)
   ---------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--koda-bg-footer) !important;
}

.footer-nav h4 {
  color: var(--koda-text-secondary) !important;
}

.footer-nav a,
.back-to-top {
  color: var(--koda-text-body) !important;
  text-decoration: none !important;
}

.footer-nav a:hover,
.back-to-top:hover {
  color: var(--koda-text-primary) !important;
}

/* ---- PIXEL-PERFECT FOOTER LAYOUT — SINGLE SOURCE OF TRUTH ---- */

/* Footer layering — content above watermark */
.site-footer {
  overflow: hidden !important;
  position: relative !important;
}

/* A) Footer top grid: logo+newsletter | Company | Policy */
.footer-main {
  display: grid !important;
  grid-template-columns: 420px 1fr 1fr !important;
  column-gap: 120px !important;
  align-items: start !important;
  max-width: 1200px !important;
  margin: 0 auto 0 auto !important;
  padding: 64px 64px 40px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Footer-left takes column 1, footer-nav spans columns 2-3 */
.footer-left {
  grid-column: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.footer-nav {
  grid-column: 2 / 4 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 40px !important;
}

/* Footer logo — SINGLE SOURCE OF TRUTH */
.footer-logo {
  width: 150px !important;
  height: auto !important;
  margin-top: 0 !important;
  display: block !important;
}

/* B) Bottom bar: centered copyright, right-aligned back-to-top */
.site-footer .footer-bottom-bar {
  display: flex !important;
  align-items: center !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 24px 64px 32px !important;
  position: relative !important;
  z-index: 1 !important;
}

.footer-copyright {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

.back-to-top {
  margin: 0 0 0 auto !important;
}

/* C) Footer watermark — SINGLE SOURCE OF TRUTH (only implementation, no ::after) */
.footer-watermark {
  position: absolute !important;
  right: 120px !important;
  bottom: 60px !important;
  opacity: 0.05 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.footer-watermark img {
  width: 320px !important;
  height: auto !important;
}

/* Fix page containers to allow content to flow */
.contact-page,
.privacy-page,
.terms-page,
.waitlist-page {
  overflow: visible !important;
}

/* Ensure content sections have proper spacing before footer */
.privacy-content-section,
.terms-content-section,
.contact-hero,
.waitlist-hero {
  min-height: 0 !important;
  padding-bottom: 80px !important;
}

/* Ensure site-footer has proper top margin and reset padding (grid handles it) */
.site-footer {
  margin-top: 0px !important;
  padding: 0 !important;
}

/* Navigation logo sizing and alignment — SINGLE SOURCE OF TRUTH */
.main-nav .logo img,
.main-nav .content-icon {
  height: 52px !important;
  width: 52px !important;
  object-fit: contain !important;
  display: block !important;
}

.main-nav {
  align-items: center !important;
}

.main-nav .logo {
  display: flex !important;
  align-items: center !important;
}

.newsletter-form {
  margin-bottom: 48px !important;
}

.newsletter-form input[type="email"] {
  padding: 16px 24px !important;
  border-radius: 50px !important;
  border: 1px solid var(--koda-border-subtle) !important;
  background-color: var(--koda-bg-section) !important;
}

/* ----------------------------------------------------------------------------
   13. ABOUT PAGE SECTIONS (COLORS & BORDERS)
   ---------------------------------------------------------------------------- */
.about-page {
  background: var(--koda-bg-page) !important;
}

.since-section {
  background: #F5F5F5 !important;
}

.mockup-section {
  background: var(--koda-bg-page) !important;
}

.macbook-mockup {
  width: 90% !important;
  max-width: 900px !important;
}

.mvv-section {
  background: var(--koda-bg-section) !important;
}

.why-koda-section {
  background: var(--koda-bg-page) !important;
}

.why-card {
  background: var(--koda-bg-section) !important;
  border: 1px solid var(--koda-border-subtle) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

.join-section {
  background: var(--koda-bg-section) !important;
}

/* ----------------------------------------------------------------------------
   14. CONTACT PAGE (COLORS & BORDERS)
   ---------------------------------------------------------------------------- */
.contact-page {
  background: var(--koda-bg-page) !important;
}

.contact-hero {
  background: var(--koda-bg-section) !important;
}

/* ----------------------------------------------------------------------------
   15. WAITLIST PAGE (COLORS & BORDERS)
   ---------------------------------------------------------------------------- */
.waitlist-page {
  background: var(--koda-bg-page) !important;
}

.waitlist-hero {
  background: var(--koda-bg-section) !important;
}

/* ----------------------------------------------------------------------------
   16. PRIVACY & TERMS PAGES (COLORS & BORDERS)
   ---------------------------------------------------------------------------- */
.privacy-page,
.terms-page {
  background: var(--koda-bg-page) !important;
}

.privacy-content-section,
.terms-content-section {
  background: var(--koda-bg-section) !important;
}

.privacy-toc,
.terms-toc {
  background: var(--koda-bg-section) !important;
  border: 1px solid var(--koda-border-subtle) !important;
  border-radius: 12px !important;
}

.privacy-toc a,
.terms-toc a {
  color: var(--koda-text-body) !important;
}

.privacy-toc a:hover,
.terms-toc a:hover {
  color: var(--koda-text-primary) !important;
  background-color: rgba(24, 24, 24, 0.04) !important;
}

/* ----------------------------------------------------------------------------
   17. MOBILE MENU (COLORS & BORDERS)
   ---------------------------------------------------------------------------- */
.mobile-menu {
  background-color: var(--koda-bg-section) !important;
  border: 1px solid var(--koda-border-subtle) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.mobile-menu-link {
  color: var(--koda-text-body) !important;
}

.mobile-menu-link:hover,
.mobile-menu-link.active {
  color: var(--koda-text-primary) !important;
  background-color: rgba(24, 24, 24, 0.04) !important;
}

/* ----------------------------------------------------------------------------
   18. LANGUAGE SWITCHER (COLORS & BORDERS)
   ---------------------------------------------------------------------------- */
#language-toggle {
  background-color: transparent !important;
  color: var(--koda-text-body) !important;
  border: 1px solid var(--koda-border-subtle) !important;
}

#language-menu {
  background-color: var(--koda-bg-section) !important;
  border: 1px solid var(--koda-border-subtle) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

#language-menu li a {
  color: var(--koda-text-body) !important;
}

#language-menu li a:hover {
  background-color: var(--koda-bg-page) !important;
  color: var(--koda-text-primary) !important;
}

/* ----------------------------------------------------------------------------
   19. BORDERS & DIVIDERS
   ---------------------------------------------------------------------------- */
hr,
.border {
  border-color: var(--koda-border-subtle) !important;
}

/* ----------------------------------------------------------------------------
   20. TEXT COLOR UTILITIES
   ---------------------------------------------------------------------------- */
.text-white,
.text-primary {
  color: var(--koda-text-primary) !important;
}

.text-grey,
.text-muted {
  color: var(--koda-text-body) !important;
}