/* ═══════════════════════════════════════════════════════════════
   Defen.so — ix design system (shared by homepage + inner pages)
   Monochrome ink; color only where it carries meaning.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --ix-bg:#FFFFFF; --ix-ink:#0A0A0A; --ix-ink-2:#57534E; --ix-ink-3:#706B66;
  --ix-line:#E7E5E4; --ix-line-2:#D6D3D1;
  --ix-red:#D93036; --ix-red-bg:#FEF2F2; --ix-emerald:#0B7C55; --ix-emerald-bg:#ECFDF5; --ix-blue:#2563EB; --ix-blue-bg:#EFF6FF;
  --ix-max:1280px;
}
html[data-theme="dark"] .ix{
  --ix-bg:#0C0C0D; --ix-ink:#F5F5F4; --ix-ink-2:#A8A29E; --ix-ink-3:#78716C;
  --ix-line:#26262A; --ix-line-2:#33333A; --ix-red-bg:#2A1416; --ix-emerald-bg:#0C231A;
}
.ix{ background:var(--ix-bg); color:var(--ix-ink); }
.ix *{ box-sizing:border-box; }
.ix-wrap{ max-width:var(--ix-max); margin:0 auto; padding:0 32px; }
.ix-mono{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
.ix-accent{ font-family:inherit; font-style:normal; font-weight:600; letter-spacing:-.03em; color:var(--ix-ink-2); }

.ix-sec{ border-top:1px solid var(--ix-line); }
.ix-eyebrow{ display:flex; align-items:baseline; gap:14px; padding:26px 0 0; }
.ix-eyebrow .n{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11px; color:var(--ix-ink); letter-spacing:.1em; font-weight:700; }
.ix-eyebrow .t{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11px; text-transform:uppercase; letter-spacing:.22em; color:var(--ix-ink-2); }
.ix-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px; margin:14px 0 26px; }
.ix-head h2, .ix-head h1{ font-size:clamp(28px,3.8vw,46px); letter-spacing:-.03em; line-height:1.08; margin:0; font-weight:600; max-width:600px; }
.ix-head .s{ font-size:14px; color:var(--ix-ink-2); }

/* zigzag: text | visual */
.ix-zig{ display:grid; grid-template-columns:1fr; gap:36px; align-items:center; padding:48px 0 72px; }
.ix-zig > div{ min-width:0; }
@media(min-width:920px){ .ix-zig{ grid-template-columns:1fr 1fr; gap:64px; }
  .ix-zig.rev .zig-txt{ order:2; } .ix-zig.rev .zig-vis{ order:1; } }
.ix-zig h2{ font-size:clamp(30px,4vw,48px); letter-spacing:-.03em; line-height:1.06; margin:0 0 10px; font-weight:600; max-width:600px; }
.ix-zig .lead{ margin:0 0 22px; color:var(--ix-ink-2); font-size:15px; line-height:1.65; max-width:36em; }

/* buttons */
.ix-btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:8px; background:var(--ix-ink); color:var(--ix-bg); font-weight:600; font-size:14px; text-decoration:none; border:1.5px solid var(--ix-ink); }
.ix-btn:hover{ background:#2E2B29; border-color:#2E2B29; }
.ix-btn-o{ background:transparent; color:var(--ix-ink); }
.ix-btn-o:hover{ background:var(--ix-ink); color:var(--ix-bg); }
.ix-plink{ display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border:1.5px solid var(--ix-ink); border-radius:8px; color:var(--ix-ink); text-decoration:none; font-size:12.5px; font-weight:600; }
.ix-plink:hover{ background:var(--ix-ink); color:var(--ix-bg); border-color:var(--ix-ink); }

/* window-chrome product mock */
.ix-case{ border:1px solid var(--ix-line); border-radius:14px; overflow:hidden;
  background:color-mix(in srgb,var(--ix-bg) 55%, #fff); display:flex; flex-direction:column; }
html[data-theme="dark"] .ix-case{ background:#141416; }
.ix-case .chrome{ display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--ix-line);
  background:color-mix(in srgb,var(--ix-bg) 30%, #fff); }
html[data-theme="dark"] .ix-case .chrome{ background:#0F0F11; }
.ix-case .chrome .dots{ display:flex; gap:5px; }
.ix-case .chrome .dots i{ width:9px; height:9px; border-radius:50%; background:var(--ix-line-2); display:block; }
.ix-case .chrome .fn{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:10.5px; color:var(--ix-ink-3); letter-spacing:.02em; }
.ix-case .chrome .live{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ix-emerald); }
.ix-case .chrome .live::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--ix-emerald); animation:ixpulse 2.2s ease-out infinite; }
@keyframes ixpulse{ 0%{ box-shadow:0 0 0 0 rgba(15,157,107,.45);} 70%{ box-shadow:0 0 0 6px rgba(15,157,107,0);} 100%{ box-shadow:0 0 0 0 rgba(15,157,107,0);} }
.ix-case .shot{ flex:1; padding:15px 16px; display:flex; flex-direction:column; gap:9px; }
.ix-case .cap{ padding:15px 18px; border-top:1px solid var(--ix-line); }
.ix-case .cap h4, .cap h3{ margin:0; font-size:14px; font-weight:600; }
.ix-case .cap p{ margin:4px 0 0; font-size:12.5px; color:var(--ix-ink-2); line-height:1.5; }
.ix-mini{ display:flex; align-items:center; gap:8px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:10.5px; color:var(--ix-ink-2); }
.ix-mini .t{ margin-left:auto; color:var(--ix-ink-3); font-size:9.5px; }
.ix-mini .b{ padding:2px 6px; border-radius:3px; font-weight:700; font-size:9px; letter-spacing:.04em; flex:none; }
.ix-barrow{ display:flex; align-items:center; gap:2px; }
.ix-barrow i{ flex:1; height:16px; border-radius:2px; background:var(--ix-emerald); opacity:.8; display:block; }
.ix-barrow i.d{ background:var(--ix-red); }
.zig-vis .ix-case{ box-shadow:0 30px 60px -30px rgba(10,10,10,.25); }

/* editor mock */
.ix-editor{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11.5px; line-height:1.5; }
.ix-editor .cl{ display:flex; align-items:baseline; gap:12px; padding:2.5px 0; color:var(--ix-ink-2); white-space:nowrap; overflow:hidden; }
.ix-editor .ln{ width:16px; text-align:right; color:var(--ix-line-2); flex:none; user-select:none; }
.ix-editor .tok-k{ color:var(--ix-red); }
.ix-editor .tok-s{ color:var(--ix-emerald); }
.ix-editor .tok-c{ color:var(--ix-ink-3); }
.ix-editor .tok-v{ font-weight:700; color:var(--ix-ink); }
.ix-editor .cl.flag{ background:var(--ix-red-bg); border-left:2px solid var(--ix-red); margin:2px -16px; padding:4px 16px 4px 14px; border-radius:2px; }
.ix-editor .cl.okl{ background:var(--ix-emerald-bg); border-left:2px solid var(--ix-emerald); margin:2px -16px; padding:4px 16px 4px 14px; border-radius:2px; }

/* feature accordions */
.ix-feat{ border-top:1px solid var(--ix-line); }
.ix-feat:last-of-type{ border-bottom:1px solid var(--ix-line); margin-bottom:20px; }
.ix-feat .fhead{ display:flex; align-items:center; gap:14px; width:100%; padding:14px 0; background:none; border:0; cursor:pointer; text-align:left; color:inherit; }
.ix-feat .fi{ width:34px; height:34px; border:1px solid var(--ix-line-2); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--ix-ink); flex:none; }
.ix-feat .fi svg, .ix-feat .fi i{ width:17px; height:17px; }
.ix-feat h3{ margin:0; font-size:15.5px; font-weight:600; letter-spacing:-.01em; flex:1; }
.ix-feat .chev{ color:var(--ix-ink-3); transition:transform .25s; line-height:0; }
.ix-feat.open .chev{ transform:rotate(180deg); }
.ix-feat .fbody{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.ix-feat.open .fbody{ max-height:150px; }
.ix-feat .fbody p{ margin:0; padding:0 0 16px 48px; font-size:13.5px; color:var(--ix-ink-2); line-height:1.55; }

/* checks list */
.ix-checks{ list-style:none; margin:0 0 16px; padding:0; }
.ix-checks li{ position:relative; padding:5px 0 5px 26px; font-size:14px; color:var(--ix-ink-2); line-height:1.55; }
.ix-checks li::before{ content:''; position:absolute; left:0; top:10px; width:14px; height:14px; background:var(--ix-emerald-bg); border-radius:50%; }
.ix-checks li::after{ content:''; position:absolute; left:3.5px; top:13.5px; width:7px; height:4.5px; border-left:1.6px solid var(--ix-emerald); border-bottom:1.6px solid var(--ix-emerald); transform:rotate(-45deg); }

/* mobile */
@media(max-width:640px){
  .ix-wrap{ padding:0 20px; }
  .ix-zig{ padding:36px 0 48px; }
}