:root{
  --bg:#070b14; --bg2:#0b1220; --panel:#0f1a2e; --panel2:#0c1528;
  --text:#e8eefc; --muted:#a7b6d6; --brand:#2dd4bf; --brand2:#60a5fa;
  --ring:rgba(45,212,191,.35); --shadow:0 20px 60px rgba(0,0,0,.35);
  --stroke:rgba(255,255,255,.08); --radius:18px; --max:1160px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}
[data-theme="light"]{
  --bg:#f7fafc; --bg2:#ffffff; --panel:#ffffff; --panel2:#f3f6fb;
  --text:#0b1220; --muted:#4b5563; --brand:#0ea5e9; --brand2:#10b981;
  --ring:rgba(14,165,233,.18); --shadow:0 18px 46px rgba(2,6,23,.10);
  --stroke:rgba(2,6,23,.10);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--sans); color:var(--text); line-height:1.55; overflow-x:hidden;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(96,165,250,.18), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(45,212,191,.14), transparent 60%),
    radial-gradient(700px 500px at 50% 110%, rgba(45,212,191,.10), transparent 65%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--max); margin:0 auto; padding:0 18px}
.topbar{
  position:sticky; top:0; z-index:50; backdrop-filter:blur(14px);
  background:rgba(7,11,20,.55); border-bottom:1px solid var(--stroke);
}
[data-theme="light"] .topbar{background:rgba(255,255,255,.78)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.2px}
.logo{
  width:38px; height:38px; border-radius:12px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  border:1px solid rgba(255,255,255,.12); box-shadow:0 12px 32px rgba(45,212,191,.18);
}
.logo:before{content:""; position:absolute; inset:-20%; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.45), transparent 55%); transform:rotate(18deg)}
.brand span small{display:block; margin-top:-2px; color:var(--muted); font-weight:700; letter-spacing:.3px}
.navlinks{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center}
.navlinks a{
  padding:8px 10px; border-radius:12px; color:var(--muted); font-weight:800;
}
.navlinks a:hover{background:rgba(255,255,255,.06); color:var(--text)}
[data-theme="light"] .navlinks a:hover{background:rgba(2,6,23,.06)}
.navlinks a.active{color:#071018; background:linear-gradient(135deg,var(--brand),var(--brand2)); border:1px solid transparent}
.actions{display:flex; gap:10px; align-items:center}
.btn{
  border:1px solid var(--stroke); background:rgba(255,255,255,.06); color:var(--text);
  border-radius:14px; padding:10px 12px; font-weight:900; display:inline-flex; gap:10px; align-items:center;
  transition:transform .12s ease, background .2s ease, border-color .2s ease; cursor:pointer; user-select:none;
}
[data-theme="light"] .btn{background:rgba(2,6,23,.03)}
.btn:hover{transform:translateY(-1px); border-color:rgba(255,255,255,.18)}
[data-theme="light"] .btn:hover{border-color:rgba(2,6,23,.16)}
.btn.primary{
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  border-color:transparent; color:#061018; box-shadow:0 16px 38px rgba(45,212,191,.18);
}
.btn.primary:hover{transform:translateY(-2px)}
.icon{width:18px; height:18px; display:inline-block}

.menuBtn{display:none}
@media (max-width: 980px){
  .navlinks{display:none}
  .menuBtn{display:inline-flex}
}

.drawer{position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.55); display:none}
.drawer.open{display:block}
.drawer .panel{
  position:absolute; right:0; top:0; height:100%; width:min(380px,92vw);
  background:var(--panel); border-left:1px solid var(--stroke); padding:16px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px;
}
.drawer a{
  padding:12px 12px; border-radius:14px; border:1px solid var(--stroke);
  background:rgba(255,255,255,.05); color:var(--text); font-weight:900;
}
[data-theme="light"] .drawer a{background:rgba(2,6,23,.03)}
.drawer .row{display:flex; gap:10px}
.drawer .row .btn{flex:1}

header.pageHero{padding:36px 0 14px}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--stroke); border-radius:var(--radius); box-shadow:var(--shadow);
}
[data-theme="light"] .card{background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85))}
.heroInner{padding:22px; position:relative; overflow:hidden}
.heroInner:before{
  content:""; position:absolute; inset:-40%;
  background:radial-gradient(circle at 30% 30%, rgba(96,165,250,.22), transparent 55%),
             radial-gradient(circle at 70% 30%, rgba(45,212,191,.16), transparent 55%);
  filter:blur(6px); transform:rotate(8deg);
}
.heroInner>*{position:relative}
.kicker{
  display:inline-flex; gap:10px; align-items:center; padding:8px 10px; border-radius:999px;
  border:1px solid var(--stroke); background:rgba(255,255,255,.05); color:var(--muted);
  font-weight:800; font-family:var(--mono); font-size:12px;
}
.kicker b{color:var(--text)}
h1{margin:12px 0 8px; font-size:clamp(28px, 3.6vw, 44px); line-height:1.05; letter-spacing:-.9px}
.lede{margin:0; color:var(--muted); font-weight:700; max-width:78ch}
section{padding:28px 0}
.secHead{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:14px}
.secHead h2{margin:0; font-size:22px; letter-spacing:-.3px}
.secHead p{margin:0; color:var(--muted); max-width:80ch; font-weight:650}

.grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px}
@media (max-width: 980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 640px){.grid{grid-template-columns:1fr}}

.tile{
  padding:16px; border-radius:18px; border:1px solid var(--stroke); background:rgba(255,255,255,.03);
  transition:transform .15s ease, border-color .2s ease, background .2s ease;
}
[data-theme="light"] .tile{background:rgba(2,6,23,.02)}
.tile:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.05)}
[data-theme="light"] .tile:hover{border-color:rgba(2,6,23,.15); background:rgba(2,6,23,.03)}
.tag{
  display:inline-flex; font-family:var(--mono); font-size:11px; font-weight:900; color:var(--muted);
  border:1px solid var(--stroke); padding:6px 8px; border-radius:999px; background:rgba(255,255,255,.03);
}
[data-theme="light"] .tag{background:rgba(2,6,23,.02)}
.tile h3{margin:10px 0 6px; font-size:16px; letter-spacing:-.2px}
.tile p{margin:0; color:var(--muted); font-weight:650; font-size:13px}
.meta{margin-top:10px; display:flex; gap:8px; flex-wrap:wrap}
.badge{
  font-size:11px; font-weight:950; color:var(--muted); padding:6px 8px; border-radius:999px;
  border:1px solid var(--stroke); background:rgba(255,255,255,.03);
}
[data-theme="light"] .badge{background:rgba(2,6,23,.02)}

.controls{display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 16px}
.input{
  flex:1 1 260px; display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:14px; border:1px solid var(--stroke); background:rgba(255,255,255,.04);
}
[data-theme="light"] .input{background:rgba(2,6,23,.03)}
.input input{width:100%; border:0; outline:0; background:transparent; color:var(--text); font-weight:800; font-size:14px}
.pillRow{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.pill{
  border:1px solid var(--stroke); background:rgba(255,255,255,.04); color:var(--muted);
  border-radius:999px; padding:8px 10px; font-weight:950; font-size:12px; cursor:pointer;
  transition:transform .12s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
[data-theme="light"] .pill{background:rgba(2,6,23,.03)}
.pill:hover{transform:translateY(-1px)}
.pill.active{color:#071018; border-color:transparent; background:linear-gradient(135deg,var(--brand),var(--brand2))}

.carousel{
  position:relative; border-radius:22px; border:1px solid var(--stroke); background:rgba(255,255,255,.03);
  overflow:hidden;
}
[data-theme="light"] .carousel{background:rgba(2,6,23,.02)}
.carouselTrack{
  display:flex; gap:12px; padding:14px; overflow:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:thin;
}
.carouselTrack::-webkit-scrollbar{height:10px}
.carouselTrack::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14); border-radius:999px}
[data-theme="light"] .carouselTrack::-webkit-scrollbar-thumb{background:rgba(2,6,23,.12)}
.slide{
  min-width:min(520px, 86vw); scroll-snap-align:start; border-radius:18px;
  border:1px solid var(--stroke); background:rgba(255,255,255,.04); padding:16px;
}
[data-theme="light"] .slide{background:rgba(2,6,23,.03)}
.slide h3{margin:8px 0 6px}
.slide p{margin:0; color:var(--muted); font-weight:650}
.carouselNav{
  position:absolute; top:12px; right:12px; display:flex; gap:10px;
}
.carouselNav .btn{padding:10px 10px}

.pricing{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;
}
@media (max-width: 980px){.pricing{grid-template-columns:1fr}}
.priceCard{
  padding:18px; border-radius:22px; border:1px solid var(--stroke); background:rgba(255,255,255,.03);
}
[data-theme="light"] .priceCard{background:rgba(2,6,23,.02)}
.priceCard h3{margin:6px 0 6px}
.price{font-size:34px; font-weight:1000; letter-spacing:-.8px; margin:8px 0}
.ul{margin:10px 0 0; padding-left:18px; color:var(--muted); font-weight:650}
.small{color:var(--muted); font-weight:650; font-size:12px}
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start;
}
@media (max-width: 980px){.split{grid-template-columns:1fr}}
.field{display:grid; gap:6px}
.field label{font-weight:900; font-size:12px; color:var(--muted); letter-spacing:.2px}
.field input,.field textarea,.field select{
  width:100%; padding:12px 12px; border-radius:14px; border:1px solid var(--stroke);
  background:rgba(255,255,255,.04); color:var(--text); font-weight:800; outline:none;
}
[data-theme="light"] .field input,[data-theme="light"] .field textarea,[data-theme="light"] .field select{background:rgba(2,6,23,.03)}
.field textarea{min-height:120px; resize:vertical}
footer{padding:26px 0 42px; color:var(--muted); border-top:1px solid var(--stroke); margin-top:18px}
.foot{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:center}
.tiny{font-family:var(--mono); font-size:12px}
.reveal{opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:translateY(0)}
.skip{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{left:12px; top:12px; width:auto; height:auto; padding:10px 12px; border-radius:14px; background:var(--panel); border:1px solid var(--stroke); z-index:100}


/* Portfolio logos */
.logoGrid{display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; align-items:stretch;}
@media (max-width: 980px){ .logoGrid{ grid-template-columns:repeat(2, 1fr);} }
@media (max-width: 520px){ .logoGrid{ grid-template-columns:1fr;} }
.logoCard{border:1px solid var(--stroke); background:rgba(255,255,255,.03); border-radius:18px; padding:14px; display:flex; flex-direction:column; gap:10px;}
[data-theme="light"] .logoCard{ background:rgba(2,6,23,.02); }
.logoCard img{ width:100%; height:auto; border-radius:14px; border:1px solid var(--stroke); background:rgba(255,255,255,.02); }

/* Lead-capture modal */
.modalOverlay{position:fixed; inset:0; z-index:80; display:none; background:rgba(0,0,0,.62); backdrop-filter: blur(10px);}
.modalOverlay.open{ display:block; }
.modal{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(980px, 94vw); max-height:min(92vh, 780px); overflow:auto; border-radius:22px; border:1px solid var(--stroke); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow: var(--shadow);}
[data-theme="light"] .modal{background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85));}
.modalHeader{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 16px 10px; border-bottom:1px solid var(--stroke);}
.modalHeader h3{ margin:0; font-size:18px; letter-spacing:-.2px; }
.modalHeader p{ margin:6px 0 0; color:var(--muted); font-weight:650; }
.modalBody{ padding:16px; }
.modalGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 980px){ .modalGrid{ grid-template-columns:1fr; } }
.embedFrame{width:100%; height: 520px; border:1px solid var(--stroke); border-radius:18px; background: rgba(255,255,255,.03);}
[data-theme="light"] .embedFrame{ background: rgba(2,6,23,.02); }
<style>
.trustBadges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.badge {
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: #ddd;
  text-align: center;
  backdrop-filter: blur(4px);
}

/* Optional hover polish */
.badge:hover {
  background: rgba(0,200,150,0.12);
  border-color: rgba(0,200,150,0.4);
  color: #fff;
}
/* Collapsible chatbot dock */
.chatDock{
  position:fixed;
  right:18px;
  bottom:80px;
  z-index:9998;
  width:min(380px, calc(100vw - 24px));
  pointer-events:none;
}
.chatDock *{box-sizing:border-box;}
.chatToggle,
.chatPanel{
  pointer-events:auto;
  border:1px solid var(--stroke);
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, rgba(15,24,43,.98), rgba(10,18,34,.96));
  color:var(--text);
}
.chatToggle{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  cursor:pointer;
  font-weight:850;
  width:fit-content;
}
.chatToggle .badge{
  background: rgba(45,212,191,.10);
  border-color: rgba(45,212,191,.35);
}
.chatPanel{
  display:none;
  margin-top:10px;
  border-radius:20px;
  overflow:hidden;
}
.chatDock.open .chatPanel{display:block;}
.chatDock.open .chatToggle{display:none;}
.chatHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--stroke);
}
.chatHeadTitle{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.chatHeadTitle strong{display:block; font-size:14px;}
.chatHeadTitle span{display:block; color:var(--muted); font-size:12px;}
.chatActions{display:flex; align-items:center; gap:8px;}
.chatMiniBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid var(--stroke);
  color:var(--text);
  background: rgba(255,255,255,.04);
  text-decoration:none;
  font-weight:900;
  cursor:pointer;
}
.chatFrame{
  width:100%;
  height:min(70vh, 560px);
  border:0;
  background:#fff;
  display:block;
}
@media (max-width: 700px){
  .chatDock{
    right:12px;
    left:12px;
    bottom:12px;
    width:auto;
  }
  .chatFrame{height:62vh;}
}
</style>