/* ============================================================
   ORINUX — PRO sections
   dashboard mockup · trusted-by · case study · pricing · form · faq
   ============================================================ */

/* ---------- theme tokens (light overrides) ---------- */
html[data-theme="light"] {
  --bg: #f4f6fb;
  --bg-2: #eceff6;
  --bg-3: #e4e8f1;
  --surface: rgba(10, 14, 30, 0.026);
  --surface-2: rgba(10, 14, 30, 0.05);
  --border: rgba(10, 18, 40, 0.10);
  --border-strong: rgba(10, 18, 40, 0.17);
  --text: #0d1220;
  --text-dim: rgba(13, 18, 32, 0.66);
  --text-faint: rgba(13, 18, 32, 0.44);
}
html[data-theme="light"] .backdrop { opacity: 0.4; }
html[data-theme="light"] .grain { opacity: 0.02; }
html[data-theme="light"] .nav.scrolled { background: rgba(244, 246, 251, 0.78); }
html[data-theme="light"] .btn-primary { color: #fff; }
html[data-theme="light"] .stat { background: rgba(255,255,255,0.7); }
html[data-theme="light"] .node { background: rgba(255,255,255,0.82); }
html[data-theme="light"] .hero::after { background: radial-gradient(120% 80% at 50% 40%, transparent 40%, var(--bg) 92%); }
html { transition: background .5s ease; }

/* ---------- nav utility cluster ---------- */
.nav-util { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-dim);
  transition: color .2s, border-color .2s, background .2s;
}
.icon-btn:hover { color: var(--text); border-color: var(--border-strong); }
.icon-btn svg { width: 18px; height: 18px; }
.lang-toggle {
  display: inline-flex; align-items: center; border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; background: var(--surface); height: 38px;
}
.lang-toggle button {
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  padding: 0 11px; height: 100%; color: var(--text-faint); transition: color .2s, background .2s;
}
.lang-toggle button[aria-pressed="true"] { color: var(--accent-bright); background: var(--accent-soft); }
.sun, .moon { display: none; }
html[data-theme="dark"] .moon { display: block; }
html[data-theme="light"] .sun { display: block; }

/* ---------- trusted by strip ---------- */
.trust { padding: 46px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-2); }
.trust-label { text-align: center; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 26px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 64px; width: max-content; animation: scrollx 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scrollx { to { transform: translateX(-50%); } }
.brandmark { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--text-dim); white-space: nowrap; opacity: 0.72; transition: opacity .3s, color .3s; }
.brandmark:hover { opacity: 1; color: var(--text); }
.brandmark svg { width: 26px; height: 26px; stroke: currentColor; fill: none; opacity: 0.8; }

/* ---------- dashboard / platform showcase ---------- */
.platform { padding: 120px 0; position: relative; }
.win {
  position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--border-strong);
  background: var(--bg-3);
  box-shadow: 0 50px 130px -50px var(--glow), 0 30px 70px -40px rgba(0,0,0,.7);
  transform: perspective(2200px) rotateX(2deg);
  transform-origin: 50% 0;
}
.win-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--border); }
.win-dots { display: flex; gap: 7px; }
.win-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--border-strong); }
.win-dots i:nth-child(1){ background:#ff5f57; } .win-dots i:nth-child(2){ background:#febc2e; } .win-dots i:nth-child(3){ background:#28c840; }
.win-url { flex: 1; max-width: 340px; margin: 0 auto; font-family: var(--mono); font-size: 12px; color: var(--text-faint); background: rgba(0,0,0,0.25); border: 1px solid var(--border); border-radius: 7px; padding: 5px 12px; text-align: center; }
html[data-theme="light"] .win-url { background: rgba(0,0,0,0.04); }

.dash { display: grid; grid-template-columns: 210px 1fr; min-height: 540px; background: var(--bg-2); }
.dash-side { border-right: 1px solid var(--border); padding: 18px 14px; display: flex; flex-direction: column; gap: 4px; }
.dash-brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 15px; padding: 6px 8px 16px; }
.dash-brand .mark { width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(140deg, var(--accent-bright), var(--accent-2)); display: grid; place-items: center; font-family: var(--display); font-size: 13px; color: #05060a; }
.dash-nav { font-size: 13px; color: var(--text-dim); padding: 9px 11px; border-radius: 9px; display: flex; align-items: center; gap: 10px; transition: background .2s, color .2s; }
.dash-nav svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.dash-nav.on { background: var(--accent-soft); color: var(--accent-bright); }
.dash-nav .live { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 8px 1px var(--emerald); animation: pulse 2s infinite; }
.dash-sep { height: 1px; background: var(--border); margin: 10px 4px; }

.dash-main { padding: 22px; display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dash-head h4 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.dash-head .sub { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.dash-badge { font-family: var(--mono); font-size: 11px; color: var(--emerald); display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid color-mix(in oklab, var(--emerald) 40%, transparent); border-radius: 100px; background: color-mix(in oklab, var(--emerald) 12%, transparent); }
.dash-badge .live { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 8px 1px var(--emerald); animation: pulse 1.8s infinite; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 14px 15px; }
.kpi .kl { font-size: 11px; color: var(--text-faint); display: flex; align-items: center; gap: 6px; }
.kpi .kv { font-family: var(--display); font-weight: 600; font-size: 23px; letter-spacing: -0.03em; margin-top: 7px; }
.kpi .kd { font-size: 11px; margin-top: 4px; font-weight: 600; }
.kpi .kd.up { color: var(--emerald); } .kpi .kd.down { color: #ff6b6b; }

.dash-row { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; flex: 1; min-height: 0; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; }
.panel-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.panel-h h5 { font-size: 13px; font-weight: 700; }
.panel-h .leg { display: flex; gap: 12px; font-size: 11px; color: var(--text-faint); }
.panel-h .leg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }

.chart { position: relative; flex: 1; min-height: 150px; }
.chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart .gline { fill: none; stroke-width: 2; }
.chart .garea { opacity: 0.16; }
.chart-x { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--text-faint); margin-top: 8px; }

/* agent activity feed */
.feed { gap: 0; overflow: hidden; }
.feed-list { display: flex; flex-direction: column; gap: 9px; overflow: hidden; flex: 1; }
.feed-item { display: flex; gap: 11px; padding: 10px 11px; border-radius: 11px; background: rgba(255,255,255,0.022); border: 1px solid var(--border); animation: feedIn .5s cubic-bezier(.2,.8,.2,1); }
html[data-theme="light"] .feed-item { background: rgba(255,255,255,0.6); }
@keyframes feedIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.feed-ic { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid var(--accent-line); }
.feed-ic svg { width: 15px; height: 15px; stroke: var(--accent-bright); fill: none; stroke-width: 1.8; }
.feed-ic.ok { background: color-mix(in oklab, var(--emerald) 14%, transparent); border-color: color-mix(in oklab, var(--emerald) 40%, transparent); }
.feed-ic.ok svg { stroke: var(--emerald); }
.feed-tx { min-width: 0; flex: 1; }
.feed-tx b { font-size: 12.5px; font-weight: 600; display: block; }
.feed-tx span { font-size: 11.5px; color: var(--text-faint); }
.feed-tx .ag { color: var(--accent-bright); font-weight: 600; }
.feed-time { font-family: var(--mono); font-size: 10px; color: var(--text-faint); flex-shrink: 0; }

/* workflow approval strip */
.wf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; align-items: center; margin-top: 2px; }
.wf-step { position: relative; text-align: center; padding: 0 6px; }
.wf-node { width: 38px; height: 38px; border-radius: 11px; margin: 0 auto 9px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--text-faint); transition: all .4s; }
.wf-node svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.wf-step.done .wf-node { background: color-mix(in oklab, var(--emerald) 16%, transparent); border-color: var(--emerald); color: var(--emerald); }
.wf-step.active .wf-node { background: var(--accent-soft); border-color: var(--accent-bright); color: var(--accent-bright); box-shadow: 0 0 0 4px var(--accent-soft); }
.wf-step b { font-size: 11.5px; font-weight: 600; display: block; }
.wf-step span { font-size: 10px; color: var(--text-faint); }
.wf-step::after { content: ""; position: absolute; top: 19px; left: calc(50% + 28px); right: calc(-50% + 28px); height: 2px; background: var(--border); }
.wf-step:last-child::after { display: none; }
.wf-step.done::after { background: var(--emerald); }

.platform-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.pf { display: flex; gap: 13px; align-items: flex-start; }
.pf-ic { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid var(--accent-line); }
.pf-ic svg { width: 20px; height: 20px; stroke: var(--accent-bright); fill: none; stroke-width: 1.8; }
.pf b { font-size: 15px; font-weight: 700; display: block; margin-bottom: 4px; }
.pf p { font-size: 13.5px; color: var(--text-dim); }

/* ---------- case study / results ---------- */
.results { padding: 120px 0; }
.res-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.res-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.res-stat { padding: 28px 26px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.res-stat .rv { font-family: var(--display); font-weight: 600; font-size: clamp(34px, 4.6vw, 52px); letter-spacing: -0.04em; line-height: 1; background: linear-gradient(120deg, var(--accent-bright), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.res-stat .rl { font-size: 13.5px; color: var(--text-dim); margin-top: 12px; }
.quote { padding: 36px 34px; border-radius: 22px; background: linear-gradient(180deg, var(--accent-soft), transparent); border: 1px solid var(--accent-line); }
.quote .qm { font-family: var(--display); font-size: 60px; line-height: 0.6; color: var(--accent-line); }
.quote blockquote { font-size: clamp(17px, 1.9vw, 22px); font-weight: 500; line-height: 1.45; letter-spacing: -0.02em; margin: 6px 0 24px; }
.quote .qby { display: flex; align-items: center; gap: 13px; }
.qav { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(140deg, var(--accent-bright), var(--accent-2)); display: grid; place-items: center; font-weight: 700; color: #05060a; font-size: 16px; }
.qby b { font-size: 14.5px; display: block; } .qby span { font-size: 12.5px; color: var(--text-faint); }

/* ---------- pricing ---------- */
.pricing { padding: 120px 0; }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.price-card { position: relative; padding: 32px 30px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; transition: transform .35s, border-color .35s; }
.price-card:hover { transform: translateY(-4px); border-color: var(--accent-line); }
.price-card.feature { background: linear-gradient(180deg, var(--accent-soft), rgba(10,12,16,.18)); border-color: var(--accent-line); box-shadow: 0 40px 100px -55px var(--glow); }
.price-tag { position: absolute; top: -12px; left: 30px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #05060a; background: linear-gradient(180deg, var(--accent-bright), var(--accent)); padding: 5px 13px; border-radius: 100px; font-weight: 700; }
.price-card h3 { font-size: 19px; font-weight: 700; }
.price-card .pdesc { font-size: 13.5px; color: var(--text-dim); margin: 8px 0 22px; min-height: 40px; }
.price-amount { display: flex; align-items: baseline; gap: 7px; margin-bottom: 6px; }
.price-amount .amt { font-family: var(--display); font-weight: 600; font-size: 40px; letter-spacing: -0.04em; }
.price-amount .per { font-size: 13px; color: var(--text-faint); }
.price-note { font-size: 12px; color: var(--text-faint); margin-bottom: 24px; }
.price-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; flex: 1; }
.price-list li { display: flex; gap: 11px; font-size: 14px; color: var(--text-dim); align-items: flex-start; }
.price-list li svg { width: 17px; height: 17px; stroke: var(--accent-bright); fill: none; stroke-width: 2.2; flex-shrink: 0; margin-top: 2px; }
.price-card .btn { width: 100%; justify-content: center; }

/* ---------- demo form ---------- */
.demo { padding: 120px 0; }
.demo-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start; }
.demo-points { list-style: none; display: flex; flex-direction: column; gap: 20px; margin-top: 30px; }
.demo-points li { display: flex; gap: 15px; align-items: flex-start; }
.demo-points .dp-ic { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid var(--accent-line); }
.demo-points .dp-ic svg { width: 21px; height: 21px; stroke: var(--accent-bright); fill: none; stroke-width: 1.8; }
.demo-points b { font-size: 15.5px; display: block; margin-bottom: 3px; }
.demo-points p { font-size: 13.5px; color: var(--text-dim); }

.form-card { padding: 34px; border-radius: var(--radius-lg); background: var(--surface-2); border: 1px solid var(--border-strong); backdrop-filter: blur(12px); }
.fld { margin-bottom: 18px; }
.fld label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--text-dim); }
.fld label .req { color: var(--accent-bright); }
.fld input, .fld select, .fld textarea {
  width: 100%; font-family: inherit; font-size: 14.5px; color: var(--text);
  background: rgba(0,0,0,0.22); border: 1px solid var(--border); border-radius: 11px;
  padding: 13px 15px; transition: border-color .2s, box-shadow .2s, background .2s;
}
html[data-theme="light"] .fld input, html[data-theme="light"] .fld select, html[data-theme="light"] .fld textarea { background: rgba(255,255,255,0.7); }
.fld textarea { resize: vertical; min-height: 92px; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--text-faint); }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--accent-bright); box-shadow: 0 0 0 3px var(--accent-soft); }
.fld.invalid input, .fld.invalid select, .fld.invalid textarea { border-color: #ff6b6b; }
.fld .err { font-size: 12px; color: #ff6b6b; margin-top: 6px; display: none; }
.fld.invalid .err { display: block; }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-card .btn { width: 100%; justify-content: center; margin-top: 6px; }
.form-ok { display: none; text-align: center; padding: 24px 0; }
.form-ok.show { display: block; animation: feedIn .5s; }
.form-ok .ok-ic { width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 18px; display: grid; place-items: center; background: color-mix(in oklab, var(--emerald) 16%, transparent); border: 1px solid var(--emerald); }
.form-ok .ok-ic svg { width: 30px; height: 30px; stroke: var(--emerald); fill: none; stroke-width: 2.4; }
.form-ok h3 { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.form-ok p { color: var(--text-dim); font-size: 14.5px; }

/* ---------- FAQ ---------- */
.faq { padding: 120px 0; }
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 4px; text-align: left; font-size: clamp(16px, 1.8vw, 19px); font-weight: 600; letter-spacing: -0.01em; transition: color .2s; }
.faq-q:hover { color: var(--accent-bright); }
.faq-q .pm { width: 26px; height: 26px; flex-shrink: 0; position: relative; }
.faq-q .pm::before, .faq-q .pm::after { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 2px; background: var(--accent-bright); border-radius: 2px; transform: translate(-50%,-50%); transition: transform .3s; }
.faq-q .pm::after { transform: translate(-50%,-50%) rotate(90deg); }
.faq-item.open .pm::after { transform: translate(-50%,-50%) rotate(0); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.2,.8,.2,1); }
.faq-a p { padding: 0 4px 24px; color: var(--text-dim); font-size: 15px; max-width: 660px; }

/* ---------- magnetic cursor ---------- */
.cursor-glow { position: fixed; top: 0; left: 0; width: 460px; height: 460px; border-radius: 50%; pointer-events: none; z-index: 1; transform: translate(-50%,-50%); background: radial-gradient(circle, var(--accent-soft), transparent 62%); opacity: 0; transition: opacity .4s; mix-blend-mode: screen; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .dash { grid-template-columns: 1fr; }
  .dash-side { display: none; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .dash-row { grid-template-columns: 1fr; }
  .platform-feats { grid-template-columns: 1fr; gap: 22px; }
  .res-grid { grid-template-columns: 1fr; gap: 36px; }
  .price-grid { grid-template-columns: 1fr; }
  .demo-grid { grid-template-columns: 1fr; gap: 36px; }
  .win { transform: none; }
}
@media (max-width: 600px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .wf { grid-template-columns: 1fr 1fr; gap: 18px 0; }
  .fld-row { grid-template-columns: 1fr; }
  .res-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .nav-util .lang-toggle { display: none; }
}