/* ============================================================
   INTELYNX DESIGN SYSTEM v2  ·  "Terminal Emerald"
   near-black surfaces · emerald accent · strong grid · terminal log vibe
   Type: Geist (UI) + Geist Mono (data/terminal)
   Loaded by landing + the unified app. Pair with /ix.js (cursor + reveal).
   ============================================================ */

:root{
  /* ---- surfaces (near-black, deep) ---- */
  --bg:        #07090C;
  --bg-1:      #0A0D11;
  --bg-2:      #0D1116;   /* card */
  --bg-3:      #11161C;   /* raised / input */
  --glass:     rgba(255,255,255,.028);
  --glass-2:   rgba(255,255,255,.05);

  /* ---- ink ---- */
  --ink:       #E7EDE9;
  --ink-2:     #AEBBB2;
  --dim:       #7C8A81;
  --faint:     #515C55;

  /* ---- lines / grid (more visible, emerald-tinted) ---- */
  --line:      rgba(52,211,153,.12);
  --line-2:    rgba(255,255,255,.055);
  --line-str:  rgba(52,211,153,.34);
  --grid:      rgba(52,211,153,.10);

  /* ---- brand: emerald ---- */
  --accent:    #34D399;
  --accent-2:  #10B981;
  --accent-3:  #6EE7B7;   /* light mint highlight */
  --accent-ink:#04140C;   /* text on accent fill */
  --grad:      linear-gradient(135deg,#10B981 0%,#34D399 55%,#6EE7B7 100%);
  --grad-rev:  linear-gradient(135deg,#6EE7B7 0%,#34D399 45%,#10B981 100%);
  --grad-soft: linear-gradient(135deg,rgba(16,185,129,.16),rgba(52,211,153,.12));

  /* ---- semantic (no blue) ---- */
  --ok:   #34D399;  --ok-bg:   rgba(52,211,153,.12);  --ok-br:  rgba(52,211,153,.32);
  --warn: #FBBF24;  --warn-bg: rgba(251,191,36,.12);  --warn-br:rgba(251,191,36,.30);
  --bad:  #FB7185;  --bad-bg:  rgba(251,113,133,.12); --bad-br: rgba(251,113,133,.30);
  --info: #5EEAD4;  --info-bg: rgba(94,234,212,.12);  --info-br:rgba(94,234,212,.30);

  /* ---- radii ---- */
  --r-xs: 6px; --r-sm: 9px; --r: 13px; --r-lg: 17px; --r-xl: 22px; --r-pill: 999px;

  /* ---- shadow / glow ---- */
  --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.28);
  --sh-2: 0 14px 44px -14px rgba(0,0,0,.66), 0 4px 16px rgba(0,0,0,.34);
  --sh-3: 0 34px 90px -26px rgba(0,0,0,.78);
  --glow: 0 0 0 1px rgba(52,211,153,.2), 0 10px 34px -10px rgba(52,211,153,.4);
  --glow-str: 0 0 22px -2px rgba(52,211,153,.55);

  /* ---- type ---- */
  --font: 'Geist','Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono: 'Geist Mono','JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============ base ============ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:15px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; letter-spacing:.01em;
}

/* ambient: strong grid + emerald aura + faint scanlines */
.ix-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--bg)}
.ix-bg::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(58% 46% at 12% -6%, rgba(16,185,129,.14), transparent 60%),
    radial-gradient(52% 42% at 100% 4%, rgba(52,211,153,.10), transparent 55%),
    radial-gradient(60% 50% at 50% 108%, rgba(16,185,129,.08), transparent 60%);
}
.ix-bg::after{content:"";position:absolute;inset:-1px;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:40px 40px;opacity:.85;
  -webkit-mask-image:radial-gradient(90% 75% at 50% 0%,#000 40%,transparent 92%);
          mask-image:radial-gradient(90% 75% at 50% 0%,#000 40%,transparent 92%);
}
/* optional scanline overlay — add class ix-scan to .ix-bg */
.ix-bg.ix-scan::after{background-image:
  linear-gradient(var(--grid) 1px,transparent 1px),
  linear-gradient(90deg,var(--grid) 1px,transparent 1px),
  repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);
  background-size:40px 40px,40px 40px,100% 3px}

a{color:var(--accent);text-decoration:none;transition:color .15s var(--ease)}
a:hover{color:var(--accent-3)}
img{max-width:100%;display:block}
::selection{background:rgba(52,211,153,.30);color:#eafff5}
h1,h2,h3,h4{margin:0;font-weight:750;letter-spacing:-.02em;line-height:1.12;color:var(--ink)}
h1{font-size:clamp(30px,5vw,56px)} h2{font-size:clamp(22px,3vw,34px)} p{margin:0}

*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(52,211,153,.16);border-radius:99px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(52,211,153,.30);background-clip:content-box}

/* ============ helpers ============ */
.ix-wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.ix-mono{font-family:var(--mono);font-feature-settings:"ss01","cv01"}
.ix-grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.ix-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:650;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  padding:6px 12px;border:1px solid var(--line-str);border-radius:var(--r-pill);background:var(--grad-soft);font-family:var(--mono)}
.ix-lead{color:var(--ink-2);font-size:clamp(15px,1.6vw,18px);line-height:1.72}
.ix-muted{color:var(--dim)}
.ix-divider{height:1px;background:linear-gradient(90deg,transparent,var(--line-str),transparent);border:0;margin:0}

/* ============ buttons ============ */
.ix-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;font-family:var(--font);
  font-size:14.5px;font-weight:650;padding:12px 20px;border-radius:var(--r-sm);border:1px solid transparent;
  transition:transform .16s var(--ease),box-shadow .2s var(--ease),background .2s,border-color .2s,color .2s;white-space:nowrap;user-select:none}
.ix-btn:active{transform:translateY(1px)}
.ix-btn-primary{background:var(--grad);color:var(--accent-ink);box-shadow:var(--glow)}
.ix-btn-primary:hover{box-shadow:var(--glow),var(--glow-str);transform:translateY(-1px)}
.ix-btn-ghost{background:var(--glass);color:var(--ink);border-color:var(--line-str)}
.ix-btn-ghost:hover{background:var(--glass-2);border-color:var(--accent)}
.ix-btn-soft{background:var(--grad-soft);color:var(--accent-3);border-color:var(--line-str)}
.ix-btn-soft:hover{border-color:var(--accent);color:#eafff5}
.ix-btn-sm{padding:8px 14px;font-size:13px;border-radius:var(--r-xs)}
.ix-btn-lg{padding:15px 26px;font-size:15.5px;border-radius:var(--r)}

/* ============ cards ============ */
.ix-card{background:linear-gradient(180deg,var(--bg-2),var(--bg-1));border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.ix-card-pad{padding:22px}
.ix-card-hover{transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
.ix-card-hover:hover{transform:translateY(-3px);border-color:var(--line-str);box-shadow:var(--sh-2)}
.ix-glass{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:var(--r-lg)}
.ix-card-accent{position:relative;overflow:hidden}
.ix-card-accent::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--grad);opacity:.8}

/* ============ chips / badges ============ */
.ix-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--glass);color:var(--ink-2)}
.ix-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.03em;font-family:var(--mono);padding:4px 10px;border-radius:var(--r-pill);border:1px solid var(--line)}
.ix-badge.ok{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-br)}
.ix-badge.warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-br)}
.ix-badge.bad{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-br)}
.ix-badge.info{color:var(--info);background:var(--info-bg);border-color:var(--info-br)}
.ix-dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--ok);box-shadow:0 0 0 4px rgba(52,211,153,.14)}
.ix-dot.warn{background:var(--warn);box-shadow:0 0 0 4px rgba(251,191,36,.14)}
.ix-dot.bad{background:var(--bad);box-shadow:0 0 0 4px rgba(251,113,133,.14)}

/* ============ form fields ============ */
.ix-field{width:100%;font-family:var(--font);font-size:14.5px;color:var(--ink);background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;transition:border-color .16s,box-shadow .16s,background .16s;outline:none}
.ix-field::placeholder{color:var(--faint)}
.ix-field:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(52,211,153,.20);background:var(--bg-2)}
.ix-label{display:block;font-size:12px;font-weight:600;color:var(--dim);margin-bottom:7px;letter-spacing:.03em;font-family:var(--mono);text-transform:uppercase}

/* ============ data table ============ */
.ix-table{width:100%;border-collapse:collapse;font-size:13.5px}
.ix-table th{font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--glass)}
.ix-table td{padding:11px 14px;border-bottom:1px solid var(--line-2);color:var(--ink-2)}
.ix-table tr:hover td{background:var(--glass)}
.ix-table .ix-mono{color:var(--ink)}

/* ============ nav ============ */
.ix-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;padding:13px 22px;background:rgba(7,9,12,.74);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.ix-nav .ix-logo{height:30px;width:auto;cursor:pointer}
.ix-nav a.ix-navlink{color:var(--dim);font-size:14px;font-weight:600;padding:8px 12px;border-radius:var(--r-xs);transition:color .15s,background .15s;cursor:pointer}
.ix-nav a.ix-navlink:hover{color:var(--ink);background:var(--glass)}
.ix-nav a.ix-navlink.on{color:var(--ink)}

/* ============ TERMINAL LOG console (signature element) ============ */
.ix-term{background:linear-gradient(180deg,#080B0E,#060809);border:1px solid var(--line-str);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-2),inset 0 0 0 1px rgba(0,0,0,.4);font-family:var(--mono);font-size:12.8px;line-height:1.7}
.ix-term .bar{display:flex;align-items:center;gap:7px;padding:9px 13px;border-bottom:1px solid var(--line);background:rgba(52,211,153,.04);color:var(--dim);font-size:11.5px}
.ix-term .bar .d{width:9px;height:9px;border-radius:50%;background:#2a2f2c}
.ix-term .bar .d.g{background:var(--ok)} .ix-term .bar .d.y{background:var(--warn)} .ix-term .bar .d.r{background:var(--bad)}
.ix-term .bar .t{margin-left:8px;letter-spacing:.04em}
.ix-term .body{padding:14px 16px;max-height:420px;overflow:auto;color:var(--ink-2)}
.ix-term .ln{white-space:pre-wrap;word-break:break-word}
.ix-term .pr{color:var(--accent)}                 /* $ prompt / ┃ gutter */
.ix-term .k{color:var(--dim)}                      /* key */
.ix-term .v{color:var(--ink)}                      /* value */
.ix-term .ok{color:var(--ok)} .ix-term .warn{color:var(--warn)} .ix-term .bad{color:var(--bad)} .ix-term .mut{color:var(--faint)}
.ix-term .cur{display:inline-block;width:8px;height:15px;background:var(--accent);vertical-align:-2px;animation:ix-blink 1.05s step-end infinite;box-shadow:var(--glow-str)}
@keyframes ix-blink{50%{opacity:0}}

/* ============ collapsible (details) ============ */
.ix-acc{border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,var(--bg-2),var(--bg-1));overflow:hidden;margin:10px 0}
.ix-acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px;font-weight:650;color:var(--ink);transition:background .15s}
.ix-acc>summary::-webkit-details-marker{display:none}
.ix-acc>summary:hover{background:var(--glass)}
.ix-acc>summary .n{font-family:var(--mono);font-size:12px;color:var(--accent);border:1px solid var(--line-str);background:var(--grad-soft);border-radius:6px;padding:2px 8px;flex:none}
.ix-acc>summary .chev{margin-left:auto;color:var(--dim);transition:transform .22s var(--ease)}
.ix-acc[open]>summary .chev{transform:rotate(180deg)}
.ix-acc[open]>summary{border-bottom:1px solid var(--line)}
.ix-acc .acbody{padding:14px 16px;color:var(--ink-2);animation:ix-fade .35s var(--ease) both}

/* ============ scroll reveal (with /ix.js) ============ */
.ix-reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.ix-reveal.is-in{opacity:1;transform:none}
.ix-reveal.d1{transition-delay:.06s}.ix-reveal.d2{transition-delay:.12s}.ix-reveal.d3{transition-delay:.18s}.ix-reveal.d4{transition-delay:.24s}

/* ============ custom terminal cursor (with /ix.js) ============ */
@media (hover:hover) and (pointer:fine){
  html.ix-cursor-on, html.ix-cursor-on *{cursor:none !important}
  .ix-cur-dot{position:fixed;top:0;left:0;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:var(--glow-str);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);mix-blend-mode:screen}
  .ix-cur-ring{position:fixed;top:0;left:0;width:26px;height:26px;border:1px solid var(--line-str);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .18s var(--ease),height .18s var(--ease),border-color .18s,background .18s}
  .ix-cur-ring.hot{width:44px;height:44px;border-color:var(--accent);background:rgba(52,211,153,.08)}
}

/* ============ misc ============ */
.ix-kbd{font-family:var(--mono);font-size:11px;padding:2px 7px;border-radius:6px;border:1px solid var(--line);background:var(--glass);color:var(--dim)}
.ix-skeleton{background:linear-gradient(90deg,var(--glass) 25%,var(--glass-2) 37%,var(--glass) 63%);background-size:400% 100%;animation:ix-shim 1.4s ease infinite;border-radius:var(--r-sm)}
@keyframes ix-shim{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes ix-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ix-in{animation:ix-fade .5s var(--ease) both}.ix-in-2{animation:ix-fade .5s var(--ease) .08s both}.ix-in-3{animation:ix-fade .5s var(--ease) .16s both}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.ix-reveal{opacity:1;transform:none}}
