/* ============ Fonts ============ */
@font-face{font-family:Inter;src:url(../assets/fonts/inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(../assets/fonts/inter-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(../assets/fonts/inter-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(../assets/fonts/geist-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(../assets/fonts/geist-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --bg:#F2F0EE; --surface:#fff; --ink:#202020; --ink-soft:#616060; --faint:#9E9E9E;
  --accent:#ED4F00; --line:#DBDBD3;
  --mono:"Geist Mono",ui-monospace,monospace;
  --pad:clamp(20px,5vw,90px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:clamp(60px,8vw,120px) clamp(60px,8vw,120px);
  background-position:center top;
}
img{display:block;max-width:100%}
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em;font-size:12px;color:var(--ink-soft)}
h1,h2,h3{font-weight:500;letter-spacing:-.05em;line-height:1.02}

/* ============ Blueprint guides ============ */
.guides{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.guides .vline{position:absolute;top:0;bottom:0;width:1px;
  background:repeating-linear-gradient(var(--accent) 0 6px,transparent 6px 12px);opacity:.45}
.guides .hplus{position:absolute;color:var(--accent);font-size:18px;transform:translate(-50%,-50%)}

/* ============ Nav ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;padding:22px var(--pad);}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700;letter-spacing:.02em}
.brand img{width:22px;height:22px}
.menu-btn{width:42px;height:42px;background:var(--ink);border:0;border-radius:3px;display:grid;place-content:center;gap:4px;cursor:pointer}
.menu-btn span{display:block;width:16px;height:1.5px;background:#fff}
.menu{position:fixed;inset:0;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  opacity:0;visibility:hidden;transition:opacity .35s;z-index:49}
.menu.open{opacity:1;visibility:visible}
.menu a{color:#fff;text-decoration:none;font-size:34px;font-weight:500;letter-spacing:-.04em;opacity:.85}
.menu a:hover{opacity:1;color:var(--accent)}
.menu .menu-cta{margin-top:14px;font-size:13px;font-family:var(--mono);text-transform:uppercase;border:1px solid #fff3;padding:12px 22px;border-radius:3px}

/* ============ Hero ============ */
.hero{position:relative;min-height:100vh;padding:120px var(--pad) 0;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.corner{position:absolute;width:14px;height:14px;border:1.5px solid var(--accent);z-index:2}
.corner.tl{top:96px;left:var(--pad);border-right:0;border-bottom:0}
.corner.tr{top:96px;right:var(--pad);border-left:0;border-bottom:0}
.corner.bl{bottom:130px;left:var(--pad);border-right:0;border-top:0}
.corner.br{bottom:130px;right:var(--pad);border-left:0;border-top:0}

.hero-grid{position:relative;z-index:3;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(20px,5vw,70px);max-width:1500px;margin:0 auto;width:100%}

.numgrid{display:grid;grid-template-columns:repeat(2,26px);grid-auto-rows:26px;gap:8px;align-content:center}
.numgrid .num{display:grid;place-content:center;background:#0000000a;border:1px solid var(--line);font-family:var(--mono);font-size:9px;color:var(--faint)}
.numgrid .num:first-child{grid-column:1/2;grid-row:2}

.marker{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px}
.marker .chip{background:var(--accent);color:#fff;font-family:var(--mono);font-size:11px;padding:3px 7px;border-radius:2px}
.marker.light .chip{background:var(--accent)}

.hero-copy h1{font-size:clamp(40px,5.4vw,75px);letter-spacing:-.05em;color:var(--ink);max-width:13ch}
.hero-copy .sub{margin:22px 0 30px;max-width:34ch;line-height:1.6;letter-spacing:.02em}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);text-transform:uppercase;font-size:12px;
  letter-spacing:.04em;padding:16px 26px;border-radius:3px;text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),background .2s}
.btn svg{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.btn:hover{transform:scale(1.03)} .btn:hover svg{transform:translateX(4px)}
.btn-light{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-dark{background:var(--ink);color:#fff}
.btn-accent{background:var(--accent);color:#fff}
.btn.full{width:100%;justify-content:center}

/* node diagram */
.node-diagram{position:relative;width:200px;height:240px}
.node{position:absolute;background:#fff;border:1px solid var(--line);display:grid;place-content:center}
.node-core{width:96px;height:96px;left:52px;top:72px;border:2px solid var(--accent);background:var(--ink)}
.node-core img{width:42px;filter:invert(1)}
.node-top{width:36px;height:36px;left:82px;top:8px}
.node-right{width:36px;height:36px;right:0;top:102px}
.node-bottom{width:36px;height:36px;left:82px;bottom:8px}
.node .ic{width:16px;height:12px;border:1.5px solid var(--accent)}
.ic-rows{border:0;background:repeating-linear-gradient(var(--accent) 0 2px,transparent 2px 5px)}
.ic-card{border-radius:2px}
.bracket{position:absolute;width:9px;height:9px;border:1.5px solid var(--accent)}
.b-tl{top:-4px;left:-4px;border-right:0;border-bottom:0}
.b-tr{top:-4px;right:-4px;border-left:0;border-bottom:0}
.b-bl{bottom:-4px;left:-4px;border-right:0;border-top:0}
.b-br{bottom:-4px;right:-4px;border-left:0;border-top:0}
/* dashed connectors */
.node-diagram::before,.node-diagram::after{content:"";position:absolute;border-color:var(--accent);opacity:.4}
.node-diagram::before{left:100px;top:44px;width:0;height:28px;border-left:1px dashed var(--accent)}
.node-diagram::after{left:148px;top:118px;width:52px;height:0;border-top:1px dashed var(--accent)}

.dither{position:absolute;left:0;right:0;bottom:140px;width:100%;opacity:.5;mix-blend-mode:multiply;z-index:1;pointer-events:none}

.hero-stats{position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1500px;margin:40px auto 50px;width:100%}
.stat{position:relative;padding-top:16px}
.stat .tick{position:absolute;top:0;left:0;width:12px;height:12px;border-left:1.5px solid var(--accent);border-top:1.5px solid var(--accent)}
.stat p{line-height:1.5}

/* ============ Blocks ============ */
.block{position:relative;z-index:3;padding:clamp(70px,10vw,140px) var(--pad);max-width:1500px;margin:0 auto}
.block>h2{font-size:clamp(32px,4.4vw,56px);letter-spacing:-.05em;margin-bottom:50px;max-width:16ch}
.block.dark{background:var(--ink);color:#fff;max-width:none;margin:0;border-radius:0}
.block.dark h2{color:#fff}
.marker.light .mono{color:#fff9}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.card{background:var(--bg);padding:30px}
.card .idx{display:block;color:var(--accent);margin-bottom:30px}
.card h3{font-size:21px;margin-bottom:10px}
.card p{color:var(--ink-soft);font-size:14px;line-height:1.6}
.card-more{background:var(--ink);color:#fff}.card-more p{color:#fff8}.card-more .idx{color:var(--accent)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:#ffffff14;border:1px solid #ffffff14}
.step{background:var(--ink);padding:30px}
.step .idx{display:block;color:var(--accent);margin-bottom:30px}
.step h3{font-size:20px;margin-bottom:10px}
.step p{color:#ffffff80;font-size:14px;line-height:1.6}

/* results */
.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.result{background:var(--bg);padding:34px}
.result .big{display:block;font-size:54px;letter-spacing:-.04em;color:var(--ink);text-transform:none;margin-bottom:12px}
.result p{color:var(--ink-soft);font-size:13px;line-height:1.5}

/* case study */
.case{display:grid;grid-template-columns:1.2fr 1fr;border:1px solid var(--line);background:#fff}
.case>img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.case-body{padding:40px;display:flex;flex-direction:column;gap:20px;justify-content:center}
.case-head{display:flex;align-items:center;gap:10px}
.ceo img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.case-body p{font-size:22px;letter-spacing:-.02em;line-height:1.4}
.link{color:var(--accent);text-decoration:none}

/* industries */
.industries{border-top:1px solid var(--line)}
.ind{display:grid;grid-template-columns:60px 1fr 40px;align-items:center;gap:20px;padding:26px 4px;border-bottom:1px solid var(--line);
  cursor:pointer;text-decoration:none;color:var(--ink);transition:padding-left .3s,background .3s}
.ind:hover{padding-left:24px;background:#fff}
.ind h3{font-size:clamp(22px,2.6vw,34px);letter-spacing:-.04em}
.ind .arrow{color:var(--accent);text-align:right;transition:transform .3s}
.ind:hover .arrow{transform:translateX(6px)}

/* integrations */
.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.logo{background:var(--bg);display:grid;place-content:center;padding:38px;min-height:120px}
.logo img{max-height:34px;width:auto;opacity:.7;filter:grayscale(1);transition:opacity .3s,filter .3s}
.logo:hover img{opacity:1;filter:none}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.plan{border:1px solid var(--line);background:#fff;padding:34px;display:flex;flex-direction:column;gap:16px}
.plan .idx{color:var(--accent)}
.plan h3{font-size:28px}
.plan p{color:var(--ink-soft);font-size:14px;line-height:1.6}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin:6px 0 auto}
.plan ul li{padding-left:18px;position:relative;text-transform:none;font-size:12px;color:var(--ink-soft)}
.plan ul li::before{content:"";position:absolute;left:0;top:5px;width:7px;height:7px;background:var(--accent)}
.plan-pro{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.plan-pro::before{content:"";position:absolute;width:300px;height:300px;background:radial-gradient(circle,#ED4F0066,transparent 70%);right:-80px;bottom:-80px}
.plan-pro h3,.plan-pro .idx{color:#fff}.plan-pro p,.plan-pro li{color:#ffffff99}

/* faq */
.faq{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:24px 4px;display:flex;justify-content:space-between;align-items:center;
  font-size:clamp(17px,2vw,22px);letter-spacing:-.02em}
.qa summary::-webkit-details-marker{display:none}
.qa .pm{position:relative;width:14px;height:14px;flex:0 0 14px}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;background:var(--accent);transition:transform .3s}
.qa .pm::before{top:6px;left:0;width:14px;height:2px}
.qa .pm::after{top:0;left:6px;width:2px;height:14px}
.qa[open] .pm::after{transform:scaleY(0)}
.qa p{padding:0 4px 26px;color:var(--ink-soft);max-width:60ch;line-height:1.6}

/* contact + footer */
.contact{position:relative;z-index:3;padding:0 var(--pad) 0;margin-top:60px}
.contact-card{background:var(--ink);color:#fff;border-radius:14px;padding:clamp(40px,7vw,90px);position:relative;overflow:hidden;max-width:1500px;margin:0 auto}
.contact-card::before{content:"";position:absolute;width:500px;height:500px;background:radial-gradient(circle,#ED4F0044,transparent 70%);right:-120px;bottom:-200px}
.contact-card h2{font-size:clamp(32px,5vw,60px);color:#fff;margin:18px 0 14px;max-width:18ch;letter-spacing:-.05em}
.contact-card>p{color:#ffffffaa;margin-bottom:30px}
.contact-card .btn-accent{display:inline-flex}
.foot-cols{display:flex;gap:60px;flex-wrap:wrap;margin-top:60px;position:relative;z-index:2}
.foot-cols .lbl{display:block;color:#ffffff66;margin-bottom:14px}
.foot-cols a{display:block;color:#fff;text-decoration:none;text-transform:none;font-family:Inter;font-size:14px;margin-bottom:8px;opacity:.8}
.foot-cols a:hover{opacity:1;color:var(--accent)}
.wordmark{font-family:Inter;font-weight:700;font-size:clamp(80px,22vw,340px);letter-spacing:-.05em;text-align:center;line-height:.8;
  background:linear-gradient(0deg,var(--bg),var(--ink-soft));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  margin-top:-2vw;user-select:none;overflow:hidden}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding:24px var(--pad);max-width:1500px;margin:0 auto;flex-wrap:wrap;gap:12px}
.foot-bottom a{color:var(--ink-soft);text-decoration:none}.foot-bottom a:hover{color:var(--accent)}

/* ============ Responsive ============ */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .numgrid,.node-diagram{display:none}
  .hero-stats{grid-template-columns:1fr;gap:14px}
  .case{grid-template-columns:1fr}
  .corner{display:none}
  .foot-cols{gap:32px}
}