:root{
  --butec-blue:#275FAD;
  --butec-orange:#DA7742;
  --ink:#0b1220;
  --muted:#5b667a;
  --bg:#ffffff;
  --soft:#f5f7fb;
  --border:rgba(15,23,42,.12);
  --radius-xl:24px;
  --radius-lg:18px;
  --shadow:0 18px 45px rgba(15,23,42,.10);
  --shadow-soft:0 12px 28px rgba(15,23,42,.08);
  --maxw:1180px;
  --header-h:78px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.container{width:min(var(--maxw), calc(100% - 3.2rem)); margin:0 auto}
@media (max-width:680px){ .container{width: min(var(--maxw), calc(100% - 2.2rem));} }

header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--border);
}
.navbar{
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{display:flex; align-items:center; gap:.8rem}
.brand img{height:34px}
.navlinks{display:flex; align-items:center; gap:1.25rem; font-size:.92rem}
.navlinks a{position:relative; padding:.25rem .1rem; color:#1f2937}
.navlinks a:after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:var(--butec-orange); transition:width .18s ease;
}
.navlinks a:hover:after, .navlinks a.active:after{width:100%}

.navright{display:flex; align-items:center; gap:1rem}
.navphone{display:flex; flex-direction:column; text-align:right; line-height:1.1}
.navphone span{font-size:.78rem; color:var(--muted)}
.navphone a{color:var(--butec-blue); font-weight:700; font-size:.98rem}

.btn{
  border:1px solid transparent; cursor:pointer; border-radius:999px;
  padding:.7rem 1.1rem; font-weight:700; letter-spacing:.01em;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:var(--butec-orange); color:#fff;
  box-shadow: 0 14px 30px rgba(218,119,66,.34);
}
.btn-primary:hover{filter:brightness(.96); transform:translateY(-1px)}
.btn-ghost{
  background:rgba(39,95,173,.06);
  border-color:rgba(39,95,173,.18);
  color:var(--butec-blue);
}
.btn-ghost:hover{filter:brightness(.98); transform:translateY(-1px)}
.btn-link{
  background:transparent; border-color:transparent; color:var(--butec-blue);
  padding:.55rem .2rem; font-weight:700;
}

.burger{
  display:none;
  width:44px;height:44px;border-radius:12px;
  border:1px solid var(--border);
  background:#fff; cursor:pointer;
  align-items:center; justify-content:center;
}
.burger svg{width:22px;height:22px}
.mobilepanel{
  display:none;
  border-top:1px solid var(--border);
  background:rgba(255,255,255,.96);
}
.mobilepanel .inner{padding:1rem 0 1.2rem}
.mobilepanel a{
  display:block; padding:.75rem .2rem;
  color:#1f2937; font-weight:600;
}
.mobilepanel .cta{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:.6rem}
@media (max-width:960px){
  .navlinks{display:none}
  .navphone{display:none}
  .burger{display:flex}
  .mobilepanel{display:block}
  .mobilepanel[hidden]{display:none}
}

section{padding:3.8rem 0}
.section-head{margin-bottom:1.7rem}
.kicker{
  display:inline-flex; gap:.45rem; align-items:center;
  font-size:.8rem; color:#8a4b20;
  background:rgba(218,119,66,.14);
  border:1px solid rgba(218,119,66,.22);
  padding:.22rem .65rem; border-radius:999px;
}
.h1{
  font-size: clamp(2rem, 4vw, 3rem);
  line-height:1.1; margin:.8rem 0 .7rem;
  letter-spacing:-.03em;
}
.h2{
  font-size: clamp(1.35rem, 2.3vw, 1.9rem);
  letter-spacing:-.02em; margin:0 0 .3rem;
}
.p{color:var(--muted); max-width:62ch}

.hero{
  padding:2.7rem 0 3.6rem;
  background:
    radial-gradient(800px 400px at 10% 10%, rgba(218,119,66,.20), transparent 60%),
    radial-gradient(700px 420px at 90% 15%, rgba(39,95,173,.18), transparent 62%),
    linear-gradient(180deg, #f7f8ff, #ffffff 60%);
  border-bottom:1px solid var(--border);
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap:2.4rem;
  align-items:center;
}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:1.6rem}
}
.hero-card{
  background:rgba(255,255,255,.86);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius:var(--radius-xl);
  padding:1.25rem 1.25rem 1.15rem;
}
.hero-metrics{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:.9rem; margin-top:1.1rem;
}
.metric{
  padding:.85rem .95rem;
  border-radius:18px;
  border:1px solid var(--border);
  background:rgba(245,247,251,.75);
}
.metric strong{display:block; font-size:1.05rem}
.metric span{display:block; font-size:.82rem; color:var(--muted)}
@media (max-width:520px){ .hero-metrics{grid-template-columns:1fr} }

.hero-actions{display:flex; gap:.9rem; flex-wrap:wrap; margin-top:1.25rem}
.hero-visual{
  position:relative;
  border-radius:var(--radius-xl);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
  background: linear-gradient(135deg, rgba(39,95,173,.10), rgba(218,119,66,.10));
}
.hero-visual img{width:100%; height:360px; object-fit:cover}
@media (max-width:980px){ .hero-visual img{height:280px} }

.grid{display:grid; gap:1.3rem}
.grid.cols-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.grid.cols-2{grid-template-columns:repeat(2, minmax(0,1fr))}
@media (max-width:980px){ .grid.cols-3{grid-template-columns:1fr} .grid.cols-2{grid-template-columns:1fr} }

.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow: var(--shadow-soft);
  padding:1.25rem 1.25rem 1.2rem;
  position:relative;
  overflow:hidden;
}
.card:before{
  content:"";
  position:absolute; inset:-120px -120px auto auto;
  width:240px; height:240px; border-radius:999px;
  background: radial-gradient(circle, rgba(218,119,66,.20), transparent 70%);
  pointer-events:none;
}
.card h3{margin:.1rem 0 .35rem; font-size:1.05rem; letter-spacing:-.01em}
.card p{margin:0; color:var(--muted); font-size:.93rem}
.card .meta{margin-top:.8rem; display:flex; gap:.6rem; flex-wrap:wrap}
.pill{
  font-size:.78rem; color:#20415d;
  background:rgba(39,95,173,.08);
  border:1px solid rgba(39,95,173,.15);
  padding:.22rem .6rem;
  border-radius:999px;
}
.pill.orange{
  color:#7a3c18;
  background:rgba(218,119,66,.12);
  border-color: rgba(218,119,66,.22);
}
.iconbox{
  width:46px; height:46px; border-radius:16px;
  display:grid; place-items:center;
  border:1px solid rgba(39,95,173,.18);
  background: rgba(39,95,173,.08);
}
.iconbox.orange{
  border-color: rgba(218,119,66,.22);
  background: rgba(218,119,66,.10);
}
.iconbox svg{width:22px;height:22px}

.picker{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
@media (max-width:980px){ .picker{grid-template-columns:1fr} }
.pick{
  cursor:pointer;
  border-radius:22px;
  padding:1rem 1rem 1.05rem;
  border:1px solid var(--border);
  background:rgba(255,255,255,.9);
  box-shadow: var(--shadow-soft);
  transition: transform .12s ease, border-color .12s ease;
  position:relative;
}
.pick:hover{transform:translateY(-2px); border-color: rgba(218,119,66,.35)}
.pick[aria-pressed="true"]{
  border-color: rgba(218,119,66,.55);
  box-shadow: 0 18px 40px rgba(218,119,66,.18);
}
.pick h4{margin:.2rem 0 .3rem; font-size:1rem}
.pick p{margin:0; color:var(--muted); font-size:.92rem}
.pick .mini{margin-top:.7rem; display:flex; gap:.45rem; flex-wrap:wrap}

.summary{
  margin-top:1.2rem;
  border-radius:22px;
  border:1px solid var(--border);
  background: rgba(245,247,251,.75);
  padding:1rem 1.1rem;
  display:flex; gap:1rem; align-items:center; justify-content:space-between;
  flex-wrap:wrap;
}
.summary strong{display:block}
.summary span{color:var(--muted); font-size:.9rem}

.faq{display:grid; gap:.75rem; max-width:900px}
.faq button{
  width:100%;
  text-align:left;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:1rem 1.05rem;
  cursor:pointer;
  display:flex; justify-content:space-between; gap:1rem; align-items:center;
  box-shadow: var(--shadow-soft);
}
.faq button span{font-weight:800}
.faq button .chev{transition: transform .15s ease}
.faq button[aria-expanded="true"] .chev{transform:rotate(180deg)}
.faq .panel{
  margin-top:-.35rem;
  border-radius:18px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.9);
  padding:.95rem 1.05rem 1.05rem;
  color:var(--muted);
  display:none;
}
.faq .panel[data-open="true"]{display:block}

.tabs{display:flex; gap:.6rem; flex-wrap:wrap}
.tab{
  border-radius:999px;
  padding:.55rem .9rem;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  font-weight:800;
  color:#1f2937;
}
.tab[aria-selected="true"]{
  background: rgba(218,119,66,.12);
  border-color: rgba(218,119,66,.35);
  color:#7a3c18;
}
.tabpanes{margin-top:1.2rem}
[hidden]{display:none !important}

.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
@media (max-width:980px){.projects{grid-template-columns:1fr}}
.project{border-radius:22px;overflow:hidden;border:1px solid var(--border);background:#fff;box-shadow:var(--shadow-soft);cursor:pointer;transition:transform .12s ease,border-color .12s ease}
.project:hover{transform:translateY(-2px);border-color:rgba(39,95,173,.26)}
.project img{height:190px;width:100%;object-fit:cover}
.project .body{padding:1rem 1.05rem 1.1rem}
.project .title{font-weight:900;margin-bottom:.2rem}
.project .metat{color:#94a3b8;font-size:.82rem;margin-bottom:.35rem}
.project .desc{color:var(--muted);font-size:.92rem;margin:0}

.lb{position:fixed;inset:0;z-index:3000;background:rgba(10,16,28,.72);display:none;align-items:center;justify-content:center;padding:1.3rem}
.lb[data-open="true"]{display:flex}
.lb .modal{width:min(980px,100%);background:#fff;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.lb .modal img{width:100%;height:420px;object-fit:cover}
@media (max-width:680px){.lb .modal img{height:260px}}
.lb .modal .mbody{padding:1rem 1.1rem 1.15rem}
.lb .close{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
.lb .close svg{width:22px;height:22px}

.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:1.4rem;align-items:start}
@media (max-width:980px){.split{grid-template-columns:1fr}}
.embed{border:1px solid var(--border);border-radius:24px;overflow:hidden;background:#fff;box-shadow:var(--shadow-soft)}
.embed iframe{width:100%;height:690px;border:0}
@media (max-width:680px){.embed iframe{height:760px}}

.software-card{ text-align:center; }
.software-logo{
  height:78px;
  width:auto;
  object-fit:contain;
  margin:0 auto 14px;
  filter: drop-shadow(0 10px 18px rgba(15,23,42,.10));
}
@media (max-width:680px){ .software-logo{height:70px;} }

footer{
  border-top:1px solid var(--border);
  padding:1.6rem 0 2.2rem;
  color:#94a3b8;
  font-size:.82rem;
  background: linear-gradient(180deg, #ffffff, #fbfcff);
}
.footergrid{
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; flex-wrap:wrap;
}
.footergrid a{color:#94a3b8}
.footergrid a:hover{color:var(--butec-blue)}

.reveal{opacity:0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease}
.reveal.in{opacity:1; transform:none}