/* ---------------------------------------------------------------------------
   One stylesheet, every SAAR product page.

   The point of this file is that there is only one of it. Seven products on
   four different stacks (Django 1.11, Django 5, Node, Laravel) cannot share a
   template, but they can share a look — so the marketing pages live here as
   flat HTML and the apps keep their own chrome. A colour changed here changes
   every product page at once, which is the whole reason not to let each app
   grow its own marketing page.
--------------------------------------------------------------------------- */
:root {
    --brand:        #3b82f6;
    --brand-deep:   #1d4ed8;
    --brand-dark:   #1e3a8a;
    --cyan:         #22d3ee;
    --violet:       #8b5cf6;
    --violet-deep:  #6d28d9;
    --ink:          #0f172a;
    --ink-600:      #475569;
    --ink-400:      #64748b;   /* was #94a3b8: 2.56:1 on white, under AA */
    --line:         #e2e8f0;
    --wash:         #f8fafc;
    --radius:       16px;
    --container:    1180px;

    /* Feature-icon tints. These were inline hex on every product page until
       the pass that added Complaints/Attendance/Library/Learn/Collaborate;
       a tint is a design decision and belongs here with the rest of them. */
    --tint-blue-1:   #dbeafe;
    --tint-blue-2:   #eff6ff;
    --tint-violet-1: #ede9fe;
    --tint-violet-2: #f5f3ff;
    --tint-cyan-1:   #cffafe;
    --tint-cyan-2:   #ecfeff;

    --focus:        #1d4ed8;
    --shot-navy:    #0f1e3d;
    --shot-muted:   #93a5c4;
    --shot-dot:     #cbd5e1;
    --positive:     #15803d;
    --cta-1:        #0b2a6b;
    --cta-2:        #143b8f;
    --cta-3:        #2b1f78;
    --cta-text:     #c7d5ee;
    --cta-eyebrow:  #93c5fd;
    --white:        #ffffff;
    --brand-wash:   #eff6ff;
}

/* Visible keyboard focus on every interactive thing, on white and on navy. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
    border-radius: 4px;
}
.cta a:focus-visible { outline-color: var(--white); }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--ink);
    background: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.container { width: min(var(--container), calc(100% - 48px)); margin: auto; }

/* ---- header ---- */
header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.nav { height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.3px; }
.nav__brand img { height: 34px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 28px; font-size: 14px; color: var(--ink-600); }
.nav__links a:hover { color: var(--ink); }
.nav__cta { display: flex; align-items: center; gap: 10px; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 20px; border-radius: 10px; font-size: 14px; font-weight: 600;
    border: 1px solid transparent; cursor: pointer; transition: .2s; white-space: nowrap;
}
.btn--ghost { border-color: var(--brand); color: var(--brand-deep); background: var(--white); }
.btn--ghost:hover { background: var(--brand-wash); }
.btn--solid {
    color: var(--white);
    /* --brand to --violet gave white 3.7:1 and 4.2:1 against its two ends;
       the deep pair clears AA across the whole sweep. */
    background: linear-gradient(100deg, var(--brand-deep), var(--violet-deep));
    box-shadow: 0 6px 18px rgba(59,130,246,.28);
}
.btn--solid:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(59,130,246,.34); }
.btn--lg { padding: 14px 26px; font-size: 15px; }
.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { transform: translateY(-1px); }
.btn--plain { color: var(--white); border-color: rgba(255,255,255,.4); }

/* ---- hero ---- */
.hero { padding: 72px 0 40px; position: relative; overflow: hidden; }
.hero::after {
    content: ""; position: absolute; right: -180px; top: -140px;
    width: 620px; height: 620px; border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,.14), rgba(34,211,238,.10) 45%, transparent 70%);
    pointer-events: none;
}
.hero__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.eyebrow {
    font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--brand-deep); margin-bottom: 18px;
}
.hero h1 {
    font-size: clamp(38px, 5vw, 62px); line-height: 1.04; letter-spacing: -2.4px; font-weight: 800;
}
.hero p.lede { color: var(--ink-600); font-size: 17px; margin-top: 20px; max-width: 460px; }
.hero__actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }

.shot {
    border-radius: 14px; overflow: hidden;
    border: 1px solid var(--line);
    background: var(--white);
    box-shadow: 0 30px 70px rgba(15,23,42,.14);
}
.shot__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--wash); border-bottom: 1px solid var(--line); }
.shot__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--shot-dot); }
.shot__body { display: grid; grid-template-columns: 150px 1fr; min-height: 300px; }
.shot__side { background: var(--shot-navy); padding: 16px 12px; }
.shot__side .s-logo { color: var(--white); font-weight: 800; font-size: 13px; letter-spacing: 2px; margin-bottom: 18px; padding-left: 6px; }
.shot__side .s-item { color: var(--shot-muted); font-size: 11.5px; padding: 8px 10px; border-radius: 7px; margin-bottom: 2px; }
.shot__side .s-item.is-on { background: rgba(59,130,246,.22); color: var(--white); }
.shot__main { padding: 16px; }
.shot__hello { font-size: 13px; font-weight: 700; }
.shot__sub { font-size: 10.5px; color: var(--ink-400); margin-bottom: 14px; }
.shot__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kpi { border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.kpi small { display: block; font-size: 9px; color: var(--ink-400); text-transform: uppercase; letter-spacing: .6px; }
.kpi strong { display: block; font-size: 17px; margin-top: 3px; }
.kpi em { font-style: normal; font-size: 9.5px; color: var(--positive); }
.shot__chart { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.shot__chart .t { font-size: 10.5px; color: var(--ink-400); margin-bottom: 10px; }
.bars { height: 72px; display: flex; align-items: flex-end; gap: 7px; }
.bars span { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(to top, var(--brand), var(--cyan)); opacity: .85; }

/* ---- grid safety ----
   Grid and flex items default to min-width:auto, so one wide child (a long
   unbroken word, a code sample) pushes the whole page sideways instead of
   shrinking. A previous 390px pass found real bugs here, so this is fixed
   once, centrally, rather than per component.                             */
.hero__grid > *, .features__grid > *, .steps__grid > *,
.stats__grid > *, .shot__body > *, .shot__kpis > *, .foot > * { min-width: 0; }
.kpi strong, .stat b, .feature h3, .step h3, .faq summary { overflow-wrap: anywhere; }

/* ---- features ---- */
.features { padding: 26px 0 70px; }
.features__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; text-align: center; }
.feature__icon {
    width: 58px; height: 58px; border-radius: 15px; display: grid; place-items: center;
    margin: 0 auto 16px; font-size: 24px;
    background: linear-gradient(135deg, var(--tint-blue-1), var(--tint-blue-2));
}
.feature__icon--violet { background: linear-gradient(135deg, var(--tint-violet-1), var(--tint-violet-2)); }
.feature__icon--cyan   { background: linear-gradient(135deg, var(--tint-cyan-1), var(--tint-cyan-2)); }
.feature h3 { font-size: 16px; margin-bottom: 7px; }
.feature p { font-size: 14px; color: var(--ink-600); }

/* ---- stats ---- */
.stats { background: var(--wash); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 44px 0; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat b { display: block; font-size: 34px; font-weight: 800; letter-spacing: -1.4px;
          background: linear-gradient(100deg, var(--brand), var(--violet));
          -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.stat span { font-size: 13.5px; color: var(--ink-600); }

/* ---- cta ---- */
.cta { padding: 78px 0; color: var(--white); position: relative; overflow: hidden;
       background: linear-gradient(120deg, var(--cta-1) 0%, var(--cta-2) 45%, var(--cta-3) 100%); }
.cta::after {
    content: ""; position: absolute; right: -120px; bottom: -220px;
    width: 560px; height: 560px; border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,.45), transparent 66%);
}
.cta__inner { position: relative; z-index: 1; max-width: 640px; }
.cta .eyebrow { color: var(--cta-eyebrow); }
.cta h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.12; letter-spacing: -1.6px; font-weight: 800; }
.cta p { color: var(--cta-text); margin-top: 14px; }
.cta__actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

/* ---- how it works (steps) ---- */
.steps { padding: 60px 0; background: var(--wash); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.steps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.step { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.step b { display: block; font-size: 13px; color: var(--brand-deep); font-weight: 800; margin-bottom: 12px; }
.step h3 { font-size: 16px; margin-bottom: 7px; }
.step p { font-size: 13.5px; color: var(--ink-600); }

/* ---- faq ---- */
.faq { padding: 74px 0; }
.faq__list { max-width: 760px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 15.5px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; color: var(--brand); font-weight: 400; flex-shrink: 0; }
.faq details[open] summary::after { content: "\2013"; }
.faq p { margin-top: 12px; color: var(--ink-600); font-size: 14px; max-width: 660px; }

/* ---- footer ---- */
footer { padding: 26px 0; border-top: 1px solid var(--line); }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.foot__brand { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-600); }
.foot__brand img { height: 26px; }
.foot__links { display: flex; gap: 22px; font-size: 13px; color: var(--ink-600); }
.foot__links a:hover { color: var(--ink); }

/* ---- responsive ---- */
@media (max-width: 950px) {
    .hero__grid { grid-template-columns: 1fr; gap: 40px; }
    .features__grid { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
    .stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
    .stat:nth-child(3) { border-left: none; }
    .steps__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .container { width: min(var(--container), calc(100% - 32px)); }
    .nav__links { display: none; }
    .hero { padding-top: 46px; }
    .hero h1 { letter-spacing: -1.6px; }
    .shot__body { grid-template-columns: 1fr; }
    .shot__side { display: none; }
    .shot__kpis { grid-template-columns: repeat(2, 1fr); }
    .features__grid { grid-template-columns: 1fr; }
    .stats__grid { grid-template-columns: 1fr; }
    .stat + .stat { border-left: none; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 4px; }
    .steps__grid { grid-template-columns: 1fr; }
}

/* ---- hero photo ----
   Real royalty-free photography (Unsplash) framed like the .shot device, so
   the hero shows the world a product serves instead of a mocked-up screen.
   Fixed 1000x640 intrinsic size + aspect-ratio keeps the layout from jumping
   before the image loads. */
.hero__photo {
    border-radius: 14px; overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: 0 30px 70px rgba(15,23,42,.14);
    background: var(--wash);
}
.hero__photo img {
    display: block; width: 100%; height: auto;
    aspect-ratio: 25 / 16; object-fit: cover;
}

/* small, honest image-credit line in the footer */
.foot__note {
    width: 100%; margin-top: 14px;
    font-size: 11px; color: var(--ink-400);
}
.foot__note a { text-decoration: underline; }
.foot__note a:hover { color: var(--ink-600); }