/* ==========================================================================
   MERGED STYLESHEET
   Decisions applied:
   1. Variable names — unified into a single token system (below)
   2. Hero — BOTH variants kept: .hero (sidebar/signal-card) + .hero-alt (canvas bg)
   3. Dashboard — Doc 1's screenshot-style .dash kept; Doc 2's live-metric
      .dash-grid/.metric dropped
   4. Non-overlapping sections dropped: .spaces* (Doc 1), .timeline,
      .insight-list, .ent-grid, .role-strip, .sec-grid, .cta-final (Doc 2)
   ========================================================================== */

:root{
  /* Core palette */
  --white:      #FAFAFA;
  --off:        #F7F7F7;
  --ink:        #2F2E2E;
  --ink-soft:   #605E5E;
  --line:       #E7E7E2;
  --dark:       #2F2E2E;
  --panel:      #3C3B3B;

  /* Accent */
  --accent:      #DFF66B;
  --accent-dark: #BBCE59;
  --accent-soft: #F4FDD1;
  --accent-dim:  #E7FF6E;

  /* Extended palette (from Doc 1, kept — used for tiles/highlights) */
  --lav:   #C5C9FF;
  --lime:  #DFF66B;
  --coral: #FFAE8A;
  --mint:  #94E3C8;
  --sky:   #9ED9F0;
  --pink:  #F5B8D7;

  /* Type */
  --display: 'Space Grotesk', sans-serif;
  --body:    'Inter', sans-serif;
  --mono:    'JetBrains Mono', monospace;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--white);
  background-image:radial-gradient(circle at 82% -8%, rgba(223,246,107,.28), transparent 29%), radial-gradient(circle at -8% 35%, rgba(188,191,255,.16), transparent 24%);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:var(--ink)}

.wrap{max-width:1180px;margin:0 auto;padding:0 40px}
@media (max-width:640px){ .wrap{padding:0 22px} }

/* ---------- Eyebrow ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent-dark);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.eyebrow::before{content:"";width:16px;height:1px;background:var(--accent)}

/* ---------- Nav ----------
   Supports either branding treatment used by the two source designs:
   an image mark (.brand-logo) or a text + dot mark (.logo). Non-conflicting —
   use whichever markup fits the page. */
nav{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(250,250,250,.84);
  backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1180px;
  margin:0 auto;
  padding:17px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.nav-left, .nav-mobile-hide{display:flex;align-items:center;gap:38px}
.brand-logo{height:40px;width:auto}
.logo{
  font-family:var(--display);
  font-weight:700;
  font-size:20px;
  letter-spacing:-.02em;
  display:flex;
  align-items:center;
  gap:8px;
}
.logo .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block}
.nav-links{display:flex;gap:32px;font-size:14px;font-weight:600;color:var(--ink-soft)}
.nav-links a:hover{color:var(--ink)}
.nav-cta{background:var(--accent);color:var(--ink);padding:9px 18px;border-radius:999px;font-size:14px;font-weight:700;box-shadow:0 7px 18px rgba(47,46,46,.14);transition:transform .15s ease,box-shadow .15s ease}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(47,46,46,.2)}
@media (max-width:860px){ .nav-links{display:none} }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 25px;
  border-radius:8px;
  font-size:15px;
  font-weight:700;
  font-family:var(--body);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn-primary{background:linear-gradient(135deg,var(--accent),#CBEA54);color:var(--ink);box-shadow:0 8px 20px rgba(47,46,46,.16)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(47,46,46,.22)}
.btn-secondary{background:rgba(255,255,255,.55);border-color:var(--line)}
.btn-secondary:hover{border-color:var(--accent);background:#fff}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- Section shells ---------- */
section{padding:116px 0}
.section-alt{background:linear-gradient(135deg,#F7F7F7 0%,#F1F1EC 100%)}
.section-dark{background:radial-gradient(circle at 88% 8%, rgba(223,246,107,.18), transparent 30%),linear-gradient(135deg,#2F2E2E 0%,#3C3B3B 100%);color:#fff}
@media (max-width:640px){ section{padding:78px 0} }

.section-head{
  font-family:var(--display);
  font-weight:650;
  font-size:clamp(31px,4.7vw,50px);
  line-height:1.1;
  letter-spacing:-.03em;
  max-width:800px;
  margin-bottom:20px;
}
.section-head .soft{color:var(--ink-soft)}
.section-dark .section-head .soft{color:#8A8F9C}
.section-sub{font-size:17.5px;color:var(--ink-soft);max-width:620px;line-height:1.7}
.section-dark .section-sub{color:#A7ABB6}

/* ---------- Hero A: sidebar / signal-card layout ---------- */
.hero{position:relative;padding:118px 0 100px;overflow:hidden}
.hero::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-250px;top:-285px;background:radial-gradient(circle,rgba(223,246,107,.28),rgba(223,246,107,0) 68%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.75fr);gap:56px;align-items:flex-start;}
.hero h1{
  font-family:var(--display);
  font-weight:650;
  font-size:clamp(42px,6.4vw,72px);
  line-height:1.03;
  letter-spacing:-.04em;
  margin-bottom:26px;
}
.hero .lede{font-size:19px;color:var(--ink-soft);max-width:660px;line-height:1.7;margin-bottom:36px}
.hero-card{border:1px solid rgba(231,231,226,.9);border-radius:18px;background:rgba(255,255,255,.82);box-shadow:0 28px 70px -35px rgba(47,46,46,.42);overflow:hidden;backdrop-filter:blur(12px)}
.hero-card-top{background:linear-gradient(125deg,var(--dark),#454343);color:#fff;padding:26px}
.hero-card-top .eyebrow{color:var(--accent) !important}
.signal{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;border-bottom:1px solid var(--line)}
.signal:last-child{border-bottom:0}
.pulse{width:11px;height:11px;border-radius:50%;background:var(--accent);margin-top:6px;box-shadow:0 0 0 0 rgba(223,246,107,.35);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(223,246,107,0)}100%{box-shadow:0 0 0 0 rgba(223,246,107,0)}}
.signal h4{font-family:var(--display);font-size:17px;margin-bottom:4px}
.signal p{color:var(--ink-soft);font-size:14px}
.tools{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.tool{font-family:var(--mono);font-size:12px;color:var(--ink);background:var(--accent-soft);padding:8px 12px;border-radius:999px;border:1px solid rgba(223,246,107,.45)}

/* ---------- Hero B: canvas / ambient-background layout ---------- */
.hero-alt{position:relative;padding:120px 0 100px;overflow:hidden}
.hero-alt .hero-inner{max-width:900px;position:relative;z-index:2}
.hero-alt h1{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(40px,6.4vw,72px);
  line-height:1.04;
  letter-spacing:-.03em;
  margin-bottom:26px;
}
.hero-alt h1 .fade{color:var(--ink-soft)}
.hero-alt p.lede{font-size:19px;color:var(--ink-soft);max-width:560px;margin-bottom:40px;line-height:1.6}
.hero-canvas-wrap{position:absolute;top:0;right:-8%;width:64%;height:100%;z-index:1;opacity:.9}
#hero-canvas{width:100%;height:100%}
@media (max-width:900px){ .hero-canvas-wrap{display:none} }

@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr}
  .hero-card{display:none}
}
@media (max-width:640px){
  .hero h1, .hero-alt h1{font-size:40px}
}

/* ---------- Problem / three-column grid ---------- */
.cols3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:13px;
  overflow:hidden;
  margin-top:60px;
}
.col{background:#fff;padding:38px 34px}
.col .num{font-family:var(--mono);font-size:12.5px;color:var(--accent);margin-bottom:21px}
.col h3{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.01em;margin-bottom:13px}
.col p{font-size:15.3px;color:var(--ink-soft);line-height:1.62}
@media (max-width:860px){ .cols3{grid-template-columns:1fr} }

.bottom-statement{
  margin-top:56px;
  padding-top:40px;
  border-top:1px solid var(--line);
  font-family:var(--display);
  font-size:clamp(22px,3vw,30px);
  font-weight:600;
  letter-spacing:-.02em;
  max-width:640px;
}
.bottom-statement .soft{color:var(--ink-soft)}

/* ---------- Dark feature grid (cards) ----------
   Doc 1's .dark-grid and Doc 2's .detector-grid describe the same concept
   (a dark, bordered card grid) — unified onto one card style below.
   Add class="pulse" to a .dcard for Doc 2's hover-glow behavior. */
.dark-grid, .detector-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:#23262E;
  border:1px solid #23262E;
  border-radius:13px;
  overflow:hidden;
  margin-top:60px;
}
.dcard{
  background:rgba(60,59,59,.88);
  padding:30px 26px;
  transition:transform .2s ease, background .2s ease;
}
.dcard:hover{transform:translateY(-3px);background:#494747}
.dcard h4{font-family:var(--display);font-size:17.5px;font-weight:600;margin-bottom:8px;color:#fff}
.dcard p{font-size:14px;color:#8A8F9C;line-height:1.55}
.glyph{
  width:34px;height:34px;border-radius:9px;
  background:rgba(223,246,107,.13);
  display:flex;align-items:center;justify-content:center;
  color:var(--lav);
  margin-bottom:18px;
}
.glyph svg{width:16px;height:16px;stroke:var(--accent-dim)}
.dcard.pulse .glyph{animation:pulseGlow 2.6s ease-in-out infinite}
@keyframes pulseGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(223,246,107,.35)}
  50%{box-shadow:0 0 0 8px rgba(223,246,107,0)}
}
.dark-note{
  margin-top:56px;
  padding-top:36px;
  border-top:1px solid rgba(223,246,107,.32);
  font-size:17px;
  color:#8A8F9C;
  max-width:520px;
  line-height:1.7;
}
.dark-note strong{color:#fff;font-weight:600}
@media (max-width:900px){ .dark-grid, .detector-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .dark-grid, .detector-grid{grid-template-columns:1fr} }

/* ---------- How it works timeline ---------- */
  .timeline{
    margin-top:70px;
    position:relative;
    padding-left:2px;
  }
  .tl-line{
    position:absolute;
    left:19px;top:8px;bottom:8px;
    width:2px;
    background:var(--line);
  }
  .tl-line .fill{
    position:absolute;top:0;left:0;width:100%;
    background:var(--accent);
    height:0%;
    transition:height 1.4s cubic-bezier(.4,0,.2,1);
  }
  .tl-item{
    position:relative;
    padding-left:64px;
    padding-bottom:52px;
  }
  .tl-item:last-child{padding-bottom:0;}
  .tl-dot{
    position:absolute;left:8px;top:2px;
    width:24px;height:24px;
    border-radius:50%;
    background:var(--white);
    border:2px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    transition:border-color .3s ease, background .3s ease;
    z-index:2;
  }
  .tl-item.active .tl-dot{
    border-color:var(--accent);
    background:var(--accent);
  }
  .tl-dot::after{
    content:"";
    width:6px;height:6px;border-radius:50%;
    background:var(--line);
  }
  .tl-item.active .tl-dot::after{background:white;}
  .tl-item h4{
    font-family:var(--display);
    font-size:19px;
    font-weight:600;
    margin-bottom:6px;
    letter-spacing:-0.01em;
  }
  .tl-item p{color:var(--ink-soft);font-size:15px;max-width:460px;}
 
/* ---------- Examples (Doc 1) ---------- */
.examples{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:60px}
.example{border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.8);padding:30px;box-shadow:0 14px 30px -28px rgba(47,46,46,.45);transition:transform .2s ease,box-shadow .2s ease}
.example:hover{transform:translateY(-3px);box-shadow:0 20px 35px -25px rgba(47,46,46,.38)}
.example .label{font-family:var(--mono);font-size:12px;color:var(--accent-dark);letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.quote{background:var(--accent-soft);border-left:3px solid var(--accent);padding:16px 18px;border-radius:10px;font-size:15px;line-height:1.65;margin:18px 0}
.result{font-weight:700;font-size:14px;color:var(--ink)}
@media (max-width:920px){ .examples{grid-template-columns:1fr} }

/* ---------- Dashboard (Doc 1 — screenshot style, per decision #3) ---------- */
.dash{
  margin-top:60px;
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 30px 75px -35px rgba(47,46,46,.32);
  background:#fff;
}
.dash-top{padding:16px 20px;background:var(--off);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
.dash-shot img{width:100%;border-radius:14px;border:1px solid var(--line)}
.shot-note{padding:0 18px 20px;color:var(--ink-soft);font-size:14px;line-height:1.6}

/* ---------- Insights list ---------- */
  .insight-list{
    margin-top:56px;
    border-top:1px solid var(--line);
  }
  .insight-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:22px 0;
    border-bottom:1px solid var(--line);
    font-size:16px;
  }
  .insight-row .left{display:flex;align-items:center;gap:16px;}
  .insight-row .ix{
    font-family:var(--mono);
    font-size:12px;
    color:var(--ink-soft);
    width:26px;
  }
  .insight-row .right{
    color:var(--ink-soft);
    font-size:14px;
    font-family:var(--mono);
  }
/* ---------- Bridge banner (Doc 1) ---------- */
.bridge{background:linear-gradient(135deg,#0B0C10 0%,#12162A 100%);color:#fff;padding:92px 0}
.bridge-box{
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  padding:52px;
  background:rgba(255,255,255,.04);
  display:grid;
  grid-template-columns:1fr auto;
  gap:36px;
  align-items:center;
}
.bridge p{color:#B8BDCA;font-size:18px;line-height:1.7;max-width:760px}
.bridge .btn-secondary{background:#fff;color:#111}
@media (max-width:920px){ .bridge-box{grid-template-columns:1fr;padding:34px} }

/* ---------- Reveal-on-scroll utility (Doc 2) ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}

 /* ---------- Final CTA ---------- */
  .cta-final{
    text-align:center;
    padding:140px 0;
  position:relative;
  background:radial-gradient(circle at 50% 100%, rgba(223,246,107,.28), transparent 42%);
  }
  .cta-final h2{
    font-family:var(--display);
    font-weight:600;
    font-size:clamp(32px,5.4vw,54px);
    letter-spacing:-0.03em;
    line-height:1.1;
    max-width:760px;
    margin:0 auto 22px;
  }
  .cta-final .soft{color:var(--ink-soft);}
  .cta-final p.sub{
    font-size:17px;
    color:var(--ink-soft);
    max-width:480px;
    margin:0 auto 40px;
  }
  .cta-final .btn-row{justify-content:center;}
 

/* ---------- Contact form ---------- */
.contact-head{margin-bottom:48px}
.contact-form{
  max-width:640px;
  display:flex;
  flex-direction:column;
  gap:22px;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
@media (max-width:640px){
  .form-row{grid-template-columns:1fr}
}
.form-field{display:flex;flex-direction:column;gap:8px}
.form-field label{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.form-field label .optional{text-transform:none;letter-spacing:0;color:var(--ink-soft);opacity:.7}
.form-field input,
.form-field textarea{
  font-family:var(--body);
  font-size:15px;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:13px 15px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
  resize:vertical;
}
.form-field input:focus,
.form-field textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(223,246,107,.35);
}
.contact-form .btn{align-self:flex-start}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:44px 0;background:#fff}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.footer-links{display:flex;gap:26px;color:var(--ink-soft);font-size:14px}
.footer-links a:hover{color:var(--ink)}

/* ---------- Responsive catch-alls ---------- */
@media (max-width:920px){
  .bridge-box{grid-template-columns:1fr}
}
@media (max-width:640px){
  .brand-logo{height:30px}
}
/* ==========================================================================
   HERO LIVE CONVERSATION
   ========================================================================== */

.hero-demo{
    position:relative;
    width:430px;
    min-height:100px;
    padding:28px;
    border-radius:24px;

    background:rgba(255,255,255,.82);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.45);

    box-shadow:
        0 30px 80px rgba(47,46,46,.12),
        inset 0 1px 0 rgba(255,255,255,.65);

    overflow:hidden;
}

.hero-demo::before{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    border-radius:50%;

    right:-90px;
    top:-90px;

    background:radial-gradient(circle,var(--accent),transparent 72%);

    opacity:.22;

    pointer-events:none;
}

.conversation{

    position:relative;

    z-index:2;

}

.speaker{

    font-family:var(--mono);

    font-size:11px;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:#888;

    margin-top:18px;

    margin-bottom:8px;

}

.line{

    font-size:24px;

    font-weight:500;

    color:var(--ink);

    line-height:1.45;

    min-height:36px;

}



@keyframes cursorBlink{

    50%{

        opacity:0;

    }

}

.hidden{
    display:none;
}

.signal.show{
    display:block;
}

.recommendation.show{
    display:block;
}

.sparki-card{

    margin-top:28px;

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:

        0 18px 45px rgba(47,46,46,.12);

    opacity:0;

    transform:

        translateY(18px)

        scale(.96);

    transition:

        opacity .45s,

        transform .45s;

}
.sparki-card.show{

    opacity:1;

    transform:

        translateY(0)

        scale(1);

}

.sparki-bar{

    height:6px;

    background:var(--accent);

}

.sparki-brand{

    padding:18px 22px 8px;

    font-size:12px;

    font-family:var(--mono);

    letter-spacing:.08em;

    color:var(--accent-dark);

    font-weight:700;

}

.sparki-title{

    padding:0 22px;

    font-family:var(--display);

    font-size:28px;

    font-weight:600;

    line-height:1.15;

    color:var(--ink);

}

.sparki-body{

    padding:18px 22px 24px;

}

.signal{

    font-size:16px;

    color:var(--ink-soft);

    line-height:1.65;

    margin-top:14px;

    opacity:0;

    transform:translateY(8px);

    transition:

        opacity .35s,

        transform .35s;

}

.signal.show{

    opacity:1;

    transform:none;

}

.recommendation{

    margin-top:24px;

    padding-top:18px;

    border-top:1px solid var(--line);

    opacity:0;

    transform:translateY(8px);

    transition:

        opacity .35s,

        transform .35s;

}

.recommendation.show{

    opacity:1;

    transform:none;

}

.rec-title{

    font-family:var(--mono);

    font-size:11px;

    letter-spacing:.08em;

    color:var(--accent-dark);

    margin-bottom:12px;

    text-transform:uppercase;

}

.sparki-success{

    color:#3E7F2F;

}

.sparki-hide{

    animation:

        sparkiHide .6s forwards;

}

@keyframes sparkiHide{

    0%{

        opacity:1;

        transform:scale(1);

    }

    100%{

        opacity:0;

        transform:

            translateY(-16px)

            scale(.92);

    }

}

@media (max-width:920px){

    .hero-demo{

        width:100%;

        max-width:460px;

        margin:auto;

    }

}
.typing-cursor{
    display:inline-block;
    width:2px;
    height:1em;
    margin-left:2px;
    background:var(--accent);
    vertical-align:-2px;
    animation:cursorBlink 1s infinite;
}
/* =====================================================
   Sparkco Accessibility Widget
===================================================== */

/* Floating Button */

.accessibility-toggle{
    position:fixed;
    right:24px;
    bottom:24px;
    width:62px;
    height:62px;
    border:none;
    border-radius:50%;
    background:linear-gradient(135deg,var(--accent),#CBEA54);
    color:var(--ink);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 18px 45px rgba(0,0,0,.18);
    z-index:99999;
    transition:.25s;
}

.accessibility-toggle:hover{
    transform:translateY(-3px) scale(1.05);
}

.accessibility-toggle svg{
    width:26px;
    height:26px;
}

/* Overlay */

.accessibility-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.25);
    backdrop-filter:blur(3px);
    opacity:0;
    visibility:hidden;
    transition:.25s;
    z-index:99998;
}

.accessibility-overlay.open{
    opacity:1;
    visibility:visible;
}

/* Panel */

.accessibility-panel{

    position:fixed;

    right:24px;
    bottom:100px;

    width:360px;
    max-width:calc(100vw - 24px);

    background:rgba(255,255,255,.92);
    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.55);

    border-radius:24px;

    overflow:hidden;

    box-shadow:
        0 35px 90px rgba(0,0,0,.16);

    opacity:0;
    visibility:hidden;

    transform:translateY(20px);

    transition:.25s;

    z-index:99999;
}

.accessibility-panel.open{

    opacity:1;
    visibility:visible;

    transform:none;

}

/* Header */

.accessibility-header{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    padding:24px;

    border-bottom:1px solid var(--line);

}

.accessibility-header h2{

    font-family:var(--display);

    font-size:24px;

    margin-bottom:6px;

}

.accessibility-header p{

    color:var(--ink-soft);

    font-size:14px;

}

.accessibility-close{

    border:none;

    background:none;

    cursor:pointer;

    width:34px;
    height:34px;

    border-radius:50%;

    transition:.2s;

}

.accessibility-close:hover{

    background:#efefef;

}

/* Body */

.accessibility-body{

    padding:24px;

    max-height:60vh;

    overflow:auto;

}

/* Groups */

.acc-group{

    margin-bottom:28px;

}

.acc-group:last-child{

    margin-bottom:0;

}

.acc-group h3{

    font-family:var(--display);

    margin-bottom:16px;

    font-size:18px;

}

/* Font Buttons */

.font-buttons{

    display:flex;

    gap:10px;

}

.font-buttons button{

    flex:1;

    padding:12px;

    border:1px solid var(--line);

    border-radius:10px;

    background:white;

    cursor:pointer;

    transition:.2s;

}

.font-buttons button:hover{

    background:var(--accent-soft);

    border-color:var(--accent);

}

/* Switch rows */

.switch{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:14px;

    font-size:15px;

}

.switch:last-child{

    margin-bottom:0;

}

/* iOS switch */

.switch input{

    appearance:none;
    -webkit-appearance:none;
    outline:none;

    width:48px;
    height:28px;

    background:#D3D3D3;

    border-radius:999px;

    position:relative;

    cursor:pointer;

    transition:.25s;

}

.switch input::before{

    content:"";

    position:absolute;

    width:22px;
    height:22px;

    left:3px;
    top:3px;

    background:white;

    border-radius:50%;

    transition:.25s;

    box-shadow:0 2px 6px rgba(0,0,0,.18);

}

.switch input:checked{

    background:var(--accent);

}

.switch input:checked::before{

    left:23px;

}

/* Footer */

.accessibility-footer{

    padding:24px;

    border-top:1px solid var(--line);

}

.accessibility-reset{

    width:100%;

    padding:14px;

    border:none;

    border-radius:12px;

    background:linear-gradient(135deg,var(--accent),#CBEA54);

    font-weight:700;

    cursor:pointer;

    transition:.2s;

}

.accessibility-reset:hover{

    transform:translateY(-2px);

}

/* =====================================================
   Reading Guide
===================================================== */

#reading-guide-line{

    position:fixed;

    left:0;

    top:0;

    width:100%;

    height:3px;

    background:#DFF66B;

    display:none;

    pointer-events:none;

    z-index:999999;

    box-shadow:
        0 0 12px rgba(223,246,107,.8);

    transition:top .03s linear;

}

/* Mobile */

@media(max-width:640px){

    .accessibility-panel{

        left:12px;
        right:12px;

        width:auto;

        bottom:86px;

    }

    .accessibility-toggle{

        width:56px;
        height:56px;

        right:18px;
        bottom:18px;

    }

}
/* =====================================================
   Dark Mode
===================================================== */

body.acc-dark{
    background:#111;
    color:#f5f5f5;
}

/* Main sections */

body.acc-dark nav,
body.acc-dark footer,
body.acc-dark .hero,
body.acc-dark .section-alt,
body.acc-dark .section-dark,
body.acc-dark .cta-final{
    background:#181818 !important;
}

/* Cards */

body.acc-dark .hero-demo,
body.acc-dark .col,
body.acc-dark .example,
body.acc-dark .dash,
body.acc-dark .dcard,
body.acc-dark .accessibility-panel{
    background:#232323 !important;
    color:#f5f5f5 !important;
    border-color:#444 !important;
}

/* Text */

body.acc-dark h1,
body.acc-dark h2,
body.acc-dark h3,
body.acc-dark h4,
body.acc-dark p,
body.acc-dark span,
body.acc-dark a,
body.acc-dark li{
    color:#f5f5f5 !important;
}

/* Secondary text */

body.acc-dark .section-sub,
body.acc-dark .lede,
body.acc-dark .result,
body.acc-dark .signal,
body.acc-dark .footer-links{
    color:#c8c8c8 !important;
}

/* Inputs */

body.acc-dark input,
body.acc-dark textarea{
    background:#2a2a2a !important;
    color:white !important;
    border-color:#555 !important;
}

/* Widget */

body.acc-dark .accessibility-panel{
    background:#222 !important;
}

body.acc-dark .font-buttons button{
    background:#2a2a2a;
    color:white;
}

body.acc-dark .accessibility-close{
    color:white;
}
/* =====================================================
   High Contrast
===================================================== */

body.acc-contrast{
    background:#000 !important;
    color:#fff !important;
}

/* Main sections */

body.acc-contrast nav,
body.acc-contrast footer,
body.acc-contrast .hero,
body.acc-contrast .section-alt,
body.acc-contrast .section-dark,
body.acc-contrast .cta-final{
    background:#000 !important;
}

/* Cards */

body.acc-contrast .hero-demo,
body.acc-contrast .col,
body.acc-contrast .example,
body.acc-contrast .dash,
body.acc-contrast .dcard,
body.acc-contrast .accessibility-panel{
    background:#111 !important;
    border:2px solid #FFD700 !important;
    color:#fff !important;
}

/* Text */

body.acc-contrast h1,
body.acc-contrast h2,
body.acc-contrast h3,
body.acc-contrast h4,
body.acc-contrast h5,
body.acc-contrast h6,
body.acc-contrast p,
body.acc-contrast span,
body.acc-contrast li{
    color:#fff !important;
}

/* Links */

body.acc-contrast a{
    color:#00FFFF !important;
    text-decoration:underline;
}

/* Buttons */

body.acc-contrast button,
body.acc-contrast .btn,
body.acc-contrast .nav-cta{
    background:#FFD700 !important;
    color:#000 !important;
    border:2px solid #fff !important;
}

/* Inputs */

body.acc-contrast input,
body.acc-contrast textarea{
    background:#000 !important;
    color:#fff !important;
    border:2px solid #FFD700 !important;
}

/* Widget */

body.acc-contrast .font-buttons button{
    background:#FFD700 !important;
    color:#000 !important;
}
/* =====================================================
   Dyslexia Font
===================================================== */

body.acc-dyslexia,
body.acc-dyslexia *{

    font-family:Arial, Helvetica, sans-serif !important;

    letter-spacing:0.08em !important;

    word-spacing:0.16em !important;

    line-height:1.8 !important;

}

/* Keep headings bold */

body.acc-dyslexia h1,
body.acc-dyslexia h2,
body.acc-dyslexia h3,
body.acc-dyslexia h4,
body.acc-dyslexia h5,
body.acc-dyslexia h6{

    font-weight:700 !important;

}
/* =====================================================
   Highlight Links
===================================================== */

body.acc-links a{

    background:#FFF176 !important;

    color:#000 !important;

    padding:2px 5px;

    border-radius:4px;

    font-weight:600;

    text-decoration:underline !important;

    text-decoration-thickness:2px;

    transition:.2s;

}

body.acc-links a:hover{

    background:#FFD54F !important;

}
/* =====================================================
   Highlight Headings
===================================================== */

body.acc-headings h1,
body.acc-headings h2,
body.acc-headings h3,
body.acc-headings h4,
body.acc-headings h5,
body.acc-headings h6{

    display:inline-block;

    background:#DFF66B;

    color:#000 !important;

    padding:4px 10px;

    border-radius:8px;

    box-shadow:0 4px 12px rgba(0,0,0,.12);

}
/* =====================================================
   Reduce Motion
===================================================== */

body.acc-reduce-motion *,
body.acc-reduce-motion *::before,
body.acc-reduce-motion *::after{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

}

/* Stop smooth scrolling */

body.acc-reduce-motion html{
    scroll-behavior:auto !important;
}

/* Disable hover effects */

body.acc-reduce-motion .btn:hover,
body.acc-reduce-motion .nav-cta:hover,
body.acc-reduce-motion .example:hover,
body.acc-reduce-motion .dcard:hover,
body.acc-reduce-motion .accessibility-toggle:hover{

    transform:none !important;

    box-shadow:none !important;

}

/* Stop blinking cursor */

body.acc-reduce-motion .typing-cursor{

    animation:none !important;

}

/* Stop pulse animations */

body.acc-reduce-motion .pulse,
body.acc-reduce-motion .sparki-card,
body.acc-reduce-motion .signal,
body.acc-reduce-motion .recommendation{

    animation:none !important;

    transition:none !important;

}
/* =====================================================
   Large Cursor
===================================================== */

body.acc-cursor,
body.acc-cursor *{
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1' d='M2 2 L2 18 L7 13 L11 22 L14 20 L10 11 L18 11 Z'/%3E%3C/svg%3E") 2 2, auto !important;
}

/* Text cursor */

body.acc-cursor input,
body.acc-cursor textarea{
    cursor:text !important;
}

/* Buttons and links */

body.acc-cursor button,
body.acc-cursor a{
    cursor:pointer !important;
}
/* =====================================================
   Keyboard Focus
===================================================== */

body.acc-focus *:focus-visible{

    outline:3px solid #DFF66B !important;

    outline-offset:3px !important;

    border-radius:6px;

    box-shadow:
        0 0 0 6px rgba(223,246,107,.25);

}

/* Buttons */

body.acc-focus button:focus-visible,
body.acc-focus .btn:focus-visible,
body.acc-focus .nav-cta:focus-visible{

    transform:none !important;

}

/* Links */

body.acc-focus a:focus-visible{

    text-decoration:underline;

}

/* Inputs */

body.acc-focus input:focus-visible,
body.acc-focus textarea:focus-visible{

    border-color:#DFF66B !important;

}
.sparky-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:60px;
    margin-bottom:50px;
}

.sparky-text{
    flex:1;
}

.sparky-image{
    flex-shrink:0;
}

.sparky-image img {
    width: 220px;
    height: 220px;          /* Must equal width */
    object-fit: cover;      /* Crops the image nicely */
    border-radius: 50%;     /* Makes it a circle */
    border: 5px solid #dff66b; /* Yellow-green border */
    display: block;
}
@media (max-width:900px){

    .sparky-header{
        flex-direction:column;
        text-align:center;
    }

    .sparky-image{
        margin-top:20px;
    }

    .sparky-image img{
        width:220px;
    }

}
.example-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
}

.example-avatar{
    width:48px;
    height:48px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #d9ff4d;
    flex-shrink:0;
}
.sparky-card-header{
    display:flex;
    align-items:center;
   justify-content: space-between;
    margin-bottom:16px;
}

.sparky-card-avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #d9ff4d;
    flex-shrink:0;
    margin-right: 12px; /* Adjust this value */
    margin-top: 12px; /* Adjust this value */
}
/* =======================================================
   FOUNDERS
======================================================= */

.founders-section {
    padding: 120px 24px;
    /* text-align: left; */
   background:linear-gradient(135deg,#F7F7F7 0%,#F1F1EC 100%)
}

.founders-grid {
    max-width: 1200px;
    margin: 70px auto 0;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
}

.founder-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.founder-photo {
    width: 190px;
    height: 190px;

    object-fit: cover;

    border-radius: 50%;

    border: 3px solid rgba(255,255,255,.08);

    margin-bottom: 22px;
}

.founder-card h3 {
    margin: 0;

    font-size: 1.35rem;
    font-weight: 600;
}

.founder-role {
    margin-top: 8px;

    color: #7b8ca8;

    font-size: .95rem;
}

.founder-bio {
    margin-top: 18px;

    max-width: 280px;

    color: var(--ink-soft);

    line-height: 1.7;

    font-size: .95rem;
       text-align: center;

}

.linkedin-btn {

    width: 42px;
    height: 42px;

    margin-top: 24px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: white;

    text-decoration: none;

    background: rgba(255,255,255,.06);

    border: 1px solid rgba(255,255,255,.08);

    transition: .25s;
}


.linkedin-btn {

    width: 42px;
    height: 42px;

    margin-top: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #0A66C2;
    color: white;

    transition: .25s;
}

.linkedin-btn:hover {
    transform: translateY(-3px);
    background: #084c91;
}

/* ==========================
   Tablet
========================== */

@media (max-width: 900px) {

    .founders-grid {

        grid-template-columns: 1fr;

        gap: 60px;
    }

}