*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

:root{
  --ink:#0c0e12;
  --ink2:#1a1d25;
  --ink3:#252936;
  --white:#ffffff;
  --off:#f8f7f5;
  --off2:#f0ede8;
  --muted:#6b7280;
  --dim:#9ca3af;
  --border:#e8e4de;
  --border2:#d5cfc6;
  --accent:#1a4fff;
  --accent2:#2d5fff;
  --accent3:#4d79ff;
  --accent-l:#f0f4ff;
  --accent-ll:#e0e9ff;
  --teal:#0b7a75;
  --teal-l:#f0faf9;
  --green:#1a7f4f;
  --green-l:#f0faf5;
  --amber:#c47a1a;
  --amber-l:#fff9f0;
  --red:#c0392b;
  --f:'Inter',system-ui,sans-serif;
  --fm:'JetBrains Mono',monospace;
  --fs:'Inter',system-ui,sans-serif;
  --max:1160px;
  --sh:0 1px 2px rgba(0,0,0,.04),0 8px 32px rgba(0,0,0,.06);
  --sh2:0 2px 4px rgba(0,0,0,.04),0 16px 48px rgba(0,0,0,.1);
  --sh3:0 4px 8px rgba(0,0,0,.04),0 24px 64px rgba(0,0,0,.14);
}

body{font-family:var(--f);background:var(--white);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}

nav {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
}
.nav-w { max-width: var(--max); margin: 0 auto; padding: 0 40px; height: 66px; display: flex; align-items: center; justify-content: space-between; }

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-mark {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: transform 0.2s ease;
}
.logo:hover .logo-mark { transform: scale(1.05); }
.logo-mark svg { width: 16px; height: 16px; fill: white; }
.logo-name { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.03em; }
.logo-name em { font-style: normal; color: var(--accent); }

nav .logo-mark { background: var(--ink); }
nav .logo-name { color: var(--ink); }
footer .logo-mark { background: var(--accent); }
footer .logo-name { color: #ffffff; }

.nav-links { display: flex; gap: 4px; list-style: none; }
.nav-links a { 
  color: var(--muted); text-decoration: none; font-size: .875rem; 
  font-weight: 600; padding: 8px 14px; border-radius: 6px; 
  transition: all .15s; letter-spacing: -0.01em; 
}
.nav-links a:hover { color: var(--ink); background: var(--off); }
.nav-r { display: flex; gap: 12px; align-items: center; }

.btn { 
  display: inline-flex; align-items: center; gap: 8px; 
  text-decoration: none; cursor: pointer; border: none; 
  font-family: var(--f); font-weight: 700; border-radius: 8px; 
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1); 
  white-space: nowrap; line-height: 1; letter-spacing: -0.01em; 
}
.btn-sm { padding: 8px 16px; font-size: .825rem; }
.btn-md { padding: 11px 22px; font-size: .9rem; }
.btn-lg { padding: 13px 26px; font-size: .95rem; border-radius: 9px; }
.btn-xl { padding: 18px 36px; font-size: 1rem; border-radius: 12px; }

.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { 
  background: var(--accent2); 
  box-shadow: 0 8px 24px rgba(26, 79, 255, 0.35); 
  transform: translateY(-2px); 
}

.btn-white { background: #fff; color: var(--ink); box-shadow: var(--sh); }
.btn-white:hover { 
  background: #ffffff; 
  box-shadow: 0 12px 28px rgba(0,0,0,0.12); 
  transform: translateY(-2px); 
}

.btn-white-out { 
  background: transparent; color: #fff; 
  border: 1.5px solid rgba(255, 255, 255, 0.3); 
}
.btn-white-out:hover { 
  background: rgba(255, 255, 255, 0.1); 
  border-color: #fff; 
}

.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #000; transform: translateY(-1px); }

.hero{
  background:var(--ink);
  padding:80px 40px 104px;
  text-align:center;
  position:relative;overflow:hidden;
}
.hero-noise{
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  opacity:.4;pointer-events:none;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 900px 700px at 25% 60%, rgba(26,79,255,.12) 0%, transparent 55%),
    radial-gradient(ellipse 700px 500px at 80% 15%, rgba(11,122,117,.08) 0%, transparent 55%),
    radial-gradient(ellipse 400px 400px at 60% 85%, rgba(26,79,255,.06) 0%, transparent 50%);
  pointer-events:none;
}
.hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:72px 72px;
  pointer-events:none;
}
.hero-w{max-width:var(--max);margin:0 auto;position:relative;z-index:1}

.hero-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.65);
  padding:7px 18px;border-radius:99px;
  font-size:.775rem;font-weight:500;letter-spacing:.02em;
  margin-bottom:32px;
  animation:fadeUp .6s ease both;
}
.hero-dot{width:6px;height:6px;border-radius:50%;background:#4d79ff;box-shadow:0 0 8px rgba(77,121,255,.8);animation:pulse 2.4s infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 8px rgba(77,121,255,.8)}50%{opacity:.5;box-shadow:0 0 4px rgba(77,121,255,.3)}}

.hero h1{
  font-size:clamp(2.8rem,5.8vw,5.6rem);
  font-weight:800;line-height:1.05;letter-spacing:-.035em;
  color:#fff;max-width:860px;margin:0 auto 24px;
  animation:fadeUp .6s .1s ease both;
}
.hero h1 em{font-style:normal;color:rgba(255,255,255,.45)}
.hero h1 strong{font-weight:500;font-style:normal}

.hero-desc{
  font-size:1.05rem;font-weight:400;color:rgba(255,255,255,.5);
  line-height:1.8;max-width:480px;margin:0 auto 48px;
  animation:fadeUp .6s .18s ease both;
  letter-spacing:-.005em;
}

.hero-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;animation:fadeUp .6s .26s ease both}
.hero-meta{font-size:.775rem;color:rgba(255,255,255,.28);margin-top:16px;animation:fadeUp .6s .34s ease both;letter-spacing:.01em}
.trust{background:var(--off);border-bottom:1px solid var(--border);padding:28px 40px}
.trust-w{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.trust-label{font-size:.75rem;font-weight:600;color:var(--dim);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;flex-shrink:0}
.trust-logos{display:flex;align-items:center;gap:36px;flex-wrap:wrap}
.trust-logo{font-size:.82rem;font-weight:600;color:var(--dim);letter-spacing:-.01em;opacity:.7}
.section{padding:88px 40px}
.section-label{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.section-h{font-size:clamp(1.9rem,3vw,2.9rem);font-weight:800;letter-spacing:-.04em;color:var(--ink);line-height:1.06}
.section-h em{font-style:normal;color:var(--muted)}
.section-sub{font-size:.975rem;color:var(--muted);line-height:1.82;margin-top:16px;max-width:480px}
.benefits{background:var(--white);border-bottom:1px solid var(--border)}
.benefits-top{text-align:center;margin-bottom:60px}
.benefits-top .section-sub{margin:16px auto 0}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:18px;overflow:hidden}
.bcard{
  background:var(--white);
  padding:32px 28px;
  transition:background .2s;
}
.bcard:hover{background:var(--off)}
.bcard-n{background:var(--ink)}
.bcard-n:hover{background:var(--ink2)}
.bcard-ico{
  width:44px;height:44px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;flex-shrink:0;
  font-size:1.25rem;
}
.ic-blue{background:var(--accent-ll)}
.ic-teal{background:var(--teal-l)}
.ic-green{background:var(--green-l)}
.ic-amber{background:var(--amber-l)}
.ic-off{background:var(--off2)}
.ic-indigo{background:#eeeeff}
.ic-dark{background:rgba(255,255,255,.08)}
.bcard h3{font-size:.975rem;font-weight:600;color:var(--ink);margin-bottom:9px;line-height:1.3;letter-spacing:-.01em}
.bcard p{font-size:.865rem;color:var(--muted);line-height:1.74}
.bcard-n h3{color:#fff}
.bcard-n p{color:rgba(255,255,255,.45)}
.feat-section{background:var(--white)}
.feat-row{border-top:1px solid var(--border);padding:88px 40px}
.feat-row.alt{background:var(--off)}
.feat-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:88px;align-items:center}
.feat-inner.flip{direction:rtl}
.feat-inner.flip>*{direction:ltr}

.feat-kicker{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.feat-kicker-line{width:18px;height:1.5px;background:var(--accent);border-radius:2px;flex-shrink:0}
.feat-kicker span{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.feat-t h2{font-size:clamp(1.8rem,2.6vw,2.6rem);font-weight:800;letter-spacing:-.04em;color:var(--ink);line-height:1.08;margin-bottom:18px}
.feat-t h2 em{font-style:normal;color:var(--muted)}
.feat-t p{font-size:.95rem;color:var(--muted);line-height:1.82;margin-bottom:26px}
.feat-checks{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:32px}
.feat-checks li{display:flex;align-items:flex-start;gap:11px;font-size:.88rem;color:var(--ink2);line-height:1.5}
.feat-check-dot{width:18px;height:18px;border-radius:50%;background:var(--green-l);border:1.5px solid rgba(26,127,79,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.5px}
.feat-check-dot::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green)}
.fv{
  background:var(--off);
  border:1px solid var(--border);
  border-radius:14px;overflow:hidden;
  box-shadow:var(--sh2);
}
.fv-bar{
  background:var(--white);border-bottom:1px solid var(--border);
  padding:10px 14px;display:flex;align-items:center;gap:7px;
}
.fv-ctrl{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.fv-title{font-size:.7rem;color:var(--dim);font-family:var(--fm);margin:0 auto}
.fv-body{padding:18px}
.dev-list{display:flex;flex-direction:column;gap:7px}
.dev-item{
  background:var(--white);border:1px solid var(--border);
  border-radius:9px;padding:10px 13px;
  display:flex;align-items:center;gap:10px;
}
.dev-ic{width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.dev-name{font-size:.78rem;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.dev-sub{font-size:.65rem;color:var(--dim);font-family:var(--fm);margin-top:2px}
.dev-btns{display:flex;gap:5px;margin-left:auto}
.dev-btn{padding:4px 9px;border-radius:5px;font-size:.65rem;font-weight:600;border:none;cursor:default;font-family:var(--f)}
.db-t{background:var(--ink);color:#fff}
.db-v{background:var(--accent-l);color:var(--accent)}
.db-w{background:var(--off2);color:var(--dim)}
.dev-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dot-on{background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,.4)}
.dot-off{background:var(--dim)}
.dev-footer{margin-top:10px;background:var(--accent-l);border:1px solid var(--accent-ll);border-radius:8px;padding:9px 13px;display:flex;justify-content:space-between;align-items:center}
.dev-footer span{font-size:.72rem;color:var(--accent);font-weight:600}
.dev-footer small{font-size:.66rem;color:var(--muted)}
.ac-list{display:flex;flex-direction:column;gap:7px}
.ac-row{background:var(--white);border:1px solid var(--border);border-radius:9px;padding:11px 13px}
.ac-row-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ac-door{font-size:.8rem;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.ac-tog{width:32px;height:17px;border-radius:99px;position:relative;flex-shrink:0}
.tog-on{background:#22c55e}.tog-off{background:var(--dim)}
.ac-tog::after{content:'';position:absolute;top:2px;width:13px;height:13px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.tog-on::after{right:2px}.tog-off::after{left:2px}
.ac-chips{display:flex;gap:5px;flex-wrap:wrap}
.atag{font-size:.64rem;font-weight:600;padding:2px 8px;border-radius:4px}
.at-g{background:var(--green-l);color:var(--green)}
.at-a{background:var(--amber-l);color:var(--amber)}
.at-n{background:var(--off2);color:var(--muted)}
.at-b{background:var(--accent-l);color:var(--accent)}
.ac-log{margin-top:10px;background:var(--off);border:1px solid var(--border);border-radius:8px;padding:9px 12px}
.ac-log-hd{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin-bottom:7px}
.log-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:.71rem}
.log-row+.log-row{border-top:1px solid var(--border)}
.log-t{color:var(--dim);font-family:var(--fm);flex-shrink:0}
.log-who{font-weight:600;color:var(--ink);flex:1}
.log-act{color:var(--muted)}
.log-deny{color:var(--red);font-weight:600}
.cam-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.cam-cell{
  background:#0c1220;border-radius:8px;
  aspect-ratio:16/9;position:relative;overflow:hidden;
  padding:8px;display:flex;flex-direction:column;justify-content:space-between;
}
.cam-cell::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(150deg,#0d1929 0%,#050c17 100%);
}
.cam-top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start}
.cam-id{font-size:.57rem;font-weight:600;color:rgba(255,255,255,.4);font-family:var(--fm)}
.cam-live{display:flex;align-items:center;gap:3px;font-size:.57rem;font-weight:700;color:#4ade80}
.cam-live-d{width:5px;height:5px;border-radius:50%;background:#4ade80;animation:pulse 1.5s infinite;flex-shrink:0}
.cam-warn{font-size:.57rem;font-weight:700;color:#fbbf24}
.cam-bot{position:relative;z-index:1;font-size:.6rem;color:rgba(255,255,255,.35);font-weight:500}
.cam-person{position:absolute;bottom:22px;left:36%;width:11px;height:20px;background:rgba(77,121,255,.4);border:1px solid rgba(77,121,255,.7);border-radius:3px;z-index:1}
.cam-bbox{position:absolute;top:16px;right:16px;width:16px;height:20px;border:1.5px solid #fbbf24;border-radius:2px;z-index:1}
.cam-footer{margin-top:9px;display:flex;justify-content:space-between;align-items:center;padding:0 2px}
.cam-count{font-size:.71rem;color:var(--muted)}
.cam-alert{font-size:.67rem;font-weight:600;color:var(--amber);background:var(--amber-l);padding:2px 9px;border-radius:99px}
.ov-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:10px}
.ov-stat{background:var(--white);border:1px solid var(--border);border-radius:8px;padding:12px 13px}
.ov-n{font-size:1.55rem;font-weight:700;letter-spacing:-.04em;color:var(--ink);line-height:1}
.ov-n.c-acc{color:var(--accent)}
.ov-n.c-amb{color:var(--amber)}
.ov-l{font-size:.67rem;color:var(--muted);margin-top:3px;font-weight:500}
.ov-trend{font-size:.64rem;font-weight:600;margin-top:3px}
.tr-g{color:var(--green)}.tr-a{color:var(--amber)}
.ov-tbl{background:var(--white);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.ov-th{display:grid;grid-template-columns:1fr 64px 64px;gap:8px;padding:7px 12px;background:var(--off2);border-bottom:1px solid var(--border);font-size:.59rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.ov-tr{display:grid;grid-template-columns:1fr 64px 64px;gap:8px;padding:7px 12px;border-bottom:1px solid var(--border);align-items:center;transition:background .1s}
.ov-tr:last-child{border-bottom:none}
.ov-tr:hover{background:var(--off)}
.ov-dev{display:flex;align-items:center;gap:7px}
.ov-dic{width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0}
.ov-dn{font-size:.73rem;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.ov-ds{font-size:.63rem;color:var(--dim)}
.ov-cell{font-size:.71rem;color:var(--muted)}
.chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:99px;font-size:.62rem;font-weight:600}
.ch-g{background:var(--green-l);color:var(--green)}
.ch-a{background:var(--amber-l);color:var(--amber)}
.ch-b{background:var(--accent-l);color:var(--accent)}
.ch-d{background:var(--off2);color:var(--dim)}
.industries {
  background: var(--ink2);
  padding: 88px 40px;
  border-top: 1px solid rgba(255,255,255,.05);
}

.ind-w { max-width: var(--max); margin: 0 auto; }
.ind-header { text-align: center; margin-bottom: 52px; }
.ind-header .section-label { color: #668cff; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.ind-header .section-h { color: #ffffff; }
.ind-header .section-h em { color: #4d79ff; font-style: normal; } 
.ind-header .section-sub { 
  color: rgba(255, 255, 255, 0.6); 
  max-width: 600px; 
  margin: 16px auto 0; 
  font-size: 1.05rem;
}

.ind-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 1px; 
  background: rgba(255,255,255,0.1);
  border-radius: 14px; 
  overflow: hidden; 
  border: 1px solid rgba(255,255,255,0.1); 
}

.ind-card {
  background: rgba(255,255,255,0.02);
  padding: 30px 26px;
  transition: all 0.3s ease;
  cursor: default;
}

.ind-card:hover { 
  background: rgba(255,255,255,0.08); 
  transform: translateY(-2px);
}

.ind-icon-wrap {
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; margin-bottom: 20px;
}

.ind-title { 
  font-size: 1rem; 
  font-weight: 600; 
  color: #ffffff; 
  margin-bottom: 12px; 
  letter-spacing: -0.01em; 
}

.ind-desc { 
  font-size: 0.9rem; 
  color: rgba(255, 255, 255, 0.7); 
  line-height: 1.6; 
}

.pricing{background:var(--off);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:96px 40px}
.pricing-header{text-align:center;margin-bottom:60px}
.pricing-header .section-sub{margin:16px auto 0}
.pricing-toggle{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:28px}
.ptog-label{font-size:.875rem;font-weight:500;color:var(--muted)}
.ptog-wrap{
  width:44px;height:24px;border-radius:99px;background:var(--border2);
  position:relative;cursor:pointer;transition:background .2s;
}
.ptog-wrap.on{background:var(--accent)}
.ptog-knob{
  position:absolute;top:3px;left:3px;
  width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.15);
  transition:transform .2s;
}
.ptog-wrap.on .ptog-knob{transform:translateX(20px)}
.ptog-save{font-size:.72rem;font-weight:700;color:var(--green);background:var(--green-l);padding:2px 9px;border-radius:99px;margin-left:4px}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:var(--max);margin:0 auto}
.plan{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:16px;padding:32px 28px;
  position:relative;transition:box-shadow .2s,transform .2s;
}
.plan:hover{box-shadow:var(--sh2);transform:translateY(-3px)}
.plan-featured{
  border:1.5px solid var(--accent);
  box-shadow:0 0 0 4px rgba(26,79,255,.06),var(--sh2);
}
.plan-badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#fff;
  font-size:.7rem;font-weight:700;padding:4px 14px;border-radius:99px;
  white-space:nowrap;letter-spacing:.02em;
}
.plan-tier{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.plan-price{display:flex;align-items:baseline;gap:4px;margin-bottom:4px}
.plan-price-num{font-size:2.4rem;font-weight:700;color:var(--ink);letter-spacing:-.04em;line-height:1}
.plan-price-period{font-size:.85rem;color:var(--muted)}
.plan-price-rp{font-size:1.1rem;font-weight:600;color:var(--muted);align-self:flex-start;margin-top:5px}
.plan-desc{font-size:.85rem;color:var(--muted);line-height:1.65;margin-bottom:24px;min-height:52px}
.plan-divider{border:none;border-top:1px solid var(--border);margin-bottom:22px}
.plan-features{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.plan-features li{display:flex;align-items:flex-start;gap:10px;font-size:.855rem;color:var(--ink2);line-height:1.45}
.pf-check{
  width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:.5px;
}
.pf-on{background:var(--accent-l)}
.pf-on::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent)}
.pf-off{background:var(--off2)}
.pf-off::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--dim)}
.plan-features li.dimmed{color:var(--dim)}
.plan-cta{display:block;text-align:center;padding:12px;border-radius:9px;font-size:.9rem;font-weight:600;text-decoration:none;transition:all .2s;border:1.5px solid transparent;letter-spacing:-.01em}
.pc-ink{background:var(--ink);color:#fff;border-color:var(--ink)}
.pc-ink:hover{background:var(--ink2);box-shadow:0 6px 20px rgba(12,14,18,.3);transform:translateY(-1px)}
.pc-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.pc-accent:hover{background:var(--accent2);box-shadow:0 6px 20px rgba(26,79,255,.3);transform:translateY(-1px)}
.pc-out{background:transparent;color:var(--ink);border-color:var(--border2)}
.pc-out:hover{background:var(--off);border-color:var(--dim)}

.pricing-note{text-align:center;margin-top:28px;font-size:.8rem;color:var(--dim)}
.pricing-note a{color:var(--accent);text-decoration:none;font-weight:600}
.faq{background:var(--white);border-top:1px solid var(--border);padding:88px 40px}
.faq-w{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:360px 1fr;gap:88px;align-items:start}
.faq-side{position:sticky;top:88px}
.faq-side .section-h{color:var(--ink)}
.faq-side a{color:var(--accent);font-weight:600;text-decoration:none}
.faq-side a:hover{text-decoration:underline}
.faq-list{display:flex;flex-direction:column}
.fq{border-bottom:1px solid var(--border)}
.fq-q{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:20px 0;cursor:pointer;gap:16px;
  font-size:.9rem;font-weight:600;color:var(--ink);line-height:1.45;
  transition:color .15s;letter-spacing:-.01em;
}
.fq-q:hover{color:var(--accent)}
.fq-icon{
  width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;color:var(--muted);
  transition:all .22s;flex-shrink:0;margin-top:1px;
}
.fq.open .fq-icon{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(45deg)}
.fq-ans{height:0;overflow:hidden;transition:height .28s ease}
.fq-txt{padding:0 0 20px;font-size:.875rem;color:var(--muted);line-height:1.82}
.cta-sec{
  background:var(--ink);
  padding:88px 40px;
  text-align:center;
  position:relative;overflow:hidden;
}
.cta-sec::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 800px 500px at 50% 100%,rgba(26,79,255,.12) 0%,transparent 60%),
              radial-gradient(ellipse 600px 400px at 50% 0%,rgba(255,255,255,.03) 0%,transparent 50%);
  pointer-events:none;
}
.cta-w{max-width:600px;margin:0 auto;position:relative;z-index:1}
.cta-w h2{
  font-size:clamp(2rem,3.5vw,3.6rem);
  font-weight:800;letter-spacing:-.04em;
  color:#fff;line-height:1.06;margin-bottom:18px;
}
.cta-w h2 em{font-style:normal;color:rgba(255,255,255,.4)}
.cta-w p{font-size:.975rem;color:rgba(255,255,255,.5);line-height:1.8;margin-bottom:38px;letter-spacing:-.005em}
.cta-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cta-note{font-size:.75rem;color:rgba(255,255,255,.25);margin-top:16px;letter-spacing:.01em}

footer {
  background: var(--ink); /* Pastikan var(--ink) adalah hitam/gelap pekat */
  border-top: 1px solid rgba(255, 255, 255, .05);
  padding: 80px 40px 40px;
}

.footer-w { max-width: var(--max); margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 52px; margin-bottom: 48px; }

.footer-brand .logo-text { 
  color: #ffffff; 
  font-weight: 800; 
  font-size: 1.25rem; 
  letter-spacing: -0.02em; 
}

.footer-brand-desc { 
  font-size: .875rem; 
  color: rgba(255, 255, 255, 0.5); 
  line-height: 1.8; 
  margin-top: 20px; 
  max-width: 320px;
}

.footer-col h5 { 
  font-size: .75rem; 
  font-weight: 700; 
  letter-spacing: .12em; 
  text-transform: uppercase; 
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 24px; 
}

.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }

.footer-col ul a { 
  font-size: .875rem; 
  color: rgba(255, 255, 255, 0.5); 
  text-decoration: none; 
  transition: all .2s ease; 
}

.footer-col ul a:hover { 
  color: #ffffff; 
  padding-left: 4px;
}

.footer-line { border: none; border-top: 1px solid rgba(255, 255, 255, .08); margin-bottom: 32px; }

.footer-bot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }

.footer-bot p { font-size: .8rem; color: rgba(255, 255, 255, 0.4); }

.footer-legal { display: flex; gap: 24px; }
.footer-legal a { 
  font-size: .8rem; 
  color: rgba(255, 255, 255, 0.4); 
  text-decoration: none; 
  transition: color .2s; 
}

.footer-legal a:hover { color: rgba(255, 255, 255, 0.8); }

.scroll-top-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--sh2);
}

.scroll-top-btn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top-btn:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: var(--sh3);
}

.scroll-top-btn svg {
  width: 20px;
  height: 20px;
}

.cam-cell {
  position: relative;
  background: #000;
  aspect-ratio: 16/9;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
}

.cam-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  filter: grayscale(40%) contrast(1.2);
}

.cam-overlay {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px;
  pointer-events: none;
}

.cam-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%);
  background-size: 100% 4px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.3;
}

.cam-live-d {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #ff4d4d;
  border-radius: 50%;
  margin-right: 5px;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.alert-sepia {
  filter: sepia(100%) hue-rotate(-50deg) saturate(400%) !important;
}

.pulse {
  animation: pulse-alert 1s infinite;
}

@keyframes pulse-alert {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease}
.reveal.vis{opacity:1;transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}
.d4{transition-delay:.28s}.d5{transition-delay:.35s}.d6{transition-delay:.42s}

@media(max-width:1000px){
  .nav-links{display:none}
  .plans{grid-template-columns:1fr}
  .plans .plan{max-width:480px;margin:0 auto;width:100%}
  .feat-inner,.feat-inner.flip{grid-template-columns:1fr;gap:36px;direction:ltr}
  .bento{grid-template-columns:1fr 1fr}
  .ind-grid{grid-template-columns:1fr 1fr}
  .faq-w{grid-template-columns:1fr;gap:36px}
  .faq-side{position:static}
  .footer-top{grid-template-columns:1fr 1fr}
}

@media(max-width:680px){
  .hero{padding:80px 24px 72px}
  .section{padding:64px 24px}
  .bento{grid-template-columns:1fr}
  .ind-grid{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .hero-actions,.cta-acts{flex-direction:column;align-items:center}
  .nav-w,.trust-w,.feat-row,.pricing,.faq,.cta-sec,footer,.benefits,.industries{padding-left:24px;padding-right:24px}
}