/* InFaktory marketing site — shared styles for /, /about.html, /guide.html,
   /signup.html. Deliberately independent from app/infaktory-tokens.css —
   two separate frontends, no shared styling system by design — but the
   same token NAMES (--bg/--acc/--txt/--bor/--fnt/--radius-*) now point at
   the same InFaktory hex values as the app, and a few blocks below
   (.ifk-mark, the hero/cost/balloon mocks) are ported by copy, not by
   reference. */

:root{
  --bg:      #ffffff;
  --sur:     #f4f6f5;
  --sur2:    #ecf0ef;
  --bor:     #d6dcda;
  --bor-strong:#848f8d;
  --acc:     #0e7c6b;      /* brand teal — buttons, large display text, icons */
  --acc-text:#0b6a5c;      /* darker teal for small text-on-white (eyebrows, links) */
  --acc-hover:#095649;
  --acc-soft:#e6f3f0;
  --acc-ink: #ffffff;      /* text on top of the accent-teal buttons */
  --grn: #2f7a1f;
  --warn:#9a5b00; --warn-soft:#fbf1de;
  --red: #b42a22;
  --txt: #0e1111;
  --mut: #56605e;
  --mut2:#6b7674;
  --fnt: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fnt-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 28px; --sp-7: 40px;
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0;
  --maxw: 1200px;

  /* Dark sections (hero / vision / footer) are permanently dark — no
     runtime theme toggle exists on this site, so these are plain literal
     values, not an aliased/toggleable token layer. */
  --ds-bg:     #0a0c0c;
  --ds-text:   #e9eeed;
  --ds-text-2: #94a09e;
  --ds-text-3: #7f8b89;
  --ds-border: #263030;
  --ds-accent: #3fbfa8;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt); font-family:var(--fnt);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--acc-text); text-decoration:none}
a:hover{color:var(--acc-hover); text-decoration:underline}
h1,h2,h3,h4{font-family:var(--fnt); font-weight:600; letter-spacing:-.02em; margin:0 0 var(--sp-3)}
p{margin:0 0 var(--sp-4); color:var(--mut)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--sp-5)}
img,svg{max-width:100%}
ul{margin:0; padding:0; list-style:none}

/* ── Dark-section base (hero / vision / footer) ── */
.dark-section{background:var(--ds-bg); color:var(--ds-text)}
.dark-section p{color:var(--ds-text-2)}
.dark-section a{color:var(--ds-text)}

/* ── Top nav — always dark, since every page opens on a dark hero ── */
.m-nav{
  position:sticky; top:0; z-index:20; background:rgba(10,12,12,.85);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--ds-border);
}
.m-nav .wrap{display:flex; align-items:center; justify-content:space-between; height:68px; gap:var(--sp-6)}
.m-brand{display:flex; align-items:center}
.m-brand svg{display:block; height:24px}
.m-links{display:flex; align-items:center; gap:var(--sp-6); margin-right:auto; margin-left:var(--sp-6)}
.m-links a{color:var(--ds-text-2); font-weight:500; font-size:13.5px}
.m-links a:hover{color:var(--ds-text); text-decoration:none}
.m-cta-group{display:flex; align-items:center; gap:var(--sp-3)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--fnt); font-weight:500; font-size:14px; cursor:pointer;
  border-radius:var(--radius-md); padding:11px 20px; border:1px solid transparent;
  transition:background .15s, border-color .15s; white-space:nowrap;
}
.btn-primary{background:var(--acc); color:var(--acc-ink)}
.btn-primary:hover{background:var(--acc-hover); text-decoration:none; color:var(--acc-ink)}
.btn-ghost{background:transparent; border-color:var(--ds-border); color:var(--ds-text)}
.btn-ghost:hover{border-color:var(--ds-text-2); text-decoration:none; color:var(--ds-text)}
.btn-outline-dark{background:transparent; border-color:#5f6c6a; color:var(--ds-text)}
.btn-outline-dark:hover{border-color:var(--ds-text); text-decoration:none; color:var(--ds-text)}
.btn-lg{padding:13px 22px; font-size:15px}
.btn-block{width:100%}

/* ── Small mono "NN Section name" kicker, used above every H2 ── */
.kicker{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--fnt-mono);
  font-weight:500; font-size:13px; color:var(--acc-text); margin-bottom:var(--sp-3);
}
.kicker i{width:8px; height:8px; background:var(--acc); flex:none}
.kicker-accent{color:var(--ds-accent)}
.kicker-accent i{background:var(--ds-accent)}
.footnote{display:block; font-size:13px; color:var(--mut)}
.dark-section .footnote{color:var(--ds-text-3)}

/* ── Hero ── */
.hero{padding:88px 0 72px; position:relative; overflow:hidden}
.hero .wrap{position:relative}
.hero-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,460px),1fr)); gap:var(--sp-7); align-items:end}
.hero-copy{display:flex; flex-direction:column; gap:var(--sp-5); max-width:640px}
.hero h1{font-size:clamp(38px,5.5vw,64px); line-height:1; margin:0}
.hero-sub-lead{font-size:16.5px; line-height:1.6; max-width:560px; margin:0}
.hero-ctas{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; padding-top:var(--sp-2)}

/* hero mock card — "Illustrative product view" */
.hero-visual{background:#131717; border:1px solid var(--ds-border); font-size:13px; width:100%; justify-self:end}
.hv-head{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--ds-border)}
.hv-head .hv-id{font-family:var(--fnt-mono); color:var(--ds-text-2)}
.hv-head .hv-part{color:var(--ds-text)}
.hv-head .hv-status{margin-left:auto; display:flex; align-items:center; gap:8px; color:var(--ds-accent)}
.hv-row{display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 16px; border-bottom:1px solid var(--ds-border)}
.hv-num{width:20px; height:20px; border:1.5px solid var(--ds-text); display:grid; place-items:center; font:500 10px var(--fnt-mono); color:var(--ds-text); flex:none}
.hv-num.warn{border-color:#e9b04f; color:#e9b04f}
.hv-num.done{background:var(--ds-accent); border-color:var(--ds-accent); color:var(--ds-bg)}
.hv-row .hv-val{font-family:var(--fnt-mono); color:var(--ds-text)}
.hv-row .hv-flag{color:#e9b04f}
.hv-foot{padding:10px 16px; border-top:1px solid var(--ds-border); font-size:12px; color:var(--ds-text-3)}

.ifk-mark--dark .ifk-stem{fill:var(--ds-text)}
.ifk-mark--dark .ifk-chevron{fill:var(--ds-accent)}

/* ── Sections ── */
.section{padding:88px 0}
.section-alt{background:var(--sur)}
.section h2{font-size:clamp(28px,3.2vw,40px); line-height:1.08}
.section-sub{font-size:16.5px; max-width:560px; margin:var(--sp-3) 0 0}

/* ── Platform grid ── */
.platform-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--bor); border:1px solid var(--bor); margin-top:var(--sp-6)}
.platform-card{background:var(--bg); padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-3); min-height:240px}
.platform-card-head{display:flex; justify-content:space-between; align-items:center; font-family:var(--fnt-mono); font-size:12px; font-weight:500; color:var(--mut)}
.platform-card-first .platform-card-head{color:var(--acc-text)}
.platform-card h3{font-size:21px; margin:0}
.platform-card p{font-size:14.5px; margin:0}
.platform-tag{margin-top:auto; font-weight:500; font-size:14px; color:var(--txt)}
.badge{display:inline-block; padding:2px 7px; background:var(--sur2); font-size:11px; font-weight:500; color:var(--mut)}
.badge-first{background:var(--acc-soft); color:var(--acc-text)}

/* ── Engineering-intelligence rows ── */
.eng-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,420px),1fr)); gap:var(--sp-7); align-items:center; margin-top:var(--sp-7)}
.eng-row:first-of-type{margin-top:var(--sp-6)}
.eng-label{font-family:var(--fnt-mono); font-size:13px; font-weight:500; color:var(--mut)}
.eng-copy h3{font-size:clamp(22px,2.4vw,28px); line-height:1.15; margin:var(--sp-2) 0 var(--sp-3)}
.eng-copy p{font-size:16.5px; margin:0}

.cost-mock{background:var(--sur); border:1px solid var(--bor); font-size:13px}
.cost-mock-head{display:flex; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--bor); font-weight:600}
.cost-mock-head span:last-child{font-family:var(--fnt-mono); color:var(--mut); font-weight:400}
.cost-mock-body{display:flex; flex-direction:column; padding:6px 16px 14px}
.cost-mock-row{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--bor); font-size:14px}
.cost-mock-row span:last-child{font-family:var(--fnt-mono)}
.cost-mock-row.total{border-bottom:2px solid var(--txt)}
.cost-mock-row.price{border-bottom:none; padding-top:10px; font-weight:600; font-size:15px}
.cost-mock-foot{padding:10px 16px; border-top:1px solid var(--bor); font-size:12px; color:var(--mut2)}

.balloon-mock{background:var(--sur); border:1px solid var(--bor); padding:20px}
.balloon-mock svg{width:100%; display:block; background:var(--bg); border:1px solid var(--bor)}

/* ── How-it-works short step grid (distinct from guide.html's .steps/.step) ── */
.steps-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,220px),1fr)); gap:var(--sp-6); margin-top:var(--sp-6)}
.step-card{display:flex; flex-direction:column; gap:var(--sp-2)}
.step-card-dots{display:flex; gap:4px}
.step-card-dots i{width:9px; height:9px; background:var(--txt); flex:none}
.step-card-dots i.on{background:var(--acc)}
.step-card-n{font-family:var(--fnt-mono); font-size:12.5px; color:var(--mut)}
.step-card h4{font-size:19px; margin:0}
.step-card p{font-size:14.5px; margin:0}

.teaser-link{display:inline-block; font-weight:500; font-size:15px; margin-top:var(--sp-5)}

/* ── Industries ── */
.industries-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,380px),1fr)); gap:var(--sp-7); align-items:start}
.industry-list{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,200px),1fr)); border-top:2px solid var(--txt)}
.industry-list li{padding:17px 0; border-bottom:1px solid var(--bor); font-size:16.5px; font-weight:500}

/* ── Vision ── */
.vision-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,420px),1fr)); gap:var(--sp-7); align-items:start}
.vision-checklist{display:flex; flex-direction:column; border-top:1px solid var(--ds-border); font-size:15.5px}
.vision-checklist span{display:flex; align-items:center; gap:14px; padding:15px 0; border-bottom:1px solid var(--ds-border)}
.vision-checklist span i{width:8px; height:8px; background:var(--ds-text); flex:none}
.vision-checklist span.vc-accent i{background:var(--ds-accent)}
.vision-checklist .footnote{padding:14px 0 0; border-bottom:none}

/* ── About teaser ── */
.about-teaser-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,380px),1fr)); gap:var(--sp-7); align-items:start}
.about-teaser-copy p{font-size:16.5px; color:var(--txt); opacity:.85; margin:0 0 var(--sp-3)}

/* ── CTA banner ── */
.cta-banner{
  background:var(--sur); border:1px solid var(--bor); padding:56px var(--sp-6);
  text-align:center;
}
.cta-banner h2{font-size:28px; margin-bottom:var(--sp-3)}
.cta-banner p{max-width:480px; margin:0 auto var(--sp-5); font-size:15.5px}

/* ── Prose (about.html narrative) ── */
.prose{max-width:720px; margin:0 auto}
.prose h2{font-size:24px; margin-top:var(--sp-7)}
.prose p{font-size:15.5px; color:var(--txt); opacity:.85}
.prose p.mut{color:var(--mut); opacity:1}

/* ── Numbered steps (guide.html walkthrough) ── */
.steps{display:flex; flex-direction:column; gap:0}
.step{
  display:grid; grid-template-columns:40px 1fr; gap:var(--sp-5);
  padding:var(--sp-6) 0; border-bottom:1px solid var(--bor);
}
.step:last-child{border-bottom:none}
.step-num{
  width:36px; height:36px; background:var(--sur2); border:1px solid var(--bor);
  color:var(--acc-text); font-family:var(--fnt-mono); font-weight:600; font-size:15px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.step h3{font-size:17px; margin-bottom:6px}
.step p{margin:0; font-size:14px}
.step-tag{
  display:inline-block; font-family:var(--fnt-mono); font-size:10.5px; font-weight:600;
  color:var(--acc-text); background:var(--acc-soft);
  padding:2px 8px; margin-bottom:8px; text-transform:uppercase; letter-spacing:.3px;
}

/* ── Form (signup / request a demo) ── */
.form-card{
  max-width:480px; margin:0 auto; background:var(--sur); border:1px solid var(--bor);
  padding:var(--sp-7);
}
.fg{margin-bottom:var(--sp-4)}
.fg label{display:block; font-size:13px; color:var(--mut); margin-bottom:6px}
.fg input,.fg textarea,.fg select{
  width:100%; background:var(--bg); border:1px solid var(--bor-strong); color:var(--txt);
  border-radius:var(--radius-sm); padding:10px 12px; font-size:14px; font-family:var(--fnt);
}
.fg input:focus,.fg textarea:focus{outline:none; border-color:var(--acc)}
.fg textarea{resize:vertical; min-height:80px}
.form-msg{
  margin-top:var(--sp-4); padding:12px 14px; font-size:13.5px;
  display:none;
}
.form-msg.on{display:block}
.form-msg.ok{background:var(--acc-soft); border:1px solid var(--acc); color:var(--grn)}
.form-msg.err{background:var(--warn-soft); border:1px solid var(--red); color:var(--red)}

/* ── Footer ── */
.m-footer{padding:48px 0}
.m-footer .wrap{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-6); font-size:13px}
.m-footer-brand{display:flex; flex-direction:column; gap:var(--sp-3)}
.m-footer-brand svg{height:26px}
.m-footer-links{display:flex; gap:var(--sp-6); flex-wrap:wrap}
.m-footer-links a{color:var(--ds-text-2); font-size:13px}
.m-footer-copy{color:var(--ds-text-2); font-size:13px}

code, .mono{font-family:var(--fnt-mono)}

/* ---------- Ported from app/infaktory-motion.css (k-chevron) ----------
   Copied, not linked — the marketing site keeps zero styling dependency
   on app/*.css by design. The chevron separates from its stem and
   re-aligns on a loop while work is in progress (replaces the former
   q-tally dot sequence). */
.ifk-chevron { transform-box: fill-box; }
.ifk-mark { width: 16px; height: 16px; vertical-align: middle; overflow: visible; }
.ifk-mark .ifk-stem { fill: var(--q-ai-unit-on, #0E1111); }
.ifk-mark .ifk-chevron { fill: var(--q-ai-unit-final, #0E7C6B); }
.ifk-mark.ifk-process .ifk-chevron { animation: ifk-process-mark 1500ms var(--q-ease, cubic-bezier(0.2,0,0,1)) infinite; }
@keyframes ifk-process-mark { 0% { transform: translateX(0); } 40% { transform: translateX(3px); } 80%, 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .ifk-mark.ifk-process .ifk-chevron { animation: none; transform: none; }
}

@media (max-width: 1040px){
  .platform-grid{grid-template-columns:repeat(2, 1fr)}
}

@media (max-width: 860px){
  .m-links{display:none}
  .platform-grid{grid-template-columns:1fr}
  .eng-row{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr}
  .industry-list{grid-template-columns:1fr}
  .hero{padding:56px 0 48px}
  .section{padding:56px 0}
}