/* Shared styles for the homepage and the industry pages. */
:root{
  --paper: #f5efe6;
  --paper-2: #efe7d9;
  --paper-3: #e8dfcd;
  --ink: #2a1f17;
  --ink-soft: #5a463a;
  --ink-mute: #8a7563;
  --rust: #a84d2e;
  --rust-deep: #8b3d23;
  --rust-soft: #c8704f;
  --clay: #d5957a;
  --sage: #7a8a6c;
  --line: rgba(42,31,23,0.14);
  --line-soft: rgba(42,31,23,0.08);
}
*{box-sizing:border-box}
img,svg{max-width:100%}
html,body{margin:0;padding:0; overflow-x:clip}
html{scroll-behavior:smooth}
body{
  font-family:"Inter",system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(168,77,46,0.06), transparent 40%),
    radial-gradient(circle at 88% 60%, rgba(122,138,108,0.05), transparent 45%);
}
section, header, footer, nav{position:relative; z-index:1}

/* nav */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 32px;
  max-width:1180px; margin:0 auto;
  position:relative; z-index:2;
}
.brand{display:flex; align-items:center; gap:11px; font-weight:600; letter-spacing:-0.01em; color:inherit; text-decoration:none}
.brand-mark{
  width:42px; height:42px; border-radius:10px;
  background:#e8c2b0;
  overflow:hidden;
  flex-shrink:0;
  box-shadow: 0 0 0 1px rgba(168,77,46,0.25), 0 2px 6px -2px rgba(80,40,20,0.3);
}
.brand-mark img{width:100%; height:100%; object-fit:cover; display:block}
.brand-name{font-size:19px; font-family:"Newsreader",serif; font-weight:500; letter-spacing:-0.015em}
.brand-name em{color:var(--rust); font-style:italic; font-weight:500}
.nav-links{display:flex; gap:28px; font-size:14px; color:var(--ink-soft)}
.nav-links a{color:inherit; text-decoration:none}
.nav-links a:hover{color:var(--rust)}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 20px;
  border-radius:8px;
  font-size:15px;
  font-weight:500;
  font-family:inherit;
  text-decoration:none;
  border:1px solid transparent;
  transition:transform .15s ease, background .2s ease, color .2s ease;
  cursor:pointer;
}
.btn-primary{background:var(--rust); color:var(--paper); border-color:var(--rust-deep)}
.btn-primary:hover{background:var(--rust-deep); transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink); background:rgba(42,31,23,0.04)}
.btn-light{background:var(--paper); color:var(--rust-deep); border-color:var(--paper)}
.btn-light:hover{background:#fff}
.btn-outline-light{background:transparent; color:var(--paper); border-color:rgba(245,239,230,0.5)}
.btn-outline-light:hover{border-color:var(--paper)}
.btn .arr{transition:transform .15s ease}
.btn:hover .arr{transform:translateX(2px)}

/* hero */
.hero{
  text-align:center;
  padding:56px 32px 40px;
  max-width:1180px; margin:0 auto;
}
.hero::before{
  content:"";
  position:absolute;
  left:50%; top:8%;
  width:min(720px, 90%);
  height:280px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(176,74,46,0.11), transparent 68%);
  pointer-events:none;
  z-index:0;
}
.hero > *{position:relative; z-index:1}
.eyebrow{
  display:inline-block;
  font-family:"JetBrains Mono",monospace;
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--rust);
  margin:0 0 16px;
}
.hero h1{
  font-family:"Newsreader",serif;
  font-weight:300;
  font-size:clamp(40px, 6.4vw, 76px);
  line-height:1.05;
  letter-spacing:-0.025em;
  margin:0 auto 18px;
  max-width:17ch;
  text-wrap:balance;
}
.hero h1 em{color:var(--rust); font-style:italic; font-weight:400}
.hero p.lede{
  font-size:19px;
  line-height:1.55;
  color:var(--ink-soft);
  max-width:56ch;
  margin:0 auto 30px;
}
.hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.hero-points{
  list-style:none; padding:0;
  margin:30px auto 0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px;
  font-size:14.5px; color:var(--ink-soft);
}
.hero-points li::before{content:"✓"; color:var(--rust); font-weight:600; margin-right:8px}

/* section header */
.section-head{text-align:center; padding:100px 32px 36px; max-width:900px; margin:0 auto}
.section-head h2{
  text-wrap:balance;
  font-family:"Newsreader",serif;
  font-weight:300;
  font-size:clamp(34px, 4.6vw, 58px);
  line-height:1.08;
  letter-spacing:-0.02em;
  margin:0 0 14px;
}
.section-head h2 em{color:var(--rust); font-style:italic; font-weight:400}
.section-head p{
  font-size:18px; line-height:1.55; color:var(--ink-soft);
  max-width:56ch; margin:0 auto;
}

/* problem + calculator */
.problem{
  max-width:1080px; margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center;
}
.problem ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:16px}
.problem li{
  font-size:17px; line-height:1.5; color:var(--ink-soft);
  padding-left:28px; position:relative;
}
.problem li::before{
  content:""; position:absolute; left:0; top:9px;
  width:12px; height:12px; border-radius:50%;
  background:var(--rust); box-shadow:0 0 0 4px rgba(168,77,46,0.15);
}
.problem li strong{color:var(--ink); font-weight:600}
.calc{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:16px;
  padding:26px;
}
.calc h3{font-family:"Newsreader",serif; font-size:24px; font-weight:400; margin:0 0 16px}
.calc-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px}
.calc label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--ink-soft)}
.calc input{
  font:inherit; font-size:17px; color:var(--ink);
  padding:10px 12px; border-radius:8px;
  border:1px solid var(--line); background:var(--paper);
  width:100%;
}
.calc input:focus{outline:2px solid var(--rust-soft); outline-offset:1px}
.calc-out{
  border-top:1px solid var(--line); padding-top:14px;
  font-size:15px; color:var(--ink-soft); line-height:1.45;
}
.calc-out b{
  display:block;
  font-family:"Newsreader",serif; font-size:40px; font-weight:400;
  color:var(--rust); line-height:1.1;
}
.calc-note{font-size:12.5px; color:var(--ink-mute); margin:10px 0 0}

/* offers */
.offers{
  max-width:1180px; margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
}
.offer{
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--paper);
  padding:30px 28px;
  transition:border-color .25s ease, transform .25s ease;
}
.offer:hover{border-color:var(--rust-soft); transform:translateY(-2px)}
.offer-icon{
  width:48px; height:48px; border-radius:12px;
  background:var(--paper-3); border:1px solid var(--line);
  display:grid; place-items:center;
  color:var(--rust); margin-bottom:18px;
}
.offer h3{font-family:"Newsreader",serif; font-size:26px; font-weight:400; letter-spacing:-0.01em; margin:0 0 8px}
.offer p{font-size:15.5px; line-height:1.55; color:var(--ink-soft); margin:0}

/* demo stage */
.stage{margin:48px auto 0; max-width:1180px; padding:0 32px}

/* industries */
.industries{
  max-width:1180px; margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns:repeat(5, 1fr); gap:14px;
}
.industry{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:14px;
  background:var(--paper); padding:22px 20px;
  transition:border-color .25s ease, transform .25s ease;
}
.industry:hover{border-color:var(--rust-soft); transform:translateY(-3px)}
.industry strong{display:block; font-family:"Newsreader",serif; font-size:22px; font-weight:400; margin-bottom:6px}
.industry span{font-size:14px; line-height:1.45; color:var(--ink-soft)}
.industry .go{display:block; margin-top:12px; color:var(--rust); font-size:13.5px; font-weight:500}
.industries-note{text-align:center; font-size:15px; color:var(--ink-mute); margin:22px auto 0; padding:0 32px}

/* steps */
.steps-band{background:var(--paper-2); margin-top:100px; padding-bottom:90px}
.steps-band .section-head{padding-top:90px}
.steps{
  max-width:1080px; margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:32px;
  list-style:none;
}
.step{border-top:2px solid var(--rust); padding-top:16px}
.step .n{font-family:"Newsreader",serif; font-style:italic; font-size:32px; color:var(--rust); line-height:1; margin:0 0 10px}
.step h3{font-family:"Newsreader",serif; font-size:23px; font-weight:400; margin:0 0 8px}
.step p{font-size:15.5px; line-height:1.55; color:var(--ink-soft); margin:0}

/* FAQ */
.faq-list{max-width:760px; margin:0 auto; padding:0 32px}
.faq-item{border-top:1px solid var(--line); padding:24px 0 22px}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item h3{font-family:"Newsreader",serif; font-size:22px; font-weight:400; margin:0 0 8px; letter-spacing:-0.01em}
.faq-item p{font-size:16px; line-height:1.55; color:var(--ink-soft); margin:0}

/* "we also automate" band */
.also{
  max-width:1116px;
  margin:110px auto 0;
  padding:64px 60px;
  background:var(--rust);
  color:var(--paper);
  border-radius:22px;
  display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center;
  overflow:hidden;
  width:calc(100% - 64px);
}
.also::after{
  content:""; position:absolute; right:-80px; top:-80px; width:320px; height:320px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
  pointer-events:none;
}
.also h2{font-family:"Newsreader",serif; font-weight:300; font-size:clamp(32px, 4vw, 46px); line-height:1.1; letter-spacing:-0.02em; margin:0 0 14px}
.also h2 em{font-style:italic; color:#fde9d8}
.also p{font-size:17px; line-height:1.6; color:rgba(245,239,230,0.88); margin:0}
.also ul{list-style:none; padding:0; margin:0 0 24px; display:flex; flex-wrap:wrap; gap:8px}
.also ul li{
  font-size:14px; padding:7px 14px; border-radius:99px;
  border:1px solid rgba(255,255,255,0.28); color:var(--paper);
}
.also .cta-row{justify-content:flex-start}

/* final CTA */
.cta-final{text-align:center; padding:110px 32px 40px; max-width:900px; margin:0 auto}
.cta-final h2{
  text-wrap:balance;
  font-family:"Newsreader",serif; font-weight:300;
  font-size:clamp(36px, 5.4vw, 64px); line-height:1.04; letter-spacing:-0.025em;
  margin:0 0 16px;
}
.cta-final h2 em{color:var(--rust); font-style:italic; font-weight:400}
.cta-final p{font-size:18px; line-height:1.55; color:var(--ink-soft); max-width:50ch; margin:0 auto 28px}
.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* breadcrumbs (industry pages) */
.crumbs{max-width:1180px; margin:0 auto; padding:0 32px; font-size:13px; color:var(--ink-mute)}
.crumbs a{color:inherit}
.crumbs a:hover{color:var(--rust)}

/* footer */
footer{
  border-top:1px solid var(--line);
  margin:80px auto 0;
  padding:40px 32px 50px;
  max-width:1180px;
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:30px;
  font-size:13.5px;
  color:var(--ink-soft);
}
footer h2{
  font-family:"JetBrains Mono",monospace;
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-mute); margin:0 0 14px; font-weight:500;
}
footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
footer a{color:var(--ink-soft); text-decoration:none}
footer a:hover{color:var(--rust)}
.foot-brand p{margin:10px 0 0; max-width:36ch; line-height:1.55}

/* motion */
@keyframes rise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: no-preference){
  .hero h1{animation:rise .8s ease .05s both}
  .hero .lede{animation:rise .8s ease .15s both}
  .hero-cta{animation:rise .8s ease .25s both}
  .js-ready .reveal{
    opacity:0; transform:translateY(16px);
    transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
    transition-delay:var(--d, 0s);
  }
  .js-ready .reveal.in{opacity:1; transform:none}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn-primary:hover, .offer:hover, .industry:hover{transform:none}
}

@media (max-width: 960px){
  .industries{grid-template-columns:repeat(3, 1fr)}
}
@media (max-width: 900px){
  .nav-links{display:none}
  .problem{grid-template-columns:1fr; gap:28px}
  .offers{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr; gap:24px}
  .also{grid-template-columns:1fr; gap:24px; padding:44px 32px}
  footer{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .nav{padding:16px 16px 10px; gap:12px}
  .brand-name{font-size:18px}
  .nav .btn{padding:10px 12px; font-size:13px; white-space:nowrap}
  .hero{padding:34px 16px 24px}
  .hero h1{font-size:clamp(34px, 10.5vw, 48px); line-height:1.08}
  .hero p.lede{font-size:17px; line-height:1.5}
  .hero-cta, .cta-row{flex-direction:column; align-items:stretch}
  .hero-cta .btn, .cta-row .btn{justify-content:center; min-height:48px}
  .section-head{padding:70px 16px 24px}
  .section-head h2{font-size:clamp(30px, 9vw, 40px)}
  .section-head p{font-size:16.5px}
  .problem, .offers, .stage, .industries, .steps, .faq-list, .crumbs{padding:0 16px}
  .industries{grid-template-columns:1fr 1fr}
  .calc-row{grid-template-columns:1fr 1fr}
  .steps-band{margin-top:70px; padding-bottom:64px}
  .also{width:calc(100% - 32px); margin-top:80px; padding:36px 22px; border-radius:16px}
  .cta-final{padding:80px 16px 32px}
  footer{grid-template-columns:1fr; gap:28px; padding:34px 16px 96px; margin-top:44px}
}
@media (max-width: 420px){
  .btn .arr{display:none}
  .industries{grid-template-columns:1fr}
}