:root {
  --sky: #daeef8; --sky2: #c8e5f5; --sky3: #b2d8ef;
  --navy: #1a3a52; --navy2: #1e4460; --ink: #0f2233;
  --accent: #1a7ab5; --accent2: #2596d8;
  --accent-dim: rgba(26,122,181,0.12);
  --gold: #c07a1a; --gold-dim: rgba(192,122,26,0.1);
  --slate: #4a7090; --muted: #6a90a8;
  --white: #ffffff;
  --card: rgba(255,255,255,0.72);
  --card-border: rgba(26,122,181,0.18);
  --green: #1a8a4a; --red: #c04040;
  --border: rgba(26,122,181,0.2);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'DM Sans', sans-serif; background: linear-gradient(160deg,#cce8f6 0%,#daeef8 40%,#c4dff0 100%); background-attachment: fixed; color: var(--ink); min-height: 100vh; overflow-x: hidden; }

.nav { display:flex; align-items:center; justify-content:space-between; padding:16px 40px; border-bottom:0.5px solid var(--card-border); background:rgba(210,235,248,0.9); backdrop-filter:blur(10px); position:sticky; top:0; z-index:100; }
.nav-logo { font-family:'Libre Baskerville',serif; font-size:22px; color:var(--accent); letter-spacing:0.02em; text-decoration:none; }
.nav-logo span { color:var(--ink); }
.nav-tabs { display:flex; gap:4px; }
.nav-tab { font-size:12px; font-family:'DM Mono',monospace; color:var(--slate); padding:7px 16px; border-radius:20px; cursor:pointer; border:0.5px solid transparent; background:transparent; transition:all 0.2s; letter-spacing:0.04em; text-decoration:none; }
.nav-tab:hover { color:var(--accent); background:var(--accent-dim); border-color:var(--border); }
.nav-tab.active { color:var(--white); background:var(--accent); border-color:var(--accent); }

.card { background:var(--card); border:0.5px solid var(--card-border); border-radius:14px; backdrop-filter:blur(6px); }
.section-label { font-family:'DM Mono',monospace; font-size:11px; color:var(--accent); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:8px; }
.section-title { font-family:'Libre Baskerville',serif; font-size:28px; color:var(--ink); margin-bottom:6px; }
.section-sub { font-size:14px; color:var(--muted); margin-bottom:36px; font-weight:300; }

.btn-primary { background:var(--accent); color:var(--white); border:none; padding:12px 28px; border-radius:6px; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500; cursor:pointer; transition:all 0.2s; letter-spacing:0.02em; }
.btn-primary:hover { background:var(--navy2); transform:translateY(-1px); }
.btn-outline { background:var(--white); color:var(--accent); border:0.5px solid var(--border); padding:12px 28px; border-radius:6px; font-family:'DM Sans',sans-serif; font-size:14px; cursor:pointer; transition:all 0.2s; text-decoration:none; display:inline-block; }
.btn-outline:hover { border-color:var(--accent2); background:var(--accent-dim); }

.hero { padding:56px 40px; display:grid; grid-template-columns:1fr 280px; gap:48px; align-items:start; max-width:1100px; margin:0 auto; }
.hero-badge { display:inline-flex; align-items:center; gap:6px; font-family:'DM Mono',monospace; font-size:10px; color:var(--accent); border:0.5px solid var(--border); background:var(--accent-dim); padding:5px 14px; border-radius:20px; margin-bottom:28px; letter-spacing:0.08em; text-transform:uppercase; }
.hero-badge::before { content:'●'; font-size:7px; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:0.25} }
.hero-title { font-family:'Libre Baskerville',serif; font-size:50px; line-height:1.15; color:var(--ink); margin-bottom:20px; }
.hero-title em { color:var(--accent); font-style:normal; }
.hero-desc { font-size:15px; color:var(--slate); line-height:1.75; max-width:480px; margin-bottom:36px; font-weight:300; }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; }

.phone-wrap { display:flex; justify-content:center; }
.phone { width:240px; background:var(--white); border-radius:38px; border:2px solid rgba(26,122,181,0.25); box-shadow:0 12px 48px rgba(26,58,82,0.15),0 2px 8px rgba(26,58,82,0.08); overflow:hidden; }
.phone-notch { width:80px; height:22px; background:#0f1a1a; border-radius:0 0 14px 14px; margin:0 auto; }
.phone-status { background:#0f1a1a; color:rgba(255,255,255,0.6); font-size:9px; font-family:'DM Mono',monospace; padding:4px 18px 7px; display:flex; justify-content:space-between; }
.wa-bar { background:#1a3a2a; padding:10px 14px; display:flex; align-items:center; gap:10px; border-bottom:0.5px solid rgba(37,211,102,0.15); }
.wa-ava { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#1a7ab5,#2596d8); display:flex; align-items:center; justify-content:center; font-size:15px; color:#fff; font-weight:700; font-family:'Libre Baskerville',serif; }
.wa-bar-name { font-size:12px; font-weight:500; color:#e8f5e8; }
.wa-bar-status { font-size:9px; color:#25d366; }
.wa-msgs { padding:12px 10px; background:#e8f0e8; display:flex; flex-direction:column; gap:8px; min-height:300px; }
.wm { max-width:88%; padding:7px 10px; border-radius:9px; font-size:11px; line-height:1.45; opacity:0; animation:mIn 0.4s forwards; }
.wm.u { background:#d0f0c0; align-self:flex-end; border-bottom-right-radius:2px; color:#1a3a1a; }
.wm.a { background:#ffffff; align-self:flex-start; border-bottom-left-radius:2px; color:#1a2233; }
.wm-time { font-size:9px; color:#7a9a7a; margin-top:3px; text-align:right; }
.wm-time.left { text-align:left; color:#7a8a9a; }
.wm.u { animation-delay:0.3s; }
.wm:nth-child(2) { animation-delay:0.9s; }
.wm:nth-child(3) { animation-delay:1.5s; }
.wm:nth-child(4) { animation-delay:2.1s; }
.wm:nth-child(5) { animation-delay:2.7s; }
@keyframes mIn { from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)} }
.wa-input-bar { background:#f0f5f0; padding:8px 12px; display:flex; align-items:center; gap:8px; border-top:0.5px solid rgba(0,0,0,0.08); }
.wa-input-pill { flex:1; background:#fff; border-radius:18px; padding:6px 12px; font-size:10px; color:#aaa; border:0.5px solid #e0e0e0; }
.task-chip { background:#eef6ff; border:0.5px solid rgba(26,122,181,0.2); border-radius:6px; padding:3px 7px; font-size:9px; color:#1a5080; margin-top:4px; display:inline-block; }
.task-chip.done { background:#eeffee; border-color:rgba(26,140,74,0.2); color:#1a6a30; }

.how { padding:56px 40px; max-width:1100px; margin:0 auto; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.step { background:var(--card); border:0.5px solid var(--card-border); border-radius:14px; padding:28px 22px; position:relative; overflow:hidden; transition:all 0.25s; }
.step:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(26,58,82,0.1); }
.step::before { content:attr(data-n); position:absolute; top:-8px; right:14px; font-family:'Libre Baskerville',serif; font-size:80px; font-weight:700; color:rgba(26,122,181,0.06); line-height:1; }
.step-icon { width:42px; height:42px; border-radius:10px; background:var(--accent-dim); border:0.5px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:18px; }
.step-title { font-family:'Libre Baskerville',serif; font-size:16px; color:var(--ink); margin-bottom:10px; }
.step-desc { font-size:13px; color:var(--slate); line-height:1.65; font-weight:300; margin-bottom:16px; }
.tag { font-family:'DM Mono',monospace; font-size:10px; color:var(--accent); background:var(--accent-dim); border:0.5px solid var(--border); padding:3px 8px; border-radius:4px; display:inline-block; margin:2px 2px 0 0; }

.agents-section { padding:56px 40px; max-width:1100px; margin:0 auto; }
.agents-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.agent-card { background:var(--card); border:0.5px solid var(--card-border); border-radius:14px; padding:24px 20px; transition:all 0.25s; position:relative; overflow:hidden; }
.agent-card:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(26,58,82,0.1); border-color:rgba(26,122,181,0.35); }
.agent-header { display:flex; align-items:flex-start; gap:14px; margin-bottom:14px; }
.agent-icon { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; border:0.5px solid var(--card-border); background:var(--white); }
.agent-name { font-family:'Libre Baskerville',serif; font-size:15px; color:var(--ink); line-height:1.3; margin-bottom:3px; }
.agent-type { font-family:'DM Mono',monospace; font-size:9px; color:var(--muted); letter-spacing:0.06em; text-transform:uppercase; }
.agent-desc { font-size:13px; color:var(--slate); line-height:1.65; margin-bottom:14px; font-weight:300; }
.agent-skills { display:flex; flex-wrap:wrap; gap:6px; }
.skill-pill { font-family:'DM Mono',monospace; font-size:10px; color:var(--slate); border:0.5px solid rgba(74,112,144,0.25); padding:3px 8px; border-radius:20px; }

.reg-section { padding:56px 40px; max-width:1100px; margin:0 auto; }
.reg-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.form-card { background:var(--card); border:0.5px solid var(--card-border); border-radius:14px; padding:28px 24px; }
.form-title { font-family:'Libre Baskerville',serif; font-size:18px; color:var(--ink); margin-bottom:4px; }
.form-sub { font-size:10px; color:var(--muted); margin-bottom:22px; font-family:'DM Mono',monospace; text-transform:uppercase; letter-spacing:0.05em; }
.form-row { margin-bottom:16px; }
.form-label { font-size:10px; color:var(--slate); font-family:'DM Mono',monospace; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:6px; display:block; }
.form-input { width:100%; background:var(--white); border:0.5px solid rgba(26,122,181,0.2); border-radius:7px; padding:10px 14px; color:var(--ink); font-family:'DM Sans',sans-serif; font-size:14px; outline:none; transition:border-color 0.2s; }
.form-input:focus { border-color:var(--accent); }
.form-input::placeholder { color:var(--muted); opacity:0.6; }

.stats-row { background:var(--card); border:0.5px solid var(--card-border); border-radius:12px; padding:18px 22px; display:flex; gap:28px; align-items:center; }
.stat-val { font-family:'Libre Baskerville',serif; font-size:26px; font-weight:700; }
.stat-lbl { font-size:11px; color:var(--muted); font-family:'DM Mono',monospace; text-transform:uppercase; letter-spacing:0.05em; margin-top:2px; }
.stat-div { width:0.5px; background:var(--border); align-self:stretch; }

.task-badge { font-family:'DM Mono',monospace; font-size:10px; padding:2px 8px; border-radius:4px; display:inline-block; }
.tb-done { color:var(--green); background:rgba(26,138,74,0.08); border:0.5px solid rgba(26,138,74,0.2); }
.tb-prog { color:var(--accent); background:var(--accent-dim); border:0.5px solid var(--border); }
.tb-wait { color:var(--muted); background:rgba(74,112,144,0.06); border:0.5px solid rgba(74,112,144,0.15); }

.security-box { background:var(--card); border:0.5px solid var(--card-border); border-radius:10px; padding:16px 18px; margin-bottom:16px; }
.security-lbl { font-size:10px; color:var(--accent); font-family:'DM Mono',monospace; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:8px; }
.security-txt { font-size:12px; color:var(--slate); line-height:1.65; font-weight:300; }

.flow-diagram { background:var(--card); border:0.5px solid var(--card-border); border-radius:14px; padding:24px 22px; }
.flow-title { font-family:'Libre Baskerville',serif; font-size:17px; color:var(--ink); margin-bottom:4px; }
.flow-sub { font-size:10px; color:var(--muted); margin-bottom:22px; font-family:'DM Mono',monospace; text-transform:uppercase; letter-spacing:0.05em; }
.fn { padding:12px 0; border-bottom:0.5px solid rgba(26,122,181,0.08); }
.fn:last-child { border-bottom:none; }
.fn-title { font-size:13px; font-weight:500; color:var(--ink); margin-bottom:2px; }
.fn-sub { font-size:12px; color:var(--muted); font-weight:300; line-height:1.5; }
.fn code { font-family:'DM Mono',monospace; font-size:11px; background:var(--accent-dim); padding:2px 6px; border-radius:4px; }

.footer { text-align:center; padding:32px 40px; font-family:'DM Mono',monospace; font-size:11px; color:var(--muted); border-top:0.5px solid var(--card-border); letter-spacing:0.04em; }

@media (max-width:768px) {
  .nav { padding:14px 20px; flex-direction:column; gap:12px; }
  .hero { grid-template-columns:1fr; padding:36px 20px; }
  .steps { grid-template-columns:1fr; }
  .agents-grid { grid-template-columns:1fr; }
  .reg-grid { grid-template-columns:1fr; }
  .hero-title { font-size:34px; }
}