/* ===== MERGED CSS (custom.css + theme.css) ===== */

/* ------------------------------------------------------------
   Ghost font variables (define once)
   ------------------------------------------------------------ */
:root {
  /* Headings: a strong sans by default */
  --gh-font-heading: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
                     Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";

  /* Body: humanist sans with great readability */
  --gh-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
                  Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";

  /* Optional weights you can re-use if you want consistency */
  --gh-font-weight-regular: 400;
  --gh-font-weight-medium: 500;
  --gh-font-weight-semibold: 600;
  --gh-font-weight-bold: 700;
}

html, body {
  font-family: var(--gh-font-body);
  font-weight: var(--gh-font-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.hero h1,
.section-title {
  font-family: var(--gh-font-heading);
  font-weight: var(--gh-font-weight-bold);
  line-height: 1.15;
}




/* =========================
   GENERAL SECTION STYLES
========================= */
/* Align ownership note left inside nav */
.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* aligns logo block to top */
  padding: 0.75rem 1rem;
}

.brand-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.logo {
  font-size: 1.6rem;
  font-weight: 800;
  color: #0f172a;
  text-decoration: none;
  margin: 0;
}

.ownership {
  font-size: 0.8rem;
  color: #64748b;
  margin-top: 0.15rem; /* minimal spacing */
}

.ownership strong {
  color: #0f172a;
  font-weight: 600;
}


@media (min-width: 768px) {
  .nav-left {
    flex-direction: row;    /* logo + ownership inline */
    align-items: center;
    gap: 0.5rem;            /* tighter horizontal spacing */
  }
  .ownership {
    font-size: 0.85rem;
  }
}

/* Background bands */
.features-band {
  background: #fff;
  padding: 2.5rem 0;
}
.pricing-glance {
  background: var(--gray-light, #f3f4f6);
  padding: 2.5rem 0;
}
.pricing-glance .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
.features-band .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

footer { background: var(--gray-dark); color: white; padding: 1.65rem 0; text-align: center; }
  .footer-links { display:flex; justify-content:center; gap:2rem; margin-bottom:1rem; }
  .footer-links a { color:white; text-decoration:none; transition:opacity .3s; }
  .footer-links a:hover { opacity: .8; }

@media (max-width: 600px) {
  .footer-links {
    flex-direction: column;
    gap: 0.8rem;
  }
}


/* =========================
   SUBSCRIBE / ACTIVATE PAGES
========================= */
.subpage-hero {
  text-align: center;
  padding: 2.5rem 1rem;
  border-bottom: 1px solid rgba(15, 23, 42, .12);
  background: linear-gradient(135deg, #E3F5FF 0%, #B8DDFF 100%);
}
.subpage-hero h1 {
  margin: 0;
  font-size: 2.2rem;
  color: var(--dark-blue, #0f172a);
}
.faq-subtitle {
  opacity: .8;
  margin-top: .4rem;
}

/* Sections (centered titles + spacing) */
.joyx-section {
  position: relative;
  z-index: 0;
  margin-bottom: 3.5rem;
}
.joyx-section-head {
  text-align: center;
  margin: 0 0 1rem;
}
.joyx-section-head h2 {
  font-size: 1.8rem;
  font-weight: 800;
  margin: .1rem 0 .35rem;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.joyx-section-kicker {
  margin: 0;
  font-size: 1rem;
  color: #5b6b7a;
  text-align: center;
}

/* Content spacing & cards */
.joyx-subwrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}
.joyx-glass {
  position: relative;
  z-index: 0;
  background: linear-gradient(135deg, #F6FAFF, #EAF3FF);
  border: 1px solid rgba(37, 99, 235, .18);
  border-radius: 18px;
  box-shadow: 0 8px 26px rgba(15, 23, 42, .08);
  padding: 1.5rem 1.6rem;
}
.value-band {
  line-height: 1.65;
  color: #1f2937;
  font-size: 1.05rem;
}

/* Video */
.video-band {
  background: linear-gradient(135deg, #F6FAFF, #EAF3FF);
  border: 1px solid rgba(37, 99, 235, .18);
  border-radius: 18px;
  box-shadow: 0 8px 26px rgba(15, 23, 42, .08);
  width: 80%;
  margin: 0 auto;
  padding: 0;
}
.video-band .video-wrap {
  width: 100%;
}
.ratio-16x9 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}
.ratio-16x9 > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hooks grid */
.joyx-hooks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
}
.hook-item {
  background: #fff;
  border: 1px solid rgba(37, 99, 235, .15);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
  padding: 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .6rem;
}
.hook-icon {
  font-size: 1.6rem;
  color: #2563eb;
}

/* Plans */
.joyx-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4rem;
}
.joyx-card {
  background: #fff;
  border: 1px solid rgba(37, 99, 235, .18);
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .10);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  transition: .2s;
}
.joyx-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(15, 23, 42, .14);
}
.plan-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.plan-head h3 {
  margin: 0;
  font-size: 1.35rem;
  color: #0f172a;
}
.plan-head .price {
  font-weight: 900;
  font-size: 1.25rem;
  color: #0f172a;
}
.plan-head .price span {
  color: #64748b;
  font-weight: 600;
  margin-left: .25rem;
}
.muted {
  color: #5b6b7a;
  font-size: .95rem;
}
.plan-points {
  margin: .25rem 0 1rem;
  padding-left: 1.2rem;
  color: #1f2937;
}
.plan-points li {
  margin: .3rem 0;
}

/* Activate page container */
.sub-wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 1.2rem 1rem 2.25rem;
}
.card-inline {
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  background: #fff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
}

/* How-to steps */
.howto {
  margin-top: 2rem;
  padding: 1rem 1.1rem;
  background: linear-gradient(135deg, #F6FAFF, #EAF3FF);
  border: 1px solid rgba(37, 99, 235, .14);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}
.howto-title {
  margin: 0 0 .6rem;
  font-size: 1.05rem;
  color: #0f172a;
}
.howto-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.howto-steps li {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: start;
  gap: .65rem;
}
.step-badge {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-weight: 900;
  background: #fff;
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, .22);
  box-shadow: 0 4px 12px rgba(37, 99, 235, .15);
}
.tmuted {
  color: #5b6b7a;
}

/* CTA rows */
.cta-row {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}
.cta-row-center {
  justify-content: center;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  transition: .2s;
  line-height: 1;
  font-size: 1rem;
  padding: 1rem 1.2rem;
}
.btn-wide {
  width: 100%;
  min-height: 52px;
}
.btn-primary {
  background: #2563eb;
  color: #fff;
  box-shadow: 0 6px 20px rgba(37, 99, 235, .25);
}
.btn-primary:hover {
  transform: translateY(-2px);
}
.status {
  margin-top: .75rem;
  color: #1f2937;
  font-size: .95rem;
}
.fallback {
  margin-top: .75rem;
}
.fallback summary {
  cursor: pointer;
}

/* ===============================
   HOME → Transform Your Business
   =============================== */
.features-band{
  background: #fff;
  padding: 3.5rem 0;
}

.features-band .container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: center;
}

/* Title + blurb */
.features-band h2{
  margin: 0 0 .5rem;
  font-size: clamp(1.6rem, 1.1vw + 1.3rem, 2.2rem);
  color: var(--dark-blue, #0f172a);
  line-height: 1.15;
}
.features-band .container > p{
  max-width: 760px;
  margin: 0 auto 2rem;
  color: #334155;
}

/* Grid */
.feature-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

/* Card */
.feature-card{
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr; /* image, icon, title, text */
  gap: .6rem;
  text-align: left;
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15,23,42,.08);
  padding: 1rem 1rem 1.1rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feature-card:hover{
  transform: translateY(-3px);
  border-color: rgba(37,99,235,.25);
  box-shadow: 0 14px 34px rgba(15,23,42,.12);
}

/* Image: consistent boxes regardless of source size */
.feature-image{
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.04);
}
.feature-image img{
  width: 100%;
  height: auto;          /* fallback */
  aspect-ratio: 4 / 3;   /* keep card heights aligned */
  object-fit: cover;     /* tidy crop */
  display: block;
}

/* Icon chip */
.feature-icon{
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(37,99,235,.10);
  color: var(--primary-blue, #2563eb);
  font-weight: 900;
  box-shadow: 0 2px 10px rgba(37,99,235,.16);
}

/* Text */
.feature-card h3{
  margin: .2rem 0 0;
  font-size: 1.15rem;
  color: var(--dark-blue, #0f172a);
}
.feature-card p{
  margin: .25rem 0 0;
  color: #475569;
  line-height: 1.55;
}

/* Small screens */
@media (max-width: 640px){
  .features-band{ padding: 3rem 0; }
  .feature-grid{ gap: 1rem; }
  .feature-card{ padding: .9rem; }
  .feature-image img{ aspect-ratio: 16 / 10; }
}

/* Optional subtle motion preference respect */
@media (prefers-reduced-motion: reduce){
  .feature-card{ transition: none; }
  .feature-card:hover{ transform: none; }
}


/* Equal-size for single CTA */
#subscribeBtn.btn-equal {
  width: 450px;
  height: 56px;
}
@media (max-width:560px) {
  #subscribeBtn.btn-equal {
    width: 100%;
  }
}

/* =========================
   FAQ STYLES
========================= */
.faq-wrap {
  max-width: 900px;
  margin: 0 auto;
}
.faq-controls {
  display: grid;
  gap: .75rem;
  margin-bottom: 1rem;
}
#faqSearch {
  width: 100%;
  padding: .9rem 1rem;
  border: 1px solid rgba(15, 23, 42, .15);
  border-radius: 10px;
  font-size: 1rem;
}
.faq-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.chip {
  border: 1px solid rgba(37, 99, 235, .2);
  background: #fff;
  padding: .35rem .7rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: .9rem;
}
.chip.active {
  background: rgba(37, 99, 235, .08);
  border-color: rgba(37, 99, 235, .35);
  font-weight: 600;
}
.faq-count {
  font-size: .9rem;
  color: #5b6b7a;
  margin: .25rem 0 .75rem;
}
.faq-list {
  display: grid;
  gap: .6rem;
}
.faq-item {
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.faq-item[open] {
  box-shadow: 0 10px 26px rgba(15, 23, 42, .08);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item .q {
  font-weight: 700;
  color: var(--dark-blue, #0f172a);
}
.badge {
  margin-left: auto;
  background: rgba(37, 99, 235, .08);
  color: #1a4b9c;
  border: 1px solid rgba(37, 99, 235, .2);
  padding: .18rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
}
.a {
  padding: 0 1.1rem 1rem;
  color: #1f2937;
}
.actions {
  margin-top: .75rem;
}
.btn-inline {
  display: inline-block;
  text-decoration: none;
  border: 1px solid rgba(37, 99, 235, .25);
  padding: .35rem .6rem;
  border-radius: 8px;
}
.faq-cta {
  margin: 1.6rem 0 0;
  background: linear-gradient(135deg, #E3F5FF 0%, #B8DDFF 100%);
  border: 1px solid rgba(37, 99, 235, .2);
  border-radius: 14px;
  padding: 1.2rem 1rem;
  text-align: center;
}
.faq-cta .cta-row {
  display: flex;
  gap: .8rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: .6rem;
}
.faq-updated {
  opacity: .7;
  margin-top: 1rem;
  text-align: center;
}

/* =========================
   HOME → Demo Video Section
   ========================= */
.demo-section{
  padding: 4rem 0;
  background: #fff;
}

.demo-section .container{
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* tiny “Owned by …” line */
.demo-section .company-note{
  text-align: center;
  font-size: 1.05rem;
  color: #222;
  font-weight: 600;
  margin-bottom: 1.2rem;
}

/* section titles */
.demo-section .section-title{
  text-align: center;
  font-size: clamp(1.75rem, 2.2vw + 1rem, 2.5rem);
  color: var(--dark-blue, #0f172a);
  margin: 0 0 .6rem;
  line-height: 1.15;
}
.demo-section .section-subtitle{
  text-align: center;
  font-size: clamp(1rem, .6vw + .9rem, 1.1rem);
  opacity: .8;
  margin: 0 0 2rem;
}

/* video wrapper */
.demo-section .video-wrapper{
  max-width: 820px;         /* keeps it from getting too wide on desktops */
  margin: 0 auto;
  display: grid;
  gap: 1rem;
}

/* make the <video> responsive and pretty, even if width/height attributes exist */
.demo-section .video-wrapper video{
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: #000;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
  overflow: hidden;
}

/* trial note under the video */
.demo-section .trial-note{
  text-align: center;
  font-size: clamp(1.1rem, .9vw + 1rem, 1.6rem);
  margin-top: .25rem;
  color: var(--dark-blue, #0f172a);
  font-weight: 700;
}

/* spacing tune for smaller screens */
@media (max-width: 600px){
  .demo-section{ padding: 2.75rem 0; }
  .demo-section .section-subtitle{ margin-bottom: 1.5rem; }
  .demo-section .video-wrapper{ gap: .75rem; }
}

/* =========================
   HOME → Inventory Section
   ========================= */
.inventory-band{
  padding: 4rem 0;
  background: var(--gray-light, #f3f4f6);
}

.inventory-band .container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: center;
}

/* Titles */
.inventory-band h2{
  margin: 0 0 .25rem;
  font-size: clamp(1.6rem, 1.1vw + 1.3rem, 2.4rem);
  color: var(--dark-blue, #0f172a);
  line-height: 1.15;
}

.inventory-band .highlighted{
  margin: 0 0 1rem;
  font-size: clamp(1.1rem, .9vw + 1rem, 1.8rem);
  color: var(--dark-blue, #0f172a);
  font-weight: 800;
  letter-spacing: .02em;
}

.inventory-band .container > p{
  max-width: 760px;
  margin: 0 auto 2rem;
  color: #334155;
}

/* Cards grid */
.inventory-cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

/* Card */
.inventory-cards .card{
  display: grid;
  grid-template-rows: auto auto 1fr; /* title, text, image grows */
  gap: .6rem;
  text-align: left;
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(15,23,42,.08);
  padding: 1.1rem 1.1rem .9rem;
  transition: transform .18s ease, box-shadow .18s ease;
}

.inventory-cards .card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(15,23,42,.12);
}

/* Card text */
.inventory-cards .card h3{
  margin: 0;
  font-size: 1.1rem;
  color: var(--primary-blue, #2563eb);
}
.inventory-cards .card p{
  margin: 0 0 .4rem;
  color: #475569;
  line-height: 1.5;
}

/* Image: normalize aspect & cropping so all cards are even */
.inventory-cards .card img{
  width: 100%;
  height: auto;                 /* fallback */
  aspect-ratio: 4 / 3;          /* keep boxes consistent */
  object-fit: cover;            /* fill nicely even if source sizes vary */
  border-radius: 10px;
  background: #f9fafb;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.04);
}

/* Small screens tweaks */
@media (max-width: 640px){
  .inventory-band{ padding: 3rem 0; }
  .inventory-cards{ gap: 1rem; }
  .inventory-cards .card{ padding: 1rem; }
  .inventory-cards .card img{ aspect-ratio: 16 / 10; }
}


/* (optional) tighten vertical rhythm above/below the demo section on home */
#home .how-it-works{ margin-top: -0.25rem; } /* subtle visual pull-up */



/* ===== Second file ===== */

/* Minimal required classes for Ghost Koenig editor */
.kg-width-wide { max-width: 1200px; margin-left: auto; margin-right: auto; }
.kg-width-full { width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.kg-card { margin: 1.5rem 0; }
.kg-image-card img { display:block; height:auto; max-width:100%; }
.gh-page-title{font-size:2rem;margin:1rem 0;}
.gh-page-header{margin-bottom:1rem;}
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary-blue: #4A8FFF;
            --dark-blue: #1A4B9C;
            --cyan: #00D4FF;
            --light-cyan: #E3F5FF;
            --gray-dark: #2A2E3F;
            --gray-light: #F5F7FA;
            --white: #FFFFFF;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: var(--gray-dark);
            overflow-x: hidden;
        }

      /* Navigation (fixed header) — EXACTLY blog */
        nav {
        position: fixed; top: 0; width: 100%;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        z-index: 1000;
        padding: 0.6rem 0;
        box-shadow: 0 2px 20px rgba(0,0,0,0.05);
        }
        .nav-container {
        max-width: 1200px; margin: 0 auto; padding: 0 2rem;
        display: flex; justify-content: space-between; align-items: center;
        }
        .logo {
        font-size: 2rem; font-weight: bold; color: var(--primary-blue);
        text-decoration: none; font-family: 'Courier New', monospace; position: relative;
        }
        .logo::after {
        content: 'AI'; position: absolute; right: -45px; top: 50%;
        transform: translateY(-50%); background: var(--primary-blue); color: #fff;
        padding: 0.2rem 0.5rem; border-radius: 50%; font-size: 0.8rem;
        }
        /* Styles for {{navigation}} output — reuse for our <ul class="nav"> */
        .nav { display: flex; gap: 2rem; list-style: none; }
        .nav li { list-style: none; }
        .nav a { text-decoration: none; color: var(--gray-dark); transition: color .3s; }
        .nav a:hover { color: var(--primary-blue); }


        /* Page Sections */
        .page {
            display: none;
            min-height: 100vh;
            padding-top: 80px;
        }

        .page.active {
            display: block;
        }

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  padding: 5rem 2rem;
  background: linear-gradient(135deg, #f8fbff 0%, #e3f2ff 100%);
  position: relative;
  overflow: hidden;
}

.hero-content {
  flex: 1;
  max-width: 600px;
}

.hero h1 {
  font-size: 3rem;
  font-weight: 800;
  color: var(--dark-blue);
  line-height: 1.2;
}

.hero .highlight {
  color: var(--primary-blue);
}

.hero .subhead {
  font-size: 1.2rem;
  margin: 1.5rem 0;
  color: #444;
  line-height: 1.6;
}
.hero-image {
  position: absolute;
  right: -80px;   /* shift it partly offscreen */
  top: 50%;
  transform: translateY(-50%);
  max-width: 600px;
  opacity: 0.5;
  z-index: 0;     /* sit behind hero text */
}
.hero-image img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 2rem 0;
}

.microcopy {
  font-size: 0.9rem;
  color: #666;
}

.hero-visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-placeholder {
  width: 100%;
  max-width: 500px;
  height: 320px;
  border: 2px dashed var(--primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-blue);
  font-size: 1.1rem;
  background: #f0f8ff;
  border-radius: 10px;
}

.dashboard-mockup img {
  width: 100%;
  max-width: 500px;   /* adjust as needed */
  height: auto;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

/* Responsive */
@media (max-width: 768px) {
  .dashboard-mockup img {
    max-width: 320px;
  }
  .hero {
    flex-direction: column;
    text-align: center;
    padding: 3rem 1rem;
  }
  .hero-ctas {
    flex-direction: column;
    align-items: center;
  }
  .hero-visual {
    margin-top: 2rem;
  }
}


        .code-lines {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .code-line {
            position: absolute;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--cyan), transparent);
            animation: slideCode 6s linear infinite;
        }

        .code-line:nth-child(1) { top: 20%; animation-delay: 0s; }
        .code-line:nth-child(2) { top: 40%; animation-delay: 1s; }
        .code-line:nth-child(3) { top: 60%; animation-delay: 2s; }
        .code-line:nth-child(4) { top: 80%; animation-delay: 3s; }

        @keyframes slideCode {
            0% { transform: translateX(-100%); width: 20%; }
            100% { transform: translateX(200%); width: 20%; }
        }

        .btn-primary {
            background: var(--primary-blue);   /* your brand blue */
            color: white;
            border-radius: 5px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 1rem;
            transition: all 0.3s ease;
            margin: 0.5rem;

            /* match WhatsApp size */
            width: 250px;
            height: 50px;
            box-sizing: border-box;
            text-align: center;
            padding: 0 1rem;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
        }



        /* Feature Cards */
        .features {
            padding: 4rem 0;
            background: var(--gray-light);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .feature-card {
            background: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            text-align: center;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
        }

        .feature-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--primary-blue), var(--cyan));
            border-radius: 50%;
            margin: 0 auto 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
        }

        .feature-card h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: var(--dark-blue);
        }

        /* Growth Section */
        .growth {
            padding: 4rem 0;
            background: white;
        }

        .growth-content {
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
        }

        .growth h2 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: var(--dark-blue);
        }

        .edg-badge {
            display: inline-block;
            background: var(--primary-blue);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-weight: 600;
            margin-bottom: 2rem;
        }
        /* ===== Floating WhatsApp Assistant ===== */
.wa-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200;
  font-family: inherit;
  background: #25D366;
  color: #fff;
  padding: 0.8rem 1.2rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  transition: all 0.3s ease;
}


/* ===== Sticky WhatsApp Bar (Mobile) ===== */
.wa-bar {
  display: none; /* hidden on desktop */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #25D366;
  color: #fff;
  text-align: center;
  font-weight: 600;
  padding: 1rem;
  text-decoration: none;
  z-index: 1200;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
}

/* Section wrapper */
/* How It Works Section */
.how-it-works {
  background: #fff;
  padding: 4rem 1rem;
}

.how-it-works .container {
  max-width: 1100px;   /* prevents over-stretching */
  margin: 0 auto;      /* centers section */
  text-align: center;
}

.how-it-works h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 2.5rem;
  color: #0f172a;
  position: relative;
  display: inline-block;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.step {
  background: #fff;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 16px;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.step:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}

.step-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.25);
}


.step h4{
  margin: .2rem 0 .35rem;
  font-size: 1.15rem;
  color: var(--joyx-text);
  font-weight: 800;
}
.step p{
  margin: 0;
  color: var(--joyx-muted);
  line-height: 1.55;
  font-size: .98rem;
}

.steps-grid {
  position: relative;
}

.step {
  position: relative;
}

/* Default: horizontal arrows between steps */
.step:not(:last-child)::after {
  content: "➜";
  position: absolute;
  top: 50%;
  right: -2.2rem;
  transform: translateY(-50%);
  font-size: 2.2rem;
  color: #2563eb;
  font-weight: 900;
  text-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
}

/* Mobile: vertical arrows (rotated ➜) */
@media (max-width: 700px) {
  .step:not(:last-child)::after {
    content: "➜"; /* same arrow */
    position: absolute;
    top: auto;
    bottom: -2.8rem;
    left: 50%;
    transform: translateX(-50%) rotate(90deg); /* rotate it downward */
    right: auto;
    font-size: 2.2rem;
    color: #2563eb;
    font-weight: 900;
    text-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
  }
}

/* =========
   ANIMATION
   ========= */
/* Hidden state before reveal — use transform+opacity (GPU-friendly) */
.reveal{
  opacity: 0;
  transform: translateY(22px) scale(.98);
  will-change: transform, opacity;
  transition:
    opacity .6s ease-out,
    transform .6s ease-out;
}

/* Visible state */
.reveal.active{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Optional simple stagger (add .delay-1 / .delay-2 / .delay-3 on items) */
.reveal.delay-1{ transition-delay: .10s; }
.reveal.delay-2{ transition-delay: .20s; }
.reveal.delay-3{ transition-delay: .30s; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal{
    transition: none;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Desktop polish: 3 fixed columns if space allows */
@media (min-width: 980px){
  .steps-grid{
    grid-template-columns: repeat(3, minmax(260px, 1fr));
  }
}


.page {
  display: none;
}
.page.active {
  display: block;
}

/* Show sticky bar only on mobile */
@media (max-width: 768px) {
  .wa-bar {
    display: block;
  }
  .wa-fab {
    display: block;
  }
}







/* ===== Privacy Policy: scoped layout/typography fixes (no text edits) ===== */
:root {
  /* adjust if your nav is taller */
  --nav-h: 80px;
}

#privacy {
  padding-top: var(--nav-h);           /* avoid fixed header overlap */
  scroll-margin-top: var(--nav-h);     /* anchor jumps land below header */
}

#privacy .content-section {
  max-width: 820px;                    /* readable line length */
  margin: 0 auto;
  padding: 0 16px;
  display: block;                      /* in case a parent made it flex/grid */
  color: #2A2E3F;
  line-height: 1.7;
  font-family: var(--gh-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

/* Restore margins that the global reset removed */
#privacy h1, #privacy h2, #privacy h3, #privacy h4, #privacy h5, #privacy h6 {
  margin: 2.25rem 0 1rem;
  line-height: 1.3;
}
#privacy h3 { margin: 1.5rem 0 0.6rem; }
#privacy h4 { margin: 1.2rem 0 0.5rem; }

#privacy p {
  margin: 0 0 1rem;
  text-wrap: pretty;
}

/* Make lists readable even if globals changed them */
#privacy ul {
  list-style: disc;
  margin: 0 0 1.2rem 1.3rem;           /* bullets + spacing */
  padding: 0;
}
#privacy li { margin: 0 0 0.6rem; }

/* Your original <br> inside lists can cause odd gaps; hide visually without removing */
#privacy ul br { display: none; }

/* Links look like links */
#privacy a { color: #4A8FFF; text-decoration: none; }
#privacy a:hover { text-decoration: underline; }

/* Optional: hero spacing (keeps your existing styles) */
#privacy .subpage-hero { margin-bottom: 2rem; }





/* Make both FAQ CTA buttons exactly 250x50 and aligned */
.faq-cta .cta-row {
  display: flex;
  justify-content: center;
  align-items: center;       /* centers them vertically */
  gap: 1rem;
}

.faq-cta .cta-row a.btn-primary,
.faq-cta .cta-row .whatsapp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 250px;              /* identical width */
  height: 50px;              /* identical height */
  box-sizing: border-box;
  padding: 0 1.2rem;         /* ⬅️ no vertical padding */
  line-height: 1;            /* remove extra text height */
  font-size: 1rem;
  font-weight: 800;
  border-radius: 14px;
  text-align: center;
}

/* Color only for WhatsApp (rest matches your .btn/.btn-primary) */
.faq-cta .whatsapp-cta {
  background: #25D366;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(37, 99, 235, .25);
}
.faq-cta .whatsapp-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(37, 99, 235, .35);
}

.whatsapp-cta svg {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ===== CONTACT PAGE — single-column, centered ===== */
#contact .content-section{
  max-width: 780px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
  text-align: center;
}

/* Intro blurb width & spacing */
#contact .content-section > p{
  max-width: 720px;
  margin: 1.25rem auto 2rem;
  color: #334155;
}

/* Form card */
#contact .contact-form{
  max-width: 560px;
  margin: 0 auto 2rem;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
  padding: 1.25rem 1.4rem;
  text-align: left;              /* labels/inputs feel natural */
}

/* Fields */
#contact .form-group{
  display: grid;
  gap: .45rem;
  margin-bottom: 1rem;
}
#contact label{
  font-weight: 600;
  color: var(--dark-blue, #0f172a);
}
#contact input,
#contact textarea{
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid rgba(15, 23, 42, .15);
  border-radius: 10px;
  font-size: 1rem;
  color: #0f172a;
  background: #fff;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
#contact input:focus,
#contact textarea:focus{
  border-color: rgba(37,99,235,.5);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
#contact textarea{ min-height: 140px; resize: vertical; }

/* Submit button matches your blue CTAs */
#contact .btn-submit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2563eb;
  color: #fff;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  padding: 1rem 1.2rem;
  min-height: 50px;
  box-shadow: 0 6px 20px rgba(37, 99, 235, .25);
  transition: transform .2s, box-shadow .2s;
}
#contact .btn-submit:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(37, 99, 235, .35);
}

/* “Other ways to reach us” block */
#contact .content-section > div:last-child{
  max-width: 720px;
  margin: 2rem auto 0 !important;   /* ignore any inline margin */
  text-align: center !important;    /* ensure centered */
}
#contact .content-section > div:last-child h3,
#contact .content-section > div:last-child h4{
  color: var(--dark-blue, #0f172a);
  margin: 0 0 .6rem;
}
#contact .content-section > div:last-child p{
  margin: .25rem 0;
  color: #1f2937;
}

/* WhatsApp button */
#contact .whatsapp-cta{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #25D366;
  color: #fff !important;
  text-decoration: none;
  border-radius: 14px;
  padding: .85rem 1.2rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 6px 20px rgba(37, 99, 235, .18);
  transition: transform .2s, box-shadow .2s;
}
#contact .whatsapp-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(37, 99, 235, .28);
}
#contact .whatsapp-cta svg{
  width: 22px;
  height: 22px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Mobile — comfortable edges */
@media (max-width: 560px){
  #contact .contact-form{ padding: 1rem 1rem; }
}



/* ===============================
   LEGAL PAGES (Privacy / Terms / Returns)
   Make typography & spacing uniform, no text changes
=============================== */

/* Shared wrapper: width, rhythm, color */
#privacy .content-section,
#terms   .content-section,
#returns .content-section{
  max-width: 920px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
  line-height: 1.75;
  font-size: 1.04rem;
  color: #1f2937;
}

/* Headings */
#privacy h2, #terms h2, #returns h2{
  margin: 2rem 0 .6rem;
  font-size: 1.45rem;
  color: var(--dark-blue, #0f172a);
}
#privacy h3, #terms h3, #returns h3{
  margin: 1.4rem 0 .4rem;
  font-size: 1.15rem;
  color: var(--dark-blue, #0f172a);
}
#privacy h4, #terms h4, #returns h4{
  margin: 1.1rem 0 .35rem;
  font-size: 1.05rem;
  color: #0f172a;
}

/* Paragraph rhythm */
#privacy p, #terms p, #returns p{
  margin: .6rem 0 1rem;
}

/* Lists */
#privacy ul, #terms ul, #returns ul,
#privacy ol, #terms ol, #returns ol{
  margin: .4rem 0 1.1rem 1.25rem;
  padding-left: 1.25rem;
}
#privacy ul, #terms ul, #returns ul{ list-style: disc; }
#privacy ol, #terms ol, #returns ol{ list-style: decimal; }
#privacy li, #terms li, #returns li{ margin: .45rem 0; }

/* Nested lists a bit tighter */
#privacy li ul, #terms li ul, #returns li ul,
#privacy li ol, #terms li ol, #returns li ol{
  margin-top: .35rem;
}

/* Many generators inject <br> between list items — hide those safely */
#terms ul br, #terms ol br,
#returns ul br, #returns ol br,
#privacy ul br, #privacy ol br{
  display: none;
}

/* Links */
#privacy .content-section a,
#terms   .content-section a,
#returns .content-section a{
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Small screens: comfortable edges */
@media (max-width: 560px){
  #privacy .content-section,
  #terms   .content-section,
  #returns .content-section{
    padding: 0 1rem 2.5rem;
  }
}


/* ===============================
   MOBILE VISUAL TWEAKS — JOYXAI
=============================== */
@media (max-width: 600px){

  /* Headline smaller and balanced */
  .hero h1 {
    font-size: 1.9rem;        /* was ~3rem */
    line-height: 1.15;
    margin-bottom: 0.8rem;
  }

  /* Subhead spacing & scale */
  .hero .subhead {
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 1rem 0 1.2rem;
  }

  /* CTA button – slightly smaller, cleaner */
  .btn-primary {
    font-size: 0.95rem;
    padding: 0.9rem 1rem;
    border-radius: 12px;
  }

  /* “Start Now → WhatsApp” sticky bar */
  .wa-bar {
    font-size: 0.95rem;
    padding: 0.9rem;
  }

  /* Hero spacing tighter */
  .hero {
    padding: 2.5rem 1rem 2rem;
  }

  /* CTA row spacing */
  .hero-ctas {
    margin: 1.2rem 0 1rem;
  }

  /* Slimmer navigation on mobile */
  nav {
    padding: 0.4rem 0;
  }

  /* Body text readability */
  body {
    font-size: 1.02rem;
    line-height: 1.65;
  }
}


/* Make header content wrap nicely and reduce spacing on small screens */
@media (max-width: 600px){
  .nav-container{
    flex-wrap: wrap;                 /* allow second row if needed */
    gap: .4rem;
  }
  .nav{                               /* the <ul class="nav"> links */
    gap: 1rem;
    flex-wrap: wrap;
  }
  .nav a{
    font-size: .95rem;
  }

  /* Hide the tiny ownership line under the logo on phones */
  .ownership{ display: none; }

  /* Slightly smaller logo so it doesn't crowd the links */
  .logo{ font-size: 1.4rem; }

  /* Because the nav is fixed, make pages start lower to avoid any overlap */
  .page{ padding-top: 66px; }         /* was 80px globally */
}

/* Default FAB already looks like a pill with text on desktop — keep it */

/* Hide the full-width bar everywhere by default */
.wa-bar{ display: none !important; }

/* On phones: turn the FAB into a circular bubble */
@media (max-width: 768px){
  .wa-fab{
    right: 16px;
    bottom: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    padding: 0;
    font-size: 0;                    /* visually hide the text */
    display: grid;
    place-items: center;
  }
  /* Add a WhatsApp icon inside (white). No extra HTML needed. */
  .wa-fab::after{
    content: "";
    width: 26px;
    height: 26px;
    display: block;
    background: no-repeat center / contain
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.16-.17.2-.35.22-.64.08-.3-.15-1.26-.46-2.39-1.48-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.61-.92-2.21-.24-.58-.49-.5-.67-.51h-1.16c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.07 2.88 1.21 3.08.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.69.62.71.23 1.36.2 1.87.12.57-.09 1.76-.72 2.01-1.41.25-.69.25-1.29.17-1.41-.07-.12-.27-.2-.57-.35ZM12.05 22.77h-.01a9.87 9.87 0 0 1-5.03-1.38l-.36-.21-3.74.98 1-3.65-.24-.37A9.86 9.86 0 0 1 1.17 11.9C1.17 6.45 5.6 2.02 11.05 2.02c2.64 0 5.12 1.03 6.99 2.9a9.83 9.83 0 0 1 2.89 6.99c-.01 5.45-4.44 9.86-9.88 9.86Z'/></svg>");
  }
}


@media (max-width: 600px){
  /* More breathing room below fixed header */
  .page {
    padding-top: 88px;  /* was 78px */
  }
}

/* Default FAB position */
.wa-fab{
  bottom: 16px;
  right: 16px;
  z-index: 1200;
}

/* When footer is visible, lift by a dynamic amount set in JS */
.wa-fab.bump-up{
  /* --fab-lift is set in JS; fallback 120px if not set */
  bottom: calc(var(--fab-lift, 120px) + env(safe-area-inset-bottom));
}

/* Secondary button used in hero */
.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;border:1px solid rgba(15,23,42,.18);
  border-radius:14px;line-height:1;font-size:1rem;
  padding:1rem 1.2rem;background:#fff;color:#0f172a;
  box-shadow:0 6px 18px rgba(15,23,42,.08);
  transition:.2s;
}
.btn-secondary:hover{ transform:translateY(-2px); }

/* Security band */
.security-band{
  background:#fff;
  padding:3.2rem 0;
}
.security-band .container{
  max-width:1100px;margin:0 auto;padding:0 1rem;text-align:center;
}
.security-band h2{
  margin:0 0 .5rem;
  font-size:clamp(1.6rem,1.1vw + 1.3rem,2.2rem);
  color:var(--dark-blue,#0f172a);
  line-height:1.15;
}
.security-band .lead{
  max-width:760px;margin:0 auto 1.6rem;color:#334155;
}
.security-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1rem;align-items:stretch;text-align:left;
}
.sec-card{
  background:#fff;border:1px solid rgba(15,23,42,.10);
  border-radius:14px;box-shadow:0 8px 22px rgba(15,23,42,.08);
  padding:1rem 1rem 1.1rem;
}
.sec-card h3{ margin:.1rem 0 .25rem; font-size:1.05rem; color:#0f172a; }
.sec-card p{ margin:0; color:#475569; line-height:1.55; }

/* Why band */
.why-band{
  background:var(--gray-light,#f3f4f6);
  padding:3rem 0;
}
.why-band .container{
  max-width:1100px;margin:0 auto;padding:0 1rem;text-align:center;
}
.why-band h2{
  margin:0 0 .6rem;color:var(--dark-blue,#0f172a);
  font-size:clamp(1.6rem,1.1vw + 1.3rem,2.2rem);
}
.why-cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;text-align:left;
}
.why-card{
  background:#fff;border:1px solid rgba(15,23,42,.10);
  border-radius:14px;box-shadow:0 8px 22px rgba(15,23,42,.08);
  padding:1rem 1rem 1.1rem;
}
.why-card h3{ margin:.1rem 0 .25rem; font-size:1.05rem; color:#0f172a; }
.why-card p{ margin:0; color:#475569; line-height:1.55; }


/* update 11 nov */

/* Secondary button */
.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;border:1px solid rgba(15,23,42,.18);
  border-radius:14px;line-height:1;font-size:1rem;
  padding:1rem 1.2rem;background:#fff;color:#0f172a;
  box-shadow:0 6px 18px rgba(15,23,42,.08);
  transition:.2s;
}
.btn-secondary:hover{ transform:translateY(-2px); }

/* Data Protection & Fraud Detection block */
.security-band{ background:#fff; padding:3.2rem 0; }
.security-band .container{ max-width:1100px;margin:0 auto;padding:0 1rem;text-align:center; }
.security-band h2{ margin:0 0 .5rem; font-size:clamp(1.6rem,1.1vw + 1.3rem,2.2rem); color:#0f172a; line-height:1.15; }
.security-band .lead{ max-width:760px;margin:0 auto 1.6rem;color:#334155; }
.security-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; text-align:left; }
.sec-card{ background:#fff;border:1px solid rgba(15,23,42,.10); border-radius:14px; box-shadow:0 8px 22px rgba(15,23,42,.08); padding:1rem 1rem 1.1rem; }
.sec-card h3{ margin:.1rem 0 .25rem; font-size:1.05rem; color:#0f172a; }
.sec-card p{ margin:0; color:#475569; line-height:1.55; }

/* Why block */
.why-band{ background:#f3f4f6; padding:3rem 0; }
.why-band .container{ max-width:1100px;margin:0 auto;padding:0 1rem;text-align:center; }
.why-band h2{ margin:0 0 .6rem; color:#0f172a; font-size:clamp(1.6rem,1.1vw + 1.3rem,2.2rem); }
.why-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; text-align:left; }
.why-card{ background:#fff;border:1px solid rgba(15,23,42,.10); border-radius:14px; box-shadow:0 8px 22px rgba(15,23,42,.08); padding:1rem 1rem 1.1rem; }
.why-card h3{ margin:.1rem 0 .25rem; font-size:1.05rem; color:#0f172a; }
.why-card p{ margin:0; color:#475569; line-height:1.55; }

/* Page toggling */
.page{ display:none; }
.page.active{ display:block; }


/*update */

nav a.nav-button {
  border: 1px solid #1a4b9c;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  font-weight: 600;
  background: white;
  color: #1a4b9c;
  transition: all .2s ease;
  margin-left: 0.5rem;
}

nav a.nav-button:hover {
  background: #1a4b9c;
  color: #fff;
}



/* update */

/* Security & Compliance page layout */
#security .subpage-hero {
  /* if your Privacy hero already styles .subpage-hero globally, you can skip this.
     Keeping here to ensure identical height/spacing */
  padding: 56px 0;              /* match Privacy header height */
}

.security-content {
  max-width: 920px;             /* same content width as Privacy */
  margin: 0 auto;
  padding: 0 1rem 3rem;         /* left/right gutter + comfy bottom space */
  line-height: 1.75;
}

/* Consistent vertical rhythm inside sections */
.security-content section {
  margin: 28px 0 32px;
}

.security-content h2 {
  font-size: clamp(1.25rem, 0.9rem + 1vw, 1.6rem);
  line-height: 1.3;
  margin: 0 0 12px;
  color: #0f172a;               /* same dark heading color */
}

.security-content p {
  margin: 0 0 14px;
  color: #1f2937;               /* neutral paragraph color like Privacy */
}

.security-content ul {
  margin: 8px 0 0;
  padding-left: 1.25rem;        /* bullet indent */
  list-style: disc;
}

.security-content li {
  margin: 6px 0;
}

/* Optional: keep links subtle like Privacy text */
.security-content a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}




/* Shared subpage layout */
.subpage-hero {
  background: #e8f0ff;            /* same soft blue tone as Privacy Policy */
  padding: 56px 0 48px;
}
.subpage-hero h1 {
  font-size: clamp(1.8rem, 1.2rem + 1vw, 2.4rem);
  color: #0f172a;
}
.subpage-hero p {
  font-size: 1.05rem;
  line-height: 1.6;
}

.content-section h2 {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 1.5rem 0 0.6rem;
}
.content-section p {
  margin: 0 0 1rem;
}
.content-section ul {
  margin: 0.5rem 0 1.5rem 1.25rem;
}



/* Center the hero block and balance gutters */
#home-hero.hero {
  padding-block: 6rem;                       /* top/bottom */
  background: linear-gradient(180deg, #f5f9ff 0%, #ffffff 100%);
}

#home-hero .hero-inner {
  width: min(1200px, 92vw);                  /* max width + responsive */
  margin-inline: auto;                       /* <- centers the block */
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;      /* slight emphasis on text column */
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-inline: clamp(1rem, 4vw, 2rem);    /* symmetric side padding */
}

#home-hero .hero-content { text-align: left; max-width: 640px; }
#home-hero .hero-visual { display: flex; justify-content: center; }
#home-hero .hero-visual img { width: 100%; max-width: 620px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }

/* Mobile: stack vertically */
@media (max-width: 900px) {
  #home-hero .hero-inner { grid-template-columns: 1fr; }
  #home-hero .hero-content { margin-inline: auto; text-align: center; }
}

/* === Hero entrance animation === */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply to hero elements */
#home-hero .hero-content,
#home-hero .hero-visual {
  opacity: 0;
  animation: fadeInUp 1s ease forwards;
}

/* Staggered timing for smooth sequence */
#home-hero .hero-content {
  animation-delay: 0.1s;
}
#home-hero .hero-visual {
  animation-delay: 0.3s;
}





/* inner wrapper to keep hero centered with equal gutters */
#home-hero .hero-inner{
  width:min(1200px,92vw);
  margin-inline:auto;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(1.5rem,4vw,3rem);
  align-items:center;
  padding-inline:clamp(1rem,4vw,2rem);
}

/* chat interface badges */
.chat-badges{
  display:flex; gap:.5rem; flex-wrap:wrap; margin:0 0 1rem;
}
.chat-badges .badge{
  padding:.4rem .7rem; border:1px solid rgba(15,23,42,.15);
  border-radius:999px; font-weight:600; font-size:.9rem; background:#fff;
  box-shadow:0 4px 12px rgba(15,23,42,.06);
}

/* How AaaS works */
.how-aaas{ padding:3rem 0; background:#fff; }
.how-aaas .container{ width:min(1100px,92vw); margin:0 auto; padding:0 1rem; text-align:center; }
.how-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin-top:1rem; }
.how-card{ background:#fff; border:1px solid rgba(15,23,42,.10); border-radius:14px; box-shadow:0 8px 22px rgba(15,23,42,.08); padding:1rem; text-align:left; }

/* keep hero left text / right image */
#home-hero .hero-content{ text-align:left; max-width:640px; }
#home-hero .hero-visual{ display:flex; justify-content:center; }
#home-hero .hero-visual img{ width:100%; max-width:620px; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.12); }

/* small welcome animation reusing your theme */
@keyframes fadeInUp{ from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }
#home-hero .hero-content, #home-hero .hero-visual{ opacity:0; animation:fadeInUp .8s ease forwards; }
#home-hero .hero-visual{ animation-delay:.15s; }



.problem-band {
  background: #f8fbff;
  padding: 4rem 1rem;
  text-align: center;
}
.problem-band .container {
  max-width: 1100px;
  margin: 0 auto;
}
.problem-band h2 {
  color: #0f172a;
  font-size: clamp(1.8rem, 1.1vw + 1.3rem, 2.4rem);
  margin-bottom: .5rem;
}
.problem-band .lead {
  max-width: 780px;
  margin: 0 auto 2rem;
  color: #334155;
  font-size: 1.1rem;
}
.problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
  text-align: left;
}
.prob-card {
  background: #fff;
  border: 1px solid rgba(15,23,42,.1);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(15,23,42,.08);
  padding: 1rem 1.2rem;
}
.prob-card h3 {
  margin: 0 0 .3rem;
  color: #0f172a;
  font-size: 1.1rem;
}
.prob-card p {
  color: #475569;
  line-height: 1.55;
}






/* ===== Reveal (base + nicer easing) ===== */
.reveal{opacity:0;transform:translateY(36px) scale(.985);
  transition:opacity .8s ease-out, transform .8s cubic-bezier(.22,1,.36,1);}
.reveal.active{opacity:1;transform:none;}
/* simple stagger helpers */
.delay-1{transition-delay:.08s}
.delay-2{transition-delay:.16s}
.delay-3{transition-delay:.24s}
.delay-4{transition-delay:.32s}

/* ===== Buttons micro-interactions ===== */
.btn-primary, .btn-secondary{
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  will-change: transform;
}
.btn-primary:hover, .btn-secondary:hover{ transform: translateY(-2px); }
.btn-primary:active, .btn-secondary:active{ transform: translateY(0); }

/* Slight glow on primary */
.btn-primary:hover{
  box-shadow: 0 8px 26px rgba(37, 99, 235, .25);
}

/* ===== Card lift (applies to your grids) ===== */
.sec-card, .why-card, .prob-card, .how-card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sec-card:hover, .why-card:hover, .prob-card:hover, .how-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(15,23,42,.12);
  border-color: rgba(15,23,42,.18);
}

/* ===== Hero polish & parallax safety ===== */
#home-hero .hero-visual img{
  will-change: transform;
  transition: transform .3s ease; /* for initial load */
}

/* ===== Section fade when entering viewport (optional stronger) ===== */
section.reveal{ transform: translateY(42px); }