@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#030712;
  --bg-soft:#070b14;
  --surface:#0b0f17;
  --surface-2:#101522;
  --surface-3:#151b29;
  --text:#f8fafc;
  --muted:#94a3b8;
  --muted-2:#64748b;
  --border:rgba(255,255,255,.08);
  --border-light:rgba(255,255,255,.13);
  --purple:#a855f7;
  --indigo:#6366f1;
  --blue:#38bdf8;
  --green:#34d399;
  --pink:#ec4899;
  --orange:#fb923c;
  --danger:#fb7185;
  --radius:22px;
  --container:1240px;
  --shadow:0 25px 80px rgba(0,0,0,.42);
  --gradient:linear-gradient(135deg,#6366f1,#a855f7);
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
}

body{
  background:
    radial-gradient(circle at 20% 0%,rgba(99,102,241,.08),transparent 30%),
    radial-gradient(circle at 80% 15%,rgba(168,85,247,.06),transparent 28%),
    var(--bg);
  color:var(--text);
  font-family:'Plus Jakarta Sans',sans-serif;
  line-height:1.65;
  overflow-x:hidden;
}

body::selection{
  background:rgba(99,102,241,.35);
  color:#fff;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
textarea,
select{
  font:inherit;
}

button{
  cursor:pointer;
}

img{
  max-width:100%;
  display:block;
}

.container{
  width:min(calc(100% - 48px),var(--container));
  margin:auto;
}

.section{
  padding:120px 0;
  position:relative;
}

.ambient{
  position:fixed;
  width:500px;
  height:500px;
  border-radius:50%;
  filter:blur(120px);
  pointer-events:none;
  opacity:.15;
  z-index:-2;
}

.ambient-one{
  background:#6366f1;
  top:8%;
  left:-250px;
}

.ambient-two{
  background:#a855f7;
  right:-250px;
  top:35%;
}

.ambient-three{
  background:#2563eb;
  left:40%;
  bottom:-350px;
}

.announcement{
  height:38px;
  border-bottom:1px solid var(--border);
  background:rgba(3,7,18,.75);
  font-size:11px;
  color:var(--muted);
  letter-spacing:.02em;
  position:relative;
  z-index:50;
}

.announcement-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.announcement a{
  color:#c4b5fd;
  margin-left:10px;
}

.status-dot,
.live-pulse{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 12px rgba(52,211,153,.9);
  display:inline-block;
}

.announcement-divider{
  width:1px;
  height:13px;
  background:var(--border-light);
}

.site-header{
  position:sticky;
  top:0;
  z-index:40;
  border-bottom:1px solid transparent;
  transition:.3s ease;
}

.site-header.scrolled{
  background:rgba(3,7,18,.72);
  border-color:var(--border);
  backdrop-filter:blur(20px);
  box-shadow:0 15px 50px rgba(0,0,0,.2);
}

.nav-container{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.brand{
  display:flex;
  align-items:center;
  gap:11px;
  font-size:18px;
  font-weight:800;
  letter-spacing:-.04em;
  white-space:nowrap;
}

.brand b{
  color:#a5b4fc;
}

.brand-mark{
  width:31px;
  height:31px;
  border-radius:10px;
  background:var(--gradient);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  box-shadow:0 0 30px rgba(99,102,241,.45);
  transform:skew(-8deg);
}

.brand-mark span{
  width:3px;
  border-radius:4px;
  background:#fff;
  display:block;
}

.brand-mark span:nth-child(1){height:9px}
.brand-mark span:nth-child(2){height:17px}
.brand-mark span:nth-child(3){height:12px}

.desktop-nav{
  display:flex;
  align-items:center;
  gap:30px;
  margin-left:auto;
}

.desktop-nav a{
  color:#a5b0c3;
  font-size:13px;
  font-weight:600;
  transition:.2s;
}

.desktop-nav a:hover,
.desktop-nav a.active{
  color:#fff;
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:20px;
}

.text-button{
  font-size:13px;
  color:#cbd5e1;
  font-weight:600;
}

.btn{
  border:1px solid transparent;
  border-radius:12px;
  min-height:46px;
  padding:0 19px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  font-weight:700;
  font-size:13px;
  transition:transform .25s,box-shadow .25s,border-color .25s,background .25s;
  position:relative;
  overflow:hidden;
}

.btn::after{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:60%;
  height:100%;
  transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transition:.6s;
}

.btn:hover::after{
  left:150%;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-primary{
  color:#fff;
  background:linear-gradient(135deg,#6366f1,#8b5cf6 55%,#a855f7);
  box-shadow:0 12px 35px rgba(99,102,241,.25),inset 0 1px rgba(255,255,255,.25);
}

.btn-primary:hover{
  box-shadow:0 18px 45px rgba(99,102,241,.4);
}

.btn-secondary{
  color:#e2e8f0;
  background:rgba(255,255,255,.035);
  border-color:var(--border-light);
}

.btn-secondary:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(168,85,247,.4);
}

.btn-small{
  min-height:40px;
  padding:0 15px;
  font-size:12px;
}

.btn-large{
  min-height:56px;
  padding:0 23px;
}

.full-btn{
  width:100%;
}

.mobile-toggle{
  display:none;
  border:0;
  background:none;
  width:42px;
  height:42px;
}

.mobile-toggle span{
  display:block;
  width:23px;
  height:2px;
  background:#fff;
  margin:5px auto;
  transition:.3s;
}

.mobile-drawer{
  display:none;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  border:1px solid rgba(139,92,246,.28);
  background:rgba(99,102,241,.07);
  color:#c4b5fd;
  padding:8px 13px;
  border-radius:100px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.hero{
  padding-top:105px;
  min-height:770px;
  display:flex;
  align-items:center;
}

.hero-grid{
  display:grid;
  grid-template-columns:1fr 1.08fr;
  gap:65px;
  align-items:center;
}

.hero-copy h1{
  font-size:clamp(48px,5.5vw,79px);
  line-height:1.02;
  letter-spacing:-.065em;
  margin:26px 0;
  max-width:780px;
}

.gradient-text{
  background:linear-gradient(110deg,#818cf8 5%,#c084fc 48%,#f0abfc 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-description{
  color:#9aa7ba;
  font-size:17px;
  max-width:650px;
  line-height:1.8;
}

.hero-actions{
  display:flex;
  gap:12px;
  margin-top:32px;
  flex-wrap:wrap;
}

.center-actions{
  justify-content:center;
}

.play-icon{
  width:26px;
  height:26px;
  border:1px solid var(--border-light);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:8px;
}

.hero-meta{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin-top:24px;
  color:#718096;
  font-size:11px;
}

.hero-meta i{
  color:#8b5cf6;
  margin-right:5px;
}

.hero-visual{
  perspective:1000px;
}

.dashboard-preview{
  display:block;
  position:relative;
  overflow:hidden;
  transform:rotateY(-4deg) rotateX(2deg);
  transition:.5s ease;
}

.dashboard-preview:hover{
  transform:rotateY(0) rotateX(0) translateY(-7px);
}

.glass-card{
  background:
    linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  border:1px solid var(--border);
  box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.035);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.preview-glow{
  position:absolute;
  width:350px;
  height:350px;
  border-radius:50%;
  background:#6366f1;
  opacity:.14;
  filter:blur(100px);
  right:-100px;
  top:-150px;
}

.preview-topbar{
  height:48px;
  display:flex;
  align-items:center;
  padding:0 16px;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.025);
  gap:15px;
}

.window-controls{
  display:flex;
  gap:5px;
}

.window-controls i{
  width:7px;
  height:7px;
  background:#475569;
  border-radius:50%;
}

.preview-url{
  flex:1;
  font-size:9px;
  color:#64748b;
  text-align:center;
}

.preview-live{
  font-size:9px;
  color:#86efac;
}

.preview-live span{
  display:inline-block;
  width:5px;
  height:5px;
  background:#34d399;
  border-radius:50%;
  margin-right:4px;
}

.preview-body{
  display:flex;
  min-height:420px;
}

.preview-sidebar{
  width:50px;
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:23px;
  padding-top:18px;
  color:#475569;
  font-size:11px;
}

.preview-sidebar .mini-logo{
  width:23px;
  height:23px;
  background:var(--gradient);
  border-radius:7px;
}

.preview-sidebar .active{
  color:#a78bfa;
}

.preview-content{
  flex:1;
  padding:25px;
  min-width:0;
}

.preview-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.preview-heading small{
  font-size:8px;
  color:#64748b;
  letter-spacing:.1em;
}

.preview-heading h3{
  font-size:17px;
  margin-top:3px;
}

.date-chip{
  border:1px solid var(--border);
  border-radius:7px;
  padding:6px 9px;
  font-size:8px;
  color:#94a3b8;
}

.mini-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:22px;
}

.mini-stats>div{
  background:rgba(255,255,255,.025);
  border:1px solid var(--border);
  padding:12px;
  border-radius:10px;
}

.mini-stats span,
.mini-stats small{
  display:block;
  color:#64748b;
  font-size:8px;
}

.mini-stats strong{
  display:inline-block;
  font-size:16px;
  margin:3px 5px 2px 0;
}

.mini-stats .positive{
  color:#34d399;
}

.mini-chart{
  border:1px solid var(--border);
  border-radius:11px;
  padding:13px;
  margin-top:9px;
}

.chart-header{
  display:flex;
  justify-content:space-between;
  color:#94a3b8;
  font-size:8px;
}

.chart-header i{
  font-size:7px;
  margin-left:5px;
}

.chart-area{
  height:125px;
  margin-top:10px;
  position:relative;
}

.chart-grid{
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:100% 25%;
}

.chart-area svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.mini-workflow{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
}

.mini-workflow>i{
  color:#475569;
  font-size:8px;
}

.mini-node{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px;
  border:1px solid var(--border);
  border-radius:8px;
  background:rgba(255,255,255,.02);
}

.mini-node>span{
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border-radius:6px;
  font-size:9px;
}

.mini-node.trigger>span{background:rgba(56,189,248,.1);color:#38bdf8}
.mini-node.agent>span{background:rgba(168,85,247,.1);color:#c084fc}
.mini-node.action>span{background:rgba(52,211,153,.1);color:#34d399}

.mini-node small,.mini-node b{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mini-node small{
  font-size:5px;
  color:#64748b;
}

.mini-node b{
  font-size:7px;
}

.trust-section{
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:28px 0;
  background:rgba(255,255,255,.012);
}

.section-kicker{
  font-size:10px;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-bottom:20px;
}

.center{text-align:center}

.logo-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  color:#5c687b;
  font-size:15px;
  font-weight:800;
  filter:grayscale(1);
}

.logo-row i{
  margin-right:7px;
}

.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:50px;
  margin-bottom:55px;
}

.section-heading>div{
  max-width:680px;
}

.section-heading h2,
.center-heading h2{
  font-size:clamp(34px,4vw,53px);
  line-height:1.1;
  letter-spacing:-.05em;
  margin-top:13px;
}

.section-heading>p{
  max-width:420px;
  color:#7e8ca0;
  font-size:14px;
}

.section-label{
  color:#8b7cf6;
  font-size:10px;
  letter-spacing:.16em;
  font-weight:800;
}

.center-heading{
  text-align:center;
  display:block;
  max-width:720px;
  margin:0 auto 55px;
}

.center-heading p{
  margin:18px auto 0;
  color:#7e8ca0;
  max-width:560px;
  font-size:14px;
}

.bento-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:15px;
}

.bento-card{
  padding:31px;
  min-height:330px;
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  transition:.3s;
}

.bento-card:hover{
  transform:translateY(-5px);
  border-color:rgba(139,92,246,.25);
}

.bento-large{
  grid-row:span 2;
  min-height:675px;
}

.bento-wide{
  grid-column:span 2;
  min-height:310px;
}

.card-number{
  position:absolute;
  top:26px;
  right:28px;
  color:#334155;
  font-size:10px;
}

.bento-icon{
  width:45px;
  height:45px;
  display:grid;
  place-items:center;
  border-radius:13px;
  margin-bottom:28px;
  border:1px solid var(--border);
}

.bento-icon.purple{background:rgba(168,85,247,.1);color:#c084fc}
.bento-icon.blue{background:rgba(56,189,248,.1);color:#38bdf8}
.bento-icon.pink{background:rgba(236,72,153,.1);color:#f472b6}
.bento-icon.orange{background:rgba(251,146,60,.1);color:#fb923c}

.card-label{
  display:block;
  font-size:9px;
  letter-spacing:.14em;
  color:#64748b;
  font-weight:800;
  margin-bottom:10px;
}

.bento-card h3{
  font-size:24px;
  line-height:1.2;
  letter-spacing:-.035em;
  margin-bottom:12px;
}

.bento-card p{
  color:#7e8ca0;
  font-size:13px;
  line-height:1.8;
}

.agent-terminal{
  margin-top:35px;
  border:1px solid var(--border);
  background:#050811;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.terminal-header{
  height:38px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 13px;
  background:rgba(255,255,255,.025);
  border-bottom:1px solid var(--border);
}

.terminal-header>span{
  display:flex;
  gap:4px;
}

.terminal-header>span i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#334155;
}

.terminal-header small{
  color:#475569;
  font-size:8px;
}

.terminal-line{
  padding:7px 14px;
  font:10px monospace;
  color:#64748b;
}

.terminal-line b{
  color:#334155;
  margin-right:12px;
}

.green{color:#34d399!important}
.purple-text{color:#a78bfa!important}

.latency-visual{
  margin-top:30px;
}

.latency-visual strong{
  font-size:42px;
  letter-spacing:-.06em;
}

.latency-visual strong span{
  font-size:13px;
  color:#64748b;
  margin-left:5px;
}

.latency-visual small{
  display:block;
  color:#64748b;
  font-size:9px;
}

.latency-line{
  height:2px;
  background:#1e293b;
  margin-top:18px;
  position:relative;
}

.latency-line span{
  position:absolute;
  left:0;
  width:72%;
  height:100%;
  background:linear-gradient(90deg,#6366f1,#a855f7);
  box-shadow:0 0 15px #6366f1;
}

.integration-pills{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:30px;
}

.integration-pills span{
  border:1px solid var(--border);
  background:rgba(255,255,255,.025);
  padding:6px 9px;
  border-radius:7px;
  color:#64748b;
  font-size:8px;
  font-weight:700;
}

.bento-wide-content{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
  align-items:center;
}

.inline-link{
  display:inline-flex;
  gap:8px;
  align-items:center;
  color:#a78bfa;
  font-size:12px;
  font-weight:700;
  margin-top:22px;
}

.inline-link:hover{
  color:#c4b5fd;
}

.floating-nodes{
  position:relative;
  height:180px;
}

.float-node{
  position:absolute;
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 14px;
  border-radius:11px;
  background:rgba(12,17,29,.92);
  border:1px solid var(--border-light);
  font-size:10px;
  box-shadow:0 15px 40px rgba(0,0,0,.4);
}

.float-node i{
  color:#a78bfa;
}

.n1{left:5%;top:10%}
.n2{left:40%;top:50%}
.n3{right:0;top:10%}

.connection{
  position:absolute;
  height:1px;
  background:linear-gradient(90deg,#6366f1,transparent);
  transform-origin:left;
}

.c1{width:110px;left:25%;top:35%;transform:rotate(28deg)}
.c2{width:100px;left:61%;top:39%;transform:rotate(-25deg)}

.workflow-demo{
  overflow:hidden;
  border-radius:22px;
}

.workflow-toolbar{
  min-height:65px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 20px;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.02);
  gap:20px;
}

.workflow-title{
  display:flex;
  align-items:center;
  gap:15px;
  font-size:12px;
}

.workflow-status{
  color:#86efac;
  font-size:9px;
  border:1px solid rgba(52,211,153,.15);
  background:rgba(52,211,153,.05);
  border-radius:100px;
  padding:5px 8px;
}

.workflow-status span{
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#34d399;
  margin-right:4px;
}

.workflow-actions{
  display:flex;
  align-items:center;
  gap:7px;
}

.workflow-actions>span{
  font-size:9px;
  color:#475569;
  margin-right:5px;
}

.icon-button{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.025);
  border:1px solid var(--border);
  border-radius:8px;
  color:#64748b;
}

.workflow-canvas{
  height:440px;
  position:relative;
  overflow:hidden;
  background:#060a12;
}

.canvas-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:30px 30px;
}

.workflow-node{
  position:absolute;
  width:220px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:13px;
  background:rgba(10,15,26,.95);
  border:1px solid var(--border-light);
  box-shadow:0 15px 35px rgba(0,0,0,.4);
  z-index:3;
  transition:.3s;
}

.workflow-node.active{
  border-color:#8b5cf6;
  box-shadow:0 0 35px rgba(139,92,246,.2);
}

.workflow-node small,
.workflow-node strong,
.workflow-node span{
  display:block;
}

.workflow-node small{
  color:#64748b;
  font-size:7px;
  letter-spacing:.1em;
}

.workflow-node strong{
  font-size:11px;
}

.workflow-node span{
  color:#64748b;
  font-size:8px;
}

.node-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:10px;
  flex:none;
}

.node-trigger .node-icon{background:rgba(56,189,248,.1);color:#38bdf8}
.node-agent .node-icon{background:rgba(168,85,247,.1);color:#c084fc}
.node-action .node-icon{background:rgba(52,211,153,.1);color:#34d399}
.node-output .node-icon{background:rgba(251,146,60,.1);color:#fb923c}

.node-check{
  position:absolute;
  top:8px;
  right:9px;
  color:#34d399;
  font-size:8px;
}

.node-trigger{left:5%;top:170px}
.node-agent{left:30%;top:90px}
.node-action{left:56%;top:170px}
.node-output{right:5%;top:90px}

.workflow-edge{
  position:absolute;
  height:2px;
  background:#334155;
  z-index:2;
}

.workflow-edge::after{
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  right:0;
  top:-3px;
  border-right:2px solid #a78bfa;
  border-top:2px solid #a78bfa;
  transform:rotate(45deg);
}

.edge-one{left:22%;top:220px;width:9%}
.edge-one{transform:rotate(-17deg)}

.edge-two{left:49%;top:180px;width:8%}
.edge-two{transform:rotate(17deg)}

.edge-three{left:75%;top:180px;width:10%}
.edge-three{transform:rotate(-17deg)}

.canvas-console{
  position:absolute;
  left:20px;
  bottom:20px;
  padding:12px 15px;
  border:1px solid var(--border);
  background:rgba(4,7,14,.9);
  border-radius:10px;
  min-width:240px;
  z-index:5;
}

.canvas-console div{
  color:#64748b;
  font-size:8px;
}

.console-dot{
  width:5px;
  height:5px;
  background:#34d399;
  display:inline-block;
  border-radius:50%;
  margin-right:4px;
}

.canvas-console strong{
  display:block;
  font-size:9px;
  margin:4px 0;
}

.canvas-console small{
  color:#475569;
  font-size:8px;
}

.security-layout{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:90px;
  align-items:center;
}

.security-copy h2{
  font-size:clamp(35px,4vw,52px);
  line-height:1.08;
  letter-spacing:-.05em;
  margin:14px 0 20px;
}

.security-copy p{
  color:#7e8ca0;
  max-width:550px;
  font-size:14px;
  margin-bottom:28px;
}

.compliance-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px;
}

.compliance-card{
  padding:25px;
  border-radius:17px;
  transition:.3s;
}

.compliance-card:hover{
  transform:translateY(-4px);
  border-color:rgba(99,102,241,.3);
}

.compliance-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:#a78bfa;
  background:rgba(99,102,241,.08);
  margin-bottom:18px;
}

.compliance-card strong{
  display:block;
  font-size:16px;
}

.compliance-card span{
  color:#cbd5e1;
  font-size:11px;
  display:block;
}

.compliance-card small{
  color:#64748b;
  font-size:9px;
}

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.pricing-card{
  padding:32px;
  border-radius:22px;
  position:relative;
  overflow:hidden;
}

.pricing-card h3{
  font-size:22px;
  margin:9px 0 7px;
}

.pricing-card>p{
  color:#718096;
  font-size:12px;
  min-height:58px;
}

.pricing-tier{
  font-size:9px;
  color:#8b7cf6;
  letter-spacing:.15em;
  font-weight:800;
}

.price{
  display:flex;
  align-items:baseline;
  margin:22px 0;
}

.price sup{
  font-size:16px;
  color:#cbd5e1;
}

.price strong{
  font-size:49px;
  letter-spacing:-.06em;
  line-height:1;
}

.price span{
  color:#64748b;
  font-size:10px;
  margin-left:5px;
}

.custom-price{
  height:49px;
}

.custom-price strong{
  font-size:35px;
}

.featured-pricing{
  border-color:rgba(139,92,246,.45);
  box-shadow:0 30px 90px rgba(99,102,241,.12),inset 0 0 50px rgba(99,102,241,.04);
}

.popular-badge{
  position:absolute;
  top:0;
  right:22px;
  padding:7px 10px;
  background:linear-gradient(135deg,#6366f1,#a855f7);
  border-radius:0 0 8px 8px;
  font-size:8px;
  font-weight:800;
}

.check-list{
  list-style:none;
  display:grid;
  gap:12px;
  margin-top:23px;
}

.check-list li{
  color:#94a3b8;
  font-size:11px;
}

.check-list i{
  color:#8b5cf6;
  margin-right:8px;
}

.center-link{
  text-align:center;
  margin-top:28px;
}

.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
}

.testimonial{
  padding:32px;
  border-radius:20px;
}

.quote-mark{
  color:#8b5cf6;
  font-size:50px;
  line-height:.7;
  font-family:Georgia,serif;
}

.testimonial p{
  color:#c2cbd8;
  font-size:13px;
  line-height:1.9;
  margin:18px 0 28px;
}

.person{
  display:flex;
  align-items:center;
  gap:10px;
}

.person img{
  width:38px;
  height:38px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--border-light);
}

.person strong,.person span{
  display:block;
}

.person strong{
  font-size:10px;
}

.person span{
  color:#64748b;
  font-size:8px;
}

.faq-layout{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:100px;
}

.faq-intro h2{
  font-size:39px;
  line-height:1.1;
  letter-spacing:-.05em;
  margin:13px 0;
}

.faq-intro p{
  color:#718096;
  font-size:13px;
}

.faq-item{
  border-bottom:1px solid var(--border);
}

.faq-question{
  width:100%;
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:none;
  color:#e2e8f0;
  border:0;
  text-align:left;
  font-size:14px;
  font-weight:700;
}

.faq-question span{
  width:28px;
  height:28px;
  border:1px solid var(--border);
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#64748b;
  transition:.3s;
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}

.faq-answer p{
  color:#718096;
  font-size:12px;
  line-height:1.8;
  padding:0 40px 23px 0;
}

.faq-item.open .faq-question span{
  transform:rotate(45deg);
  color:#a78bfa;
  border-color:rgba(139,92,246,.35);
}

.cta-section{
  padding:30px 0 120px;
}

.mega-cta{
  position:relative;
  overflow:hidden;
  text-align:center;
  padding:90px 30px;
  border-radius:28px;
}

.mega-cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 40%,rgba(99,102,241,.16),transparent 45%);
  pointer-events:none;
}

.cta-orb{
  position:absolute;
  width:250px;
  height:250px;
  background:#a855f7;
  filter:blur(120px);
  opacity:.13;
  left:40%;
  top:-100px;
}

.mega-cta h2{
  font-size:clamp(38px,5vw,64px);
  line-height:1.05;
  letter-spacing:-.06em;
  margin:14px 0;
  position:relative;
}

.mega-cta p{
  color:#718096;
  font-size:13px;
  position:relative;
}

.mega-footer{
  border-top:1px solid var(--border);
  background:#02050c;
  padding:75px 0 28px;
}

.footer-main{
  display:grid;
  grid-template-columns:1.7fr repeat(4,1fr);
  gap:50px;
}

.footer-brand p{
  color:#64748b;
  font-size:11px;
  line-height:1.8;
  max-width:320px;
  margin:20px 0;
}

.footer-contact{
  display:grid;
  gap:8px;
  color:#64748b;
  font-size:9px;
}

.footer-contact a:hover{
  color:#a78bfa;
}

.footer-contact i{
  width:15px;
}

.footer-column{
  display:flex;
  flex-direction:column;
  gap:11px;
}

.footer-column h4{
  font-size:10px;
  letter-spacing:.1em;
  color:#e2e8f0;
  text-transform:uppercase;
  margin-bottom:6px;
}

.footer-column a{
  color:#64748b;
  font-size:10px;
  transition:.2s;
}

.footer-column a:hover{
  color:#c4b5fd;
  transform:translateX(2px);
}

.footer-bottom{
  border-top:1px solid var(--border);
  margin-top:55px;
  padding-top:23px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#475569;
  font-size:9px;
}

.social-links{
  display:flex;
  gap:7px;
}

.social-links a{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  border-radius:8px;
  transition:.2s;
}

.social-links a:hover{
  color:#a78bfa;
  border-color:rgba(139,92,246,.4);
  transform:translateY(-2px);
}

/* Generic inner pages */

.page-hero{
  padding-top:115px;
  padding-bottom:70px;
}

.compact-hero{
  padding-bottom:45px;
}

.narrow-center{
  max-width:850px;
  text-align:center;
}

.narrow-center h1{
  font-size:clamp(43px,5.5vw,70px);
  line-height:1.03;
  letter-spacing:-.06em;
  margin:23px 0;
}

.narrow-center p{
  color:#7e8ca0;
  font-size:15px;
  max-width:680px;
  margin:auto;
}

.feature-tabs{
  border-radius:25px;
  overflow:hidden;
}

.feature-tab-buttons{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--border);
}

.feature-tab{
  background:transparent;
  color:#64748b;
  border:0;
  padding:22px;
  display:flex;
  align-items:center;
  gap:13px;
  text-align:left;
  border-right:1px solid var(--border);
  transition:.25s;
}

.feature-tab:last-child{
  border-right:0;
}

.feature-tab i{
  font-size:16px;
}

.feature-tab span b,
.feature-tab span small{
  display:block;
}

.feature-tab span b{
  color:#cbd5e1;
  font-size:12px;
}

.feature-tab span small{
  font-size:9px;
  margin-top:3px;
}

.feature-tab.active{
  background:rgba(99,102,241,.07);
  color:#a78bfa;
  box-shadow:inset 0 -2px #8b5cf6;
}

.feature-tab-content{
  padding:50px;
}

.tab-panel{
  display:none;
  grid-template-columns:1fr 1fr;
  gap:65px;
  align-items:center;
}

.tab-panel.active{
  display:grid;
}

.tab-copy h2{
  font-size:40px;
  line-height:1.1;
  letter-spacing:-.05em;
  margin:13px 0;
}

.tab-copy>p{
  color:#7e8ca0;
  font-size:13px;
  line-height:1.9;
}

.feature-points{
  display:grid;
  gap:13px;
  margin-top:25px;
}

.feature-points>div{
  display:flex;
  gap:10px;
  color:#7e8ca0;
  font-size:11px;
}

.feature-points i{
  color:#34d399;
  margin-top:4px;
}

.feature-points b{
  color:#dbe4ef;
}

.code-terminal,
.code-block{
  background:#050811;
  border:1px solid var(--border);
  border-radius:15px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.3);
}

.code-terminal pre,
.code-block pre{
  overflow:auto;
  padding:20px;
  color:#a5b4fc;
  font:11px/1.8 "SFMono-Regular",Consolas,monospace;
}

.copy-button{
  margin-left:auto;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:#94a3b8;
  border-radius:6px;
  padding:4px 8px;
  font-size:8px;
}

.architecture-visual{
  min-height:300px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  flex-wrap:wrap;
  position:relative;
}

.architecture-node{
  width:120px;
  height:110px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:10px;
  background:#080d17;
  border:1px solid var(--border-light);
  border-radius:15px;
  box-shadow:0 20px 40px rgba(0,0,0,.3);
  font-size:10px;
}

.architecture-node i{
  color:#64748b;
  font-size:19px;
}

.architecture-node.highlight{
  border-color:rgba(139,92,246,.5);
  box-shadow:0 0 40px rgba(139,92,246,.15);
}

.architecture-node.highlight i{
  color:#a78bfa;
}

.arch-line{
  width:55px;
  height:1px;
  background:linear-gradient(90deg,#6366f1,#a855f7);
}

.architecture-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
}

.architecture-card{
  padding:30px;
  border-radius:19px;
}

.architecture-number{
  color:#334155;
  font-size:10px;
  margin-bottom:30px;
}

.architecture-card>i{
  color:#a78bfa;
  font-size:22px;
}

.architecture-card h3{
  margin:17px 0 7px;
  font-size:17px;
}

.architecture-card p{
  color:#64748b;
  font-size:11px;
  line-height:1.8;
}

.enterprise-banner{
  padding:55px;
  border-radius:25px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  background:radial-gradient(circle at 80% 50%,rgba(99,102,241,.13),transparent 35%),rgba(255,255,255,.025);
}

.enterprise-banner h2{
  font-size:40px;
  line-height:1.1;
  letter-spacing:-.05em;
  margin:12px 0;
}

.enterprise-banner p{
  color:#718096;
  font-size:12px;
}

/* Pricing */

.billing-toggle{
  display:inline-flex;
  margin-top:30px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.025);
  border-radius:11px;
  padding:4px;
}

.billing-option{
  border:0;
  background:transparent;
  color:#64748b;
  padding:9px 13px;
  border-radius:7px;
  font-size:10px;
  font-weight:700;
}

.billing-option.active{
  background:#151a29;
  color:#fff;
  box-shadow:0 5px 20px rgba(0,0,0,.3);
}

.billing-option span{
  color:#34d399;
  margin-left:5px;
}

.annual-note{
  display:block;
  color:#34d399;
  font-size:8px;
  margin-top:-18px;
  margin-bottom:15px;
  opacity:0;
}

body.annual-mode .annual-note{
  opacity:1;
}

.pricing-divider{
  height:1px;
  background:var(--border);
  margin:25px 0;
}

.includes{
  color:#cbd5e1;
  font-size:10px;
}

.comparison-wrapper{
  overflow:auto;
  border-radius:20px;
}

.comparison-table{
  border-collapse:collapse;
  width:100%;
  min-width:750px;
}

.comparison-table th,
.comparison-table td{
  padding:17px 20px;
  text-align:left;
  border-bottom:1px solid var(--border);
  font-size:11px;
}

.comparison-table th{
  color:#64748b;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.1em;
}

.comparison-table td:first-child{
  color:#cbd5e1;
  font-weight:600;
}

.comparison-table td{
  color:#64748b;
}

.comparison-table td i{
  color:#34d399;
}

.highlight-column{
  background:rgba(99,102,241,.035);
}

.calculator-card{
  padding:45px;
  border-radius:23px;
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:45px;
  align-items:center;
}

.calculator-card h2{
  font-size:37px;
  line-height:1.1;
  letter-spacing:-.05em;
  margin:12px 0;
}

.calculator-card p{
  color:#64748b;
  font-size:12px;
}

.calculator-controls{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.calculator-controls label{
  display:grid;
  gap:7px;
  color:#94a3b8;
  font-size:9px;
}

.calculator-controls select{
  background:#080d17;
  color:#dbe4ef;
  border:1px solid var(--border);
  border-radius:8px;
  padding:11px;
  outline:0;
}

.estimate-result{
  grid-column:span 2;
  padding:17px;
  border:1px solid rgba(139,92,246,.2);
  background:rgba(99,102,241,.05);
  border-radius:10px;
}

.estimate-result small,
.estimate-result strong,
.estimate-result span{
  display:block;
}

.estimate-result small{
  color:#64748b;
  font-size:8px;
}

.estimate-result strong{
  color:#c4b5fd;
  font-size:24px;
  margin:3px 0;
}

.estimate-result span{
  color:#64748b;
  font-size:8px;
}

/* Modal */

.modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  place-items:center;
  padding:20px;
}

.modal.open{
  display:grid;
}

.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(10px);
}

.modal-dialog{
  position:relative;
  width:min(100%,520px);
  max-height:90vh;
  overflow:auto;
  border-radius:23px;
  padding:30px;
  background:
    radial-gradient(circle at 80% 0,rgba(99,102,241,.12),transparent 35%),
    #080d17;
  border:1px solid var(--border-light);
  box-shadow:0 40px 120px rgba(0,0,0,.65);
  z-index:2;
}

.modal-close{
  position:absolute;
  right:17px;
  top:17px;
  width:34px;
  height:34px;
  border:1px solid var(--border);
  border-radius:8px;
  background:rgba(255,255,255,.03);
  color:#64748b;
}

.modal-heading{
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:25px;
}

.modal-heading h2{
  font-size:22px;
  letter-spacing:-.04em;
}

.modal-icon{
  width:43px;
  height:43px;
  border-radius:11px;
  display:grid;
  place-items:center;
  background:rgba(99,102,241,.1);
  color:#a78bfa;
}

.checkout-plan{
  display:flex;
  justify-content:space-between;
  padding:16px;
  border-radius:11px;
  margin-bottom:20px;
}

.checkout-plan small,
.checkout-plan strong{
  display:block;
}

.checkout-plan small{
  color:#64748b;
  font-size:7px;
}

.checkout-plan strong{
  font-size:13px;
  margin-top:3px;
}

.checkout-content label,
.contact-form-card label{
  display:grid;
  gap:7px;
  color:#94a3b8;
  font-size:9px;
  margin-bottom:13px;
}

.checkout-content input,
.contact-form-card input,
.contact-form-card textarea,
.contact-form-card select,
.settings-row input,
.settings-row select{
  width:100%;
  border:1px solid var(--border);
  outline:0;
  color:#e2e8f0;
  background:#050912;
  border-radius:9px;
  padding:12px;
  font-size:11px;
  transition:.2s;
}

.checkout-content input:focus,
.contact-form-card input:focus,
.contact-form-card textarea:focus,
.contact-form-card select:focus{
  border-color:rgba(139,92,246,.55);
  box-shadow:0 0 0 3px rgba(99,102,241,.08);
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.secure-note{
  display:block;
  color:#475569;
  font-size:8px;
  text-align:center;
  margin-top:13px;
}

.secure-note i{
  color:#34d399;
  margin-right:4px;
}

.checkout-success{
  display:none;
  text-align:center;
  padding:35px 15px 15px;
}

.checkout-success.show{
  display:block;
}

.checkout-content.hidden{
  display:none;
}

.success-icon{
  width:65px;
  height:65px;
  margin:0 auto 20px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#34d399;
  background:rgba(52,211,153,.08);
  border:1px solid rgba(52,211,153,.25);
  box-shadow:0 0 50px rgba(52,211,153,.1);
}

.checkout-success h2{
  font-size:27px;
  margin:8px 0;
}

.checkout-success p{
  color:#64748b;
  font-size:11px;
  margin-bottom:23px;
}

/* Docs */

.docs-hero{
  padding-bottom:50px;
}

.docs-hero h1{
  font-size:60px;
  letter-spacing:-.06em;
  margin:17px 0;
}

.docs-hero p{
  color:#718096;
  max-width:650px;
  font-size:14px;
}

.docs-layout{
  display:grid;
  grid-template-columns:245px 1fr;
  gap:60px;
  align-items:start;
}

.docs-sidebar{
  position:sticky;
  top:105px;
  padding:18px;
  border-radius:15px;
}

.docs-search{
  display:flex;
  gap:8px;
  border:1px solid var(--border);
  background:#050912;
  border-radius:8px;
  padding:9px;
  margin-bottom:20px;
}

.docs-search i{
  color:#475569;
  font-size:10px;
}

.docs-search input{
  background:none;
  border:0;
  outline:0;
  color:#fff;
  width:100%;
  font-size:9px;
}

.docs-group-title{
  display:block;
  color:#475569;
  font-size:8px;
  font-weight:800;
  letter-spacing:.13em;
  margin:19px 8px 7px;
}

.docs-link{
  display:block;
  padding:8px 9px;
  color:#64748b;
  font-size:10px;
  border-radius:7px;
}

.docs-link:hover,
.docs-link.active{
  background:rgba(99,102,241,.08);
  color:#c4b5fd;
}

.docs-section{
  padding-bottom:80px;
  scroll-margin-top:110px;
}

.docs-section h2{
  font-size:34px;
  letter-spacing:-.05em;
  margin:12px 0;
}

.docs-section h3{
  font-size:14px;
  margin:30px 0 10px;
}

.docs-section>p{
  color:#718096;
  font-size:12px;
  max-width:750px;
}

.code-block{
  margin-top:22px;
}

.code-top{
  display:flex;
  align-items:center;
  padding:9px 14px;
  border-bottom:1px solid var(--border);
  color:#64748b;
  font-size:8px;
}

.callout,
.security-note{
  margin-top:20px;
  padding:15px;
  display:flex;
  gap:11px;
  border:1px solid rgba(99,102,241,.15);
  background:rgba(99,102,241,.05);
  border-radius:10px;
  color:#94a3b8;
  font-size:10px;
}

.callout i,
.security-note>i{
  color:#a78bfa;
}

.security-note strong{
  color:#dbe4ef;
}

.security-note p{
  margin-top:3px;
  color:#64748b;
}

.endpoint{
  margin-top:25px;
  padding:15px;
  border:1px solid var(--border);
  background:#070c15;
  border-radius:10px;
  display:flex;
  align-items:center;
  gap:12px;
}

.method{
  padding:5px 7px;
  border-radius:5px;
  font-size:8px;
  font-weight:800;
}

.method.post{
  color:#34d399;
  background:rgba(52,211,153,.08);
}

.endpoint code{
  font-size:10px;
  color:#c4b5fd;
}

.endpoint-desc{
  color:#64748b;
  font-size:9px;
  margin-left:auto;
}

.webhook-event{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:17px;
  border:1px solid var(--border);
  background:#070c15;
  border-radius:10px;
  margin-top:10px;
}

.event-badge{
  display:inline-block;
  color:#34d399;
  background:rgba(52,211,153,.07);
  border:1px solid rgba(52,211,153,.12);
  padding:6px 8px;
  border-radius:6px;
  font:9px monospace;
}

.event-badge.danger{
  color:#fb7185;
  background:rgba(251,113,133,.07);
}

.webhook-event small{
  display:block;
  color:#64748b;
  font-size:8px;
  margin-top:5px;
}

.webhook-event>i{
  color:#475569;
}

.error-table{
  margin-top:22px;
  border:1px solid var(--border);
  border-radius:11px;
  overflow:hidden;
}

.error-table div{
  display:grid;
  grid-template-columns:100px 1fr;
  padding:13px 15px;
  border-bottom:1px solid var(--border);
  font-size:10px;
  color:#64748b;
}

.error-table div:last-child{
  border:0;
}

.error-table code{
  color:#fca5a5;
}

.sdk-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:25px;
}

.sdk-card{
  padding:22px;
  border:1px solid var(--border);
  border-radius:11px;
  background:#070c15;
}

.sdk-card i{
  color:#a78bfa;
  font-size:21px;
}

.sdk-card strong,
.sdk-card small{
  display:block;
}

.sdk-card strong{
  font-size:11px;
  margin-top:12px;
}

.sdk-card small{
  color:#64748b;
  font-size:8px;
}

/* Blog */

.featured-article{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  border-radius:22px;
  overflow:hidden;
  margin-bottom:45px;
}

.featured-image{
  min-height:420px;
  position:relative;
}

.featured-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.8);
}

.featured-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(3,7,18,.65));
}

.article-tag{
  position:absolute;
  left:20px;
  top:20px;
  z-index:2;
  background:rgba(99,102,241,.85);
  padding:6px 8px;
  border-radius:5px;
  font-size:7px;
  font-weight:800;
}

.featured-copy{
  padding:50px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.featured-copy h2{
  font-size:36px;
  line-height:1.12;
  letter-spacing:-.05em;
  margin:12px 0;
}

.featured-copy>p{
  color:#718096;
  font-size:12px;
}

.article-meta{
  display:flex;
  align-items:center;
  gap:9px;
  color:#64748b;
  font-size:9px;
  margin-top:25px;
}

.article-meta img{
  width:28px;
  height:28px;
  object-fit:cover;
  border-radius:50%;
}

.blog-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}

.filter-buttons{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.blog-filter{
  background:rgba(255,255,255,.025);
  border:1px solid var(--border);
  color:#64748b;
  border-radius:7px;
  padding:8px 11px;
  font-size:9px;
}

.blog-filter.active{
  background:rgba(99,102,241,.1);
  color:#c4b5fd;
  border-color:rgba(99,102,241,.3);
}

.blog-count{
  color:#475569;
  font-size:9px;
}

.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
}

.blog-card{
  border-radius:17px;
  overflow:hidden;
}

.blog-card.hidden{
  display:none;
}

.blog-image{
  height:190px;
  position:relative;
  overflow:hidden;
}

.blog-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.5s;
  filter:saturate(.7);
}

.blog-card:hover .blog-image img{
  transform:scale(1.05);
}

.blog-image span{
  position:absolute;
  left:13px;
  top:13px;
  padding:5px 7px;
  border-radius:5px;
  background:rgba(3,7,18,.75);
  border:1px solid var(--border);
  font-size:6px;
  font-weight:800;
  color:#c4b5fd;
}

.blog-copy{
  padding:21px;
}

.blog-copy>small{
  color:#475569;
  font-size:7px;
  letter-spacing:.08em;
}

.blog-copy h3{
  font-size:16px;
  line-height:1.35;
  letter-spacing:-.025em;
  margin:9px 0;
}

.blog-copy>p{
  color:#64748b;
  font-size:10px;
  line-height:1.7;
}

.author-mini{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:18px;
  color:#94a3b8;
  font-size:8px;
}

.author-mini img{
  width:23px;
  height:23px;
  object-fit:cover;
  border-radius:50%;
}

/* Contact */

.contact-grid{
  display:grid;
  grid-template-columns:1fr .85fr;
  gap:18px;
  align-items:start;
}

.contact-form-card,
.booking-card,
.location-card{
  border-radius:21px;
  padding:30px;
}

.form-heading h2{
  font-size:32px;
  letter-spacing:-.05em;
  margin:9px 0;
}

.form-heading p{
  color:#64748b;
  font-size:11px;
  margin-bottom:27px;
}

.contact-form-card textarea{
  resize:vertical;
  min-height:125px;
}

.contact-form-card select{
  appearance:none;
}

.form-success{
  display:none;
  margin-top:15px;
  padding:15px;
  border-radius:10px;
  background:rgba(52,211,153,.06);
  border:1px solid rgba(52,211,153,.15);
  color:#86efac;
}

.form-success.show{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.form-success span{
  color:#64748b;
  width:100%;
  margin-left:22px;
  font-size:9px;
}

.contact-side{
  display:grid;
  gap:18px;
}

.booking-card h2{
  font-size:27px;
  line-height:1.15;
  margin:9px 0;
}

.booking-card>p{
  color:#64748b;
  font-size:10px;
  margin-bottom:22px;
}

.calendar-widget{
  border:1px solid var(--border);
  border-radius:12px;
  padding:15px;
  background:#050912;
}

.calendar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:10px;
  margin-bottom:18px;
}

.calendar-head button{
  width:25px;
  height:25px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.025);
  color:#64748b;
  border-radius:6px;
  font-size:8px;
}

.calendar-days,
.calendar-dates{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:5px;
  text-align:center;
}

.calendar-days span{
  color:#475569;
  font-size:7px;
  padding-bottom:6px;
}

.calendar-dates button{
  border:0;
  background:rgba(255,255,255,.02);
  color:#94a3b8;
  padding:8px 3px;
  border-radius:6px;
  font-size:9px;
}

.calendar-dates button:hover:not(:disabled),
.calendar-dates button.active{
  background:rgba(99,102,241,.18);
  color:#c4b5fd;
}

.calendar-dates button:disabled{
  color:#273244;
}

.time-slots{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin:16px 0;
}

.time-slots button{
  border:1px solid var(--border);
  background:rgba(255,255,255,.025);
  color:#64748b;
  padding:8px 4px;
  border-radius:6px;
  font-size:8px;
}

.time-slots button.selected,
.time-slots button:hover{
  color:#c4b5fd;
  border-color:rgba(99,102,241,.35);
  background:rgba(99,102,241,.08);
}

.location-card{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:15px;
}

.location-info h3{
  font-size:20px;
  margin:8px 0;
}

.location-info p{
  color:#64748b;
  font-size:10px;
}

.location-info .inline-link{
  font-size:9px;
}

.map-frame{
  min-height:190px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:11px;
  background:
    linear-gradient(28deg,transparent 45%,rgba(255,255,255,.035) 46%,transparent 47%),
    linear-gradient(155deg,transparent 42%,rgba(255,255,255,.03) 43%,transparent 44%),
    #070c15;
}

.map-lines{
  position:absolute;
  inset:0;
  opacity:.6;
  background:
    repeating-linear-gradient(20deg,transparent 0 30px,rgba(255,255,255,.025) 31px 32px),
    repeating-linear-gradient(110deg,transparent 0 50px,rgba(255,255,255,.02) 51px 52px);
}

.map-pin{
  position:absolute;
  left:52%;
  top:47%;
  width:35px;
  height:35px;
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  background:linear-gradient(135deg,#6366f1,#a855f7);
  display:grid;
  place-items:center;
  box-shadow:0 0 30px rgba(99,102,241,.5);
}

.map-pin i{
  transform:rotate(45deg);
  font-size:11px;
}

.map-label{
  position:absolute;
  bottom:12px;
  left:12px;
  color:#64748b;
  font-size:6px;
  letter-spacing:.12em;
}

/* Dashboard */

.dashboard-body{
  min-height:100vh;
  background:#04070e;
}

.app-shell{
  min-height:100vh;
  display:flex;
}

.app-sidebar{
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  width:255px;
  border-right:1px solid var(--border);
  background:#060a12;
  padding:22px 14px;
  display:flex;
  flex-direction:column;
  z-index:60;
}

.app-brand{
  padding:5px 9px 25px;
}

.workspace-switcher{
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--border);
  border-radius:10px;
  margin-bottom:22px;
}

.workspace-avatar{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:linear-gradient(135deg,#6366f1,#a855f7);
  font-size:10px;
  font-weight:800;
}

.workspace-switcher strong,
.workspace-switcher small{
  display:block;
}

.workspace-switcher strong{
  font-size:9px;
}

.workspace-switcher small{
  color:#64748b;
  font-size:7px;
}

.workspace-switcher>i{
  margin-left:auto;
  color:#475569;
  font-size:8px;
}

.app-nav{
  display:grid;
  gap:3px;
}

.app-nav-label{
  color:#334155;
  font-size:7px;
  font-weight:800;
  letter-spacing:.13em;
  margin:11px 9px 6px;
}

.app-tab{
  width:100%;
  height:40px;
  border:0;
  background:transparent;
  color:#64748b;
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:8px;
  padding:0 11px;
  text-align:left;
  font-size:10px;
  font-weight:600;
}

.app-tab i{
  width:15px;
  text-align:center;
}

.app-tab:hover{
  color:#cbd5e1;
  background:rgba(255,255,255,.025);
}

.app-tab.active{
  color:#c4b5fd;
  background:rgba(99,102,241,.09);
  box-shadow:inset 2px 0 #8b5cf6;
}

.nav-count{
  margin-left:auto;
  font-size:7px;
  background:rgba(255,255,255,.05);
  padding:3px 5px;
  border-radius:5px;
}

.sidebar-bottom{
  margin-top:auto;
}

.plan-widget{
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px;
  background:rgba(255,255,255,.02);
}

.plan-widget small{
  color:#475569;
  display:block;
  font-size:7px;
}

.plan-widget strong{
  display:block;
  font-size:14px;
  margin:3px 0 9px;
}

.plan-progress{
  height:4px;
  background:#1e293b;
  border-radius:10px;
  overflow:hidden;
  margin-bottom:6px;
}

.plan-progress span{
  display:block;
  height:100%;
  width:68%;
  background:linear-gradient(90deg,#6366f1,#a855f7);
}

.plan-widget a{
  display:block;
  color:#a78bfa;
  font-size:8px;
  margin-top:9px;
}

.back-site{
  display:block;
  color:#475569;
  font-size:8px;
  padding:17px 8px 0;
}

.app-main{
  margin-left:255px;
  width:calc(100% - 255px);
  min-width:0;
}

.app-topbar{
  height:73px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 30px;
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(4,7,14,.8);
  backdrop-filter:blur(18px);
}

.breadcrumb{
  display:flex;
  gap:9px;
  align-items:center;
  color:#475569;
  font-size:9px;
}

.breadcrumb i{
  font-size:7px;
}

.breadcrumb strong{
  color:#cbd5e1;
}

.app-user-actions{
  display:flex;
  align-items:center;
  gap:20px;
}

.app-top-icon{
  border:0;
  background:none;
  color:#64748b;
  position:relative;
}

.app-top-icon span{
  position:absolute;
  width:5px;
  height:5px;
  background:#f87171;
  border-radius:50%;
  right:-2px;
  top:-2px;
}

.app-user{
  display:flex;
  align-items:center;
  gap:8px;
}

.app-user img{
  width:30px;
  height:30px;
  object-fit:cover;
  border-radius:8px;
}

.app-user strong,
.app-user small{
  display:block;
}

.app-user strong{
  font-size:9px;
}

.app-user small{
  color:#64748b;
  font-size:7px;
}

.app-user>i{
  color:#475569;
  font-size:7px;
  margin-left:5px;
}

.app-mobile-toggle{
  display:none;
  border:0;
  background:none;
  color:#94a3b8;
}

.app-content{
  padding:35px;
  max-width:1550px;
  margin:auto;
}

.dashboard-panel{
  display:none;
}

.dashboard-panel.active{
  display:block;
}

.app-page-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin-bottom:25px;
}

.app-page-heading h1{
  font-size:30px;
  line-height:1.1;
  letter-spacing:-.045em;
  margin:6px 0;
}

.app-page-heading p{
  color:#64748b;
  font-size:10px;
}

.dashboard-stat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.dashboard-stat{
  padding:19px;
  border-radius:14px;
}

.stat-top{
  display:flex;
  justify-content:space-between;
  color:#64748b;
  font-size:9px;
}

.stat-top i{
  color:#8b5cf6;
}

.dashboard-stat>strong{
  display:block;
  font-size:25px;
  letter-spacing:-.05em;
  margin:10px 0 3px;
}

.stat-positive{
  color:#34d399;
  font-size:7px;
}

.dashboard-two-col{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:12px;
  margin-top:12px;
}

.dashboard-chart-card,
.activity-card,
.analytics-large{
  border-radius:15px;
  padding:20px;
}

.dash-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
}

.dash-card-head strong,
.dash-card-head small{
  display:block;
}

.dash-card-head strong{
  font-size:11px;
}

.dash-card-head small{
  color:#475569;
  font-size:7px;
  margin-top:3px;
}

.dash-card-head select{
  background:#080d17;
  color:#64748b;
  border:1px solid var(--border);
  border-radius:6px;
  padding:6px;
  font-size:8px;
}

.big-chart{
  display:flex;
  height:310px;
  padding-top:25px;
}

.big-chart-y{
  width:35px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:#334155;
  font-size:7px;
  padding-bottom:25px;
}

.big-chart-body{
  flex:1;
  position:relative;
}

.chart-lines{
  position:absolute;
  inset:0 0 25px;
  background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:100% 20%;
}

.bar-chart{
  position:absolute;
  inset:0 0 25px;
  display:flex;
  align-items:end;
  justify-content:space-around;
  gap:7px;
  padding:0 5px;
}

.bar-chart i{
  width:100%;
  max-width:24px;
  border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,#8b5cf6,rgba(99,102,241,.12));
  box-shadow:0 0 15px rgba(99,102,241,.12);
  animation:barRise 1s ease both;
}

@keyframes barRise{
  from{height:0!important}
}

.activity-list{
  margin-top:18px;
}

.activity-item{
  display:flex;
  align-items:center;
  gap:9px;
  padding:12px 0;
  border-bottom:1px solid var(--border);
}

.activity-item:last-child{
  border:0;
}

.activity-icon{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:8px;
  font-size:9px;
}

.activity-icon.success{background:rgba(52,211,153,.08);color:#34d399}
.activity-icon.purple{background:rgba(168,85,247,.08);color:#c084fc}
.activity-icon.blue{background:rgba(56,189,248,.08);color:#38bdf8}

.activity-item strong,.activity-item small{
  display:block;
}

.activity-item strong{
  font-size:9px;
}

.activity-item small{
  color:#475569;
  font-size:7px;
}

.activity-item time{
  margin-left:auto;
  color:#475569;
  font-size:7px;
}

.live-pill{
  color:#34d399;
  font-size:7px;
}

.live-pill span{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#34d399;
  display:inline-block;
  margin-right:3px;
}

.workflow-app{
  border-radius:15px;
  overflow:hidden;
}

.workflow-app-toolbar{
  min-height:60px;
  padding:0 17px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.workflow-app-toolbar strong{
  font-size:10px;
}

.workflow-app-toolbar .workflow-status{
  margin-left:8px;
}

.workflow-app-toolbar>div:last-child{
  display:flex;
  gap:5px;
}

.workflow-builder-canvas{
  height:620px;
  position:relative;
  background:#050912;
  overflow:hidden;
}

.builder-node{
  position:absolute;
  width:220px;
  display:flex;
  gap:10px;
  padding:14px;
  border:1px solid var(--border-light);
  background:rgba(9,14,24,.95);
  border-radius:11px;
  box-shadow:0 20px 40px rgba(0,0,0,.45);
  z-index:3;
  cursor:grab;
}

.builder-node:active{
  cursor:grabbing;
}

.builder-node small,.builder-node strong,.builder-node span{
  display:block;
}

.builder-node small{
  font-size:7px;
  color:#64748b;
}

.builder-node strong{
  font-size:10px;
  margin:3px 0;
}

.builder-node span{
  font-size:7px;
  color:#475569;
}

.builder-trigger{left:8%;top:210px}
.builder-agent{left:34%;top:120px;border-color:rgba(168,85,247,.4)}
.builder-action{left:59%;top:210px}
.builder-output{right:7%;top:120px}

.builder-connector{
  position:absolute;
  height:1px;
  background:linear-gradient(90deg,#6366f1,#a855f7);
  transform-origin:left;
  z-index:2;
}

.connector-a{left:24%;top:270px;width:13%;transform:rotate(-18deg)}
.connector-b{left:50%;top:180px;width:12%;transform:rotate(18deg)}
.connector-c{left:75%;top:180px;width:11%;transform:rotate(-18deg)}

.builder-inspector{
  position:absolute;
  right:20px;
  bottom:20px;
  width:230px;
  padding:17px;
  border:1px solid var(--border);
  border-radius:11px;
  background:rgba(5,9,17,.92);
  z-index:4;
}

.builder-inspector>strong,
.builder-inspector>small{
  display:block;
}

.builder-inspector>strong{
  margin-top:8px;
  font-size:11px;
}

.builder-inspector>small{
  color:#475569;
  font-size:7px;
}

.inspector-row{
  border-top:1px solid var(--border);
  padding:9px 0 0;
  margin-top:9px;
  display:flex;
  justify-content:space-between;
  color:#475569;
  font-size:8px;
}

.inspector-row b{
  color:#94a3b8;
}

.inspector-row .green{
  color:#34d399;
}

.agent-dashboard-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.agent-card{
  padding:20px;
  border-radius:15px;
}

.agent-card-top{
  display:flex;
  justify-content:space-between;
  color:#475569;
  font-size:8px;
}

.agent-status{
  color:#34d399;
}

.agent-status span{
  display:inline-block;
  width:5px;
  height:5px;
  background:#34d399;
  border-radius:50%;
  margin-right:4px;
}

.agent-status.paused{
  color:#fbbf24;
}

.agent-status.paused span{
  background:#fbbf24;
}

.agent-avatar{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:12px;
  margin:22px 0 15px;
}

.agent-avatar.purple{color:#c084fc;background:rgba(168,85,247,.1)}
.agent-avatar.blue{color:#38bdf8;background:rgba(56,189,248,.1)}
.agent-avatar.pink{color:#f472b6;background:rgba(236,72,153,.1)}

.agent-card h3{
  font-size:15px;
}

.agent-card>p{
  color:#64748b;
  font-size:9px;
  margin:5px 0 20px;
}

.agent-metrics{
  border-top:1px solid var(--border);
  padding-top:15px;
  display:flex;
  justify-content:space-between;
  color:#475569;
  font-size:7px;
}

.agent-metrics b{
  color:#cbd5e1;
  font-size:9px;
}

.analytics-metrics{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:12px;
}

.analytics-metric{
  padding:20px;
  border-radius:14px;
}

.analytics-metric small,
.analytics-metric strong,
.analytics-metric span{
  display:block;
}

.analytics-metric small{
  color:#64748b;
  font-size:8px;
}

.analytics-metric strong{
  font-size:25px;
  margin:7px 0;
}

.analytics-metric span{
  color:#34d399;
  font-size:7px;
}

.analytics-large{
  min-height:430px;
}

.legend{
  display:flex;
  gap:15px;
  color:#64748b;
  font-size:7px;
}

.legend i{
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:2px;
  background:#8b5cf6;
  margin-right:4px;
}

.analytics-bars{
  height:320px;
  margin-top:40px;
  display:flex;
  align-items:end;
  gap:10px;
  padding:0 15px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:100% 20%;
}

.analytics-bars i{
  flex:1;
  max-width:60px;
  margin:auto;
  border-radius:7px 7px 0 0;
  background:linear-gradient(180deg,#a855f7,rgba(99,102,241,.08));
  animation:barRise 1s ease both;
}

.api-warning{
  padding:14px;
  display:flex;
  gap:10px;
  border-radius:11px;
  margin-bottom:13px;
}

.api-warning>i{
  color:#fbbf24;
}

.api-warning strong{
  display:block;
  font-size:9px;
}

.api-warning p{
  color:#64748b;
  font-size:8px;
}

.keys-table{
  overflow:auto;
  border-radius:14px;
}

.key-row{
  display:grid;
  grid-template-columns:1.2fr 1.5fr 1fr 1fr .6fr 40px;
  gap:15px;
  align-items:center;
  padding:16px 18px;
  border-bottom:1px solid var(--border);
  min-width:850px;
}

.key-row:last-child{
  border-bottom:0;
}

.key-head{
  color:#475569;
  font-size:7px;
  text-transform:uppercase;
  letter-spacing:.1em;
}

.key-row strong,
.key-row small{
  display:block;
}

.key-row strong{
  font-size:9px;
}

.key-row small{
  color:#475569;
  font-size:7px;
}

.key-row code{
  color:#a78bfa;
  font-size:8px;
}

.key-row>span{
  color:#64748b;
  font-size:8px;
}

.key-active{
  color:#34d399!important;
}

.copy-key{
  border:0;
  background:none;
  color:#64748b;
}

.generated-key{
  margin-top:13px;
  border:1px solid rgba(52,211,153,.2);
  background:rgba(52,211,153,.04);
  border-radius:11px;
  padding:16px;
}

.generated-key small{
  display:block;
  color:#64748b;
  font-size:7px;
}

.generated-key code{
  display:block;
  color:#86efac;
  margin:7px 0;
  font-size:9px;
}

.settings-card{
  border-radius:14px;
  overflow:hidden;
}

.settings-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:20px;
  border-bottom:1px solid var(--border);
}

.settings-row:last-child{
  border:0;
}

.settings-row strong,
.settings-row small{
  display:block;
}

.settings-row strong{
  font-size:10px;
}

.settings-row small{
  color:#475569;
  font-size:8px;
  margin-top:4px;
}

.settings-row input,
.settings-row select{
  width:230px;
}

.switch{
  position:relative;
  width:38px;
  height:21px;
  flex:none;
}

.switch input{
  opacity:0;
  width:0;
  height:0;
}

.switch span{
  position:absolute;
  inset:0;
  background:#1e293b;
  border-radius:30px;
  transition:.2s;
}

.switch span::after{
  content:"";
  position:absolute;
  width:15px;
  height:15px;
  top:3px;
  left:3px;
  background:#94a3b8;
  border-radius:50%;
  transition:.2s;
}

.switch input:checked+span{
  background:#6366f1;
}

.switch input:checked+span::after{
  left:20px;
  background:#fff;
}

.toast-container{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:200;
  display:grid;
  gap:8px;
}

.toast{
  padding:12px 15px;
  border:1px solid var(--border-light);
  border-radius:9px;
  background:#0b101b;
  box-shadow:0 20px 50px rgba(0,0,0,.4);
  color:#cbd5e1;
  font-size:9px;
  animation:toastIn .3s ease;
}

@keyframes toastIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* animations */

.reveal{
  opacity:0;
  transform:translateY(20px);
  animation:reveal .7s ease forwards;
}

.delay-1{animation-delay:.12s}
.delay-2{animation-delay:.22s}

@keyframes reveal{
  to{opacity:1;transform:none}
}

/* Responsive */

@media(max-width:1100px){
  .desktop-nav{gap:17px}
  .hero-grid{gap:35px}
  .footer-main{grid-template-columns:1.5fr repeat(2,1fr)}
  .footer-column:nth-last-child(-n+2){margin-top:20px}
  .security-layout{gap:40px}
  .workflow-node{width:185px}
  .node-trigger{left:2%}
  .node-agent{left:28%}
  .node-action{left:54%}
  .node-output{right:2%}
  .dashboard-stat-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:850px){
  .container{width:min(calc(100% - 32px),var(--container))}
  .desktop-nav,.nav-actions{display:none}
  .mobile-toggle{display:block}
  .mobile-drawer{
    display:block;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    max-height:0;
    overflow:hidden;
    background:rgba(4,7,14,.96);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
    transition:max-height .35s ease;
  }
  .site-header.menu-open .mobile-drawer{max-height:500px}
  .mobile-drawer-inner{
    display:grid;
    padding:16px;
    gap:4px;
  }
  .mobile-drawer a{
    padding:13px;
    border-radius:8px;
    color:#94a3b8;
    font-size:12px;
    display:flex;
    justify-content:space-between;
  }
  .mobile-drawer a:hover{
    background:rgba(255,255,255,.03);
    color:#fff;
  }
  .hero{
    padding-top:75px;
  }
  .hero-grid,
  .security-layout,
  .faq-layout,
  .contact-grid,
  .calculator-card{
    grid-template-columns:1fr;
  }
  .hero-copy h1{
    font-size:clamp(45px,9vw,65px);
  }
  .hero-visual{
    margin-top:20px;
  }
  .section{
    padding:85px 0;
  }
  .bento-grid{
    grid-template-columns:1fr 1fr;
  }
  .bento-large{
    grid-column:span 2;
    grid-row:auto;
    min-height:550px;
  }
  .bento-wide{
    grid-column:span 2;
  }
  .pricing-grid,
  .testimonial-grid,
  .architecture-grid,
  .blog-grid{
    grid-template-columns:1fr 1fr;
  }
  .featured-article{
    grid-template-columns:1fr;
  }
  .featured-image{min-height:300px}
  .docs-layout{
    grid-template-columns:1fr;
  }
  .docs-sidebar{
    position:relative;
    top:auto;
  }
  .docs-sidebar{
    display:none;
  }
  .tab-panel{
    grid-template-columns:1fr;
  }
  .feature-tab-content{
    padding:30px;
  }
  .app-sidebar{
    transform:translateX(-100%);
    transition:.3s;
  }
  .app-sidebar.open{
    transform:none;
  }
  .app-main{
    margin-left:0;
    width:100%;
  }
  .app-mobile-toggle{
    display:block;
  }
  .dashboard-two-col{
    grid-template-columns:1fr;
  }
}

@media(max-width:600px){
  .announcement{
    font-size:9px;
  }
  .announcement a,
  .announcement-divider,
  .announcement-inner>span:nth-of-type(3){
    display:none;
  }
  .hero{
    min-height:auto;
  }
  .hero-copy h1{
    font-size:43px;
  }
  .hero-description{
    font-size:14px;
  }
  .hero-meta{
    display:grid;
    gap:8px;
  }
  .preview-body{
    min-height:350px;
  }
  .preview-sidebar{
    width:38px;
  }
  .preview-content{
    padding:15px;
  }
  .mini-stats{
    grid-template-columns:1fr 1fr;
  }
  .mini-stats>div:last-child{
    display:none;
  }
  .mini-workflow{
    display:none;
  }
  .logo-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    font-size:12px;
  }
  .section-heading{
    display:block;
    margin-bottom:35px;
  }
  .section-heading>p{
    margin-top:20px;
  }
  .bento-grid,
  .pricing-grid,
  .testimonial-grid,
  .architecture-grid,
  .blog-grid{
    grid-template-columns:1fr;
  }
  .bento-large,
  .bento-wide{
    grid-column:auto;
  }
  .bento-card{
    min-height:290px;
  }
  .bento-large{
    min-height:520px;
  }
  .bento-wide-content{
    grid-template-columns:1fr;
  }
  .floating-nodes{
    display:none;
  }
  .workflow-toolbar{
    align-items:flex-start;
    padding:13px;
    flex-direction:column;
  }
  .workflow-canvas{
    height:500px;
  }
  .workflow-node{
    width:160px;
    padding:10px;
  }
  .node-trigger{left:2%;top:80px}
  .node-agent{left:50%;top:175px}
  .node-action{left:2%;top:285px}
  .node-output{left:50%;top:390px}
  .edge-one{left:32%;top:145px;width:18%;transform:rotate(28deg)}
  .edge-two{left:31%;top:280px;width:18%;transform:rotate(-28deg)}
  .edge-three{left:65%;top:360px;width:16%;transform:rotate(28deg)}
  .canvas-console{
    display:none;
  }
  .compliance-grid{
    grid-template-columns:1fr;
  }
  .feature-tab-buttons{
    grid-template-columns:1fr;
  }
  .feature-tab{
    border-right:0;
    border-bottom:1px solid var(--border);
  }
  .feature-tab:last-child{
    border-bottom:0;
  }
  .tab-copy h2{
    font-size:30px;
  }
  .architecture-visual{
    transform:scale(.8);
    margin-left:-35px;
    margin-right:-35px;
  }
  .arch-line{
    width:25px;
  }
  .enterprise-banner{
    padding:30px;
    display:block;
  }
  .enterprise-banner h2{
    font-size:30px;
  }
  .enterprise-banner .btn{
    margin-top:25px;
  }
  .calculator-card{
    padding:28px;
  }
  .calculator-controls{
    grid-template-columns:1fr;
  }
  .estimate-result{
    grid-column:auto;
  }
  .docs-hero h1{
    font-size:43px;
  }
  .sdk-grid{
    grid-template-columns:1fr 1fr;
  }
  .featured-copy{
    padding:30px;
  }
  .featured-copy h2{
    font-size:28px;
  }
  .blog-toolbar{
    display:block;
  }
  .blog-count{
    margin-top:12px;
  }
  .contact-form-card,
  .booking-card,
  .location-card{
    padding:22px;
  }
  .location-card{
    grid-template-columns:1fr;
  }
  .time-slots{
    grid-template-columns:1fr 1fr;
  }
  .footer-main{
    grid-template-columns:1fr 1fr;
    gap:35px 20px;
  }
  .footer-brand{
    grid-column:span 2;
  }
  .footer-bottom{
    display:grid;
    gap:15px;
    text-align:center;
    justify-content:center;
  }
  .social-links{
    justify-content:center;
  }
  .app-content{
    padding:20px 14px;
  }
  .app-topbar{
    padding:0 14px;
  }
  .app-user>div,
  .app-user>i{
    display:none;
  }
  .app-page-heading{
    align-items:flex-start;
    flex-direction:column;
  }
  .app-page-heading h1{
    font-size:25px;
  }
  .dashboard-stat-grid,
  .analytics-metrics,
  .agent-dashboard-grid{
    grid-template-columns:1fr 1fr;
  }
  .dashboard-stat>strong{
    font-size:21px;
  }
  .big-chart{
    height:250px;
  }
  .workflow-builder-canvas{
    height:600px;
  }
  .builder-node{
    width:170px;
  }
  .builder-trigger{left:3%;top:70px}
  .builder-agent{left:45%;top:170px}
  .builder-action{left:3%;top:300px}
  .builder-output{left:45%;top:400px}
  .builder-inspector{
    display:none;
  }
  .connector-a{left:30%;top:145px;width:16%}
  .connector-b{left:30%;top:270px;width:16%}
  .connector-c{left:66%;top:370px;width:13%}
  .settings-row{
    align-items:flex-start;
    flex-direction:column;
  }
  .settings-row input,
  .settings-row select{
    width:100%;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
  }
}