/* ============================================================
   DITRO INFOTECH — interactive layer
   Hero FX, AI ask box, industry picker, estimator, command
   palette, chatbot extras. Loaded after theme.css.
   ============================================================ */

/* ---------- Scroll progress ---------- */
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- Nav search ---------- */
.nav-search {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  border-radius: 999px; padding: .4rem .55rem .4rem .8rem; font-size: .78rem; font-weight: 600;
  transition: border-color .2s, color .2s;
}
.nav-search:hover { border-color: var(--ink); color: var(--ink); }
.nav-search kbd, .cmdk kbd {
  font-family: 'JetBrains Mono', monospace; font-size: .6rem; letter-spacing: .04em;
  background: var(--paper-2); color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: .12rem .35rem;
}
@media (max-width: 991.98px) { .nav-search { align-self: flex-start; } .nav-search kbd { display: none; } }

/* ---------- Hero FX ---------- */
.hero--fx { position: relative; overflow: hidden; isolation: isolate; --mx: 70%; --my: 30%; }
.hero--fx::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(520px circle at var(--mx) var(--my), rgba(215,26,33,.22), transparent 60%),
    radial-gradient(800px circle at 100% 0%, rgba(215,26,33,.12), transparent 55%);
  transition: background .1s;
}
.hero__grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%);
}
.hero .h-display { font-size: clamp(2.4rem, 5vw, 4.3rem); }

.rotator { display: inline-block; color: var(--red); position: relative; }
.rotator__word { display: inline-block; transition: opacity .3s, transform .3s cubic-bezier(.22,1,.36,1), filter .3s; }
.rotator__word.is-out { opacity: 0; transform: translateY(.35em); filter: blur(4px); }
.rotator::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .08em; background: var(--red); opacity: .35; border-radius: 2px; }

.hero-trust { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin: 1.75rem 0 1rem; padding: 0; }
.hero-trust li { display: inline-flex; align-items: center; gap: .45rem; font-size: .86rem; color: #c8c1b2; }
.hero-trust svg { width: 16px; height: 16px; color: var(--red); }

/* ---------- Ask card (hero) ---------- */
.ask-card {
  position: relative;
  background: linear-gradient(180deg, rgba(36,31,24,.92), rgba(22,19,15,.94));
  border: 1px solid #342e24; border-radius: 1rem; padding: 1.4rem;
  box-shadow: 0 50px 100px -50px rgba(0,0,0,.8), 0 0 0 1px rgba(215,26,33,.06) inset;
  backdrop-filter: blur(8px);
}
.ask-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(215,26,33,.7), transparent 35%, transparent 70%, rgba(215,26,33,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.ask-card__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: #8a8271; }
.ask-card__head .font-mono { font-size: .6rem; }
.ask-card__status { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 600; color: #ece6da; }
.ask-card__q { display: block; margin: 1.1rem 0 .7rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: #f6f2e7; }
.ask-card__field { position: relative; }
.ask-card textarea {
  width: 100%; resize: none; background: #0f0d0a; border: 1px solid #342e24; color: #f0ebdf;
  border-radius: .7rem; padding: .85rem 3.6rem .85rem .95rem; font-size: .95rem; outline: none; transition: border-color .2s, box-shadow .2s;
}
.ask-card textarea::placeholder { color: #6f685a; }
.ask-card textarea:focus { border-color: var(--red); box-shadow: 0 0 0 .2rem rgba(215,26,33,.18); }
.ask-card__field .btn { position: absolute; right: .55rem; bottom: .6rem; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: .55rem; }
.ask-card__chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.ask-card__foot { margin-top: 1rem; font-size: .8rem; color: #8a8271; }
.ask-card__foot a { color: #ece6da; }

.pulse-dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3ec46d; }
.pulse-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { to { transform: scale(2.8); opacity: 0; } }

.chip {
  border: 1px solid #3a352b; background: rgba(255,255,255,.03); color: #c8c1b2;
  border-radius: 999px; padding: .4rem .75rem; font-size: .76rem; line-height: 1.3; text-align: left;
  transition: border-color .2s, color .2s, background .2s, transform .2s;
}
.chip:hover { border-color: var(--red); color: #fff; background: rgba(215,26,33,.12); transform: translateY(-1px); }

/* ---------- Card glow (follows pointer) ---------- */
a.card { position: relative; overflow: hidden; }
a.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(320px circle at var(--gx, 50%) var(--gy, 50%), rgba(215,26,33,.09), transparent 60%);
}
a.card:hover::after { opacity: 1; }
.section-dark a.card::after { background: radial-gradient(320px circle at var(--gx, 50%) var(--gy, 50%), rgba(215,26,33,.18), transparent 60%); }

/* ---------- Industry picker ---------- */
.industry-tabs { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .4rem; margin-bottom: 1.75rem; scrollbar-width: thin; }
.industry-tab {
  flex: none; display: inline-flex; align-items: center; gap: .55rem;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  border-radius: 999px; padding: .65rem 1.1rem; font-size: .86rem; font-weight: 600;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.industry-tab svg { width: 17px; height: 17px; color: var(--red); transition: color .2s; }
.industry-tab:hover { border-color: var(--ink); transform: translateY(-1px); }
.industry-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.industry-tab[aria-selected="true"] svg { color: #ff6b70; }
.industry-panel.is-in { animation: panelIn .45s cubic-bezier(.22,1,.36,1); }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } }

.industry-stuck { background: var(--charcoal); color: #d8d1c4; border-radius: var(--bs-border-radius-lg); padding: 1.6rem; }
.industry-stuck .font-mono { color: #ff6b70; }
.industry-stuck li { display: flex; gap: .7rem; font-size: .95rem; line-height: 1.5; }
.industry-stuck li svg { flex: none; width: 18px; height: 18px; color: var(--red); margin-top: 2px; }
.industry-build { flex-direction: row; align-items: center; gap: 1rem; }
.industry-build__num { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--red); font-size: .85rem; }

/* ---------- Estimator ---------- */
.estimator { scroll-margin-top: 90px; border-radius: 1.1rem; }
.estimator.is-flash { animation: flash 1.4s ease-out; }
@keyframes flash { 0% { box-shadow: 0 0 0 0 rgba(215,26,33,.45); } 100% { box-shadow: 0 0 0 28px rgba(215,26,33,0); } }

.est-step { margin-bottom: 2rem; }
.est-step legend { display: flex; align-items: center; gap: .7rem; font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 1rem; }
.est-step__n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; font-size: .78rem; font-family: 'JetBrains Mono', monospace; }

.est-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
@media (max-width: 575.98px) { .est-types { grid-template-columns: repeat(2, 1fr); } }
.est-type input, .est-feature input, .seg input { position: absolute; opacity: 0; pointer-events: none; }
.est-type__box {
  position: relative; overflow: hidden; height: 100%;
  display: flex; flex-direction: column; gap: .6rem; padding: 1rem;
  border: 1px solid var(--line); background: var(--surface); border-radius: .75rem;
  font-weight: 700; font-size: .9rem; cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s;
}
.est-type__box svg { width: 22px; height: 22px; color: var(--muted); transition: color .2s; }
.est-type__box:hover { border-color: var(--ink); transform: translateY(-2px); }
.est-type input:checked + .est-type__box { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 18px 40px -26px rgba(215,26,33,.6); background: #fff7f5; }
.est-type input:checked + .est-type__box svg { color: var(--red); }
.est-type input:focus-visible + .est-type__box, .est-feature input:focus-visible + span, .seg input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }

.est-size-out { font-weight: 900; font-size: 1.4rem; letter-spacing: -.02em; }
.est-range { --fill: 30%; height: 2rem; }
.est-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--red) var(--fill), var(--line) var(--fill)); }
.est-range::-moz-range-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--red) var(--fill), var(--line) var(--fill)); }
.est-range::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -8px; background: #fff; border: 3px solid var(--red); box-shadow: 0 4px 12px rgba(215,26,33,.35); }
.est-range::-moz-range-thumb { width: 22px; height: 22px; background: #fff; border: 3px solid var(--red); }
.est-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 .25rem rgba(215,26,33,.2); }

.est-features { display: flex; flex-wrap: wrap; gap: .55rem; }
.est-feature span {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: .55rem .95rem;
  font-size: .85rem; font-weight: 600; color: var(--ink-soft); transition: all .2s;
}
.est-feature span svg { width: 16px; height: 16px; color: var(--muted); }
.est-feature span:hover { border-color: var(--ink); }
.est-feature input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.est-feature input:checked + span svg { color: #ff6b70; }

.seg { display: flex; background: var(--paper-2); border: 1px solid var(--line); border-radius: .6rem; padding: 3px; }
.seg label { flex: 1; }
.seg span { display: block; text-align: center; padding: .55rem .4rem; border-radius: .45rem; font-size: .8rem; font-weight: 700; color: var(--muted); cursor: pointer; transition: all .2s; }
.seg input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px rgba(40,30,18,.12); }

.est-summary {
  position: sticky; top: 90px;
  background: var(--charcoal); color: #d8d1c4; border-radius: 1rem; padding: 1.6rem;
  box-shadow: 0 50px 90px -50px rgba(0,0,0,.6);
  background-image: radial-gradient(400px circle at 100% 0%, rgba(215,26,33,.22), transparent 60%);
}
.est-summary > .d-flex .font-mono { color: #9c9384; }
.currency-toggle { display: flex; border: 1px solid #3a352b; border-radius: 999px; padding: 2px; }
.currency-toggle button { background: 0; border: 0; color: #9c9384; font-size: .7rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px; }
.currency-toggle button[aria-pressed="true"] { background: var(--red); color: #fff; }
.est-price { font-weight: 900; font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -.03em; color: #fff; margin-top: 1rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.est-weeks { display: inline-flex; align-items: center; gap: .5rem; margin-top: .6rem; font-weight: 600; color: #ece6da; }
.est-weeks svg { width: 18px; height: 18px; color: var(--red); }
.est-plan { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px dashed #3a352b; }
.est-plan .font-mono { color: #9c9384; }
.plan-row { margin-bottom: .95rem; }
.plan-row__top { display: flex; justify-content: space-between; gap: 1rem; font-size: .86rem; }
.plan-row__top b { color: #f0ebdf; }
.plan-row__top span { font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: #ff8a8e; letter-spacing: .04em; }
.plan-row__bar { height: 6px; background: #2c2820; border-radius: 999px; margin: .4rem 0; overflow: hidden; }
.plan-row__bar i { display: block; height: 100%; background: var(--red); border-radius: 999px; transition: margin-left .45s cubic-bezier(.22,1,.36,1), width .45s cubic-bezier(.22,1,.36,1); }
.plan-row small { color: #9c9384; font-size: .76rem; }
.est-summary .btn-outline-dark { --bs-btn-color: #ece6da; --bs-btn-border-color: #5a5344; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--red); }
.est-note { font-size: .74rem; color: #8a8271; margin-top: .9rem; text-align: center; }
@media (max-width: 991.98px) { .est-summary { position: static; } }

/* ---------- Case study image ---------- */
.case-img { display: block; border-radius: .75rem; overflow: hidden; border: 1px solid var(--line); }
.case-img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.case-img:hover img { transform: scale(1.04); }

/* ---------- FAQ accordion ---------- */
.accordion { --bs-accordion-bg: var(--surface); --bs-accordion-border-color: var(--line); --bs-accordion-active-bg: var(--surface); --bs-accordion-active-color: var(--red); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(215,26,33,.15); }
.accordion-button { font-weight: 700; }

/* ---------- Chatbot extras ---------- */
.chatbot { display: flex; flex-direction: column; align-items: flex-end; gap: .7rem; }
.chatbot__wa { width: 48px; height: 48px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(37,211,102,.35); transition: transform .2s; }
.chatbot__wa:hover { transform: scale(1.06); color: #fff; }
.chatbot__toggle { position: relative; transition: transform .2s; }
.chatbot__toggle:hover { transform: scale(1.05); }
.chatbot__toggle::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--red); animation: ring 2.6s ease-out infinite; }
.chatbot__toggle[aria-expanded="true"]::before { display: none; }
@keyframes ring { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
.chatbot__panel { bottom: 0; right: 64px; }
@media (max-width: 575.98px) { .chatbot__panel { right: 0; bottom: 130px; position: fixed; left: 1rem; width: auto; right: 1rem; } }
.chatbot__panel header .font-mono { display: inline-flex; align-items: center; gap: .4rem; }
.chatbot__chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: .7rem .9rem; background: var(--paper-2); border-top: 1px dashed var(--line); }
.chatbot__chips .chip { border-color: var(--line); background: var(--surface); color: var(--ink-soft); }
.chatbot__chips .chip:hover { color: var(--red); border-color: var(--red); background: #fff; }
.chatbot__messages p.is-typing { display: inline-flex; gap: 4px; padding: .8rem .9rem; }
.chatbot__messages p.is-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: bounce 1s infinite; }
.chatbot__messages p.is-typing span:nth-child(2) { animation-delay: .15s; }
.chatbot__messages p.is-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.chatbot__nudge {
  position: relative; max-width: 250px; background: var(--surface); border: 1px solid var(--line); border-radius: .9rem .9rem .2rem .9rem;
  padding: .85rem 1rem; box-shadow: 0 24px 50px -24px rgba(40,30,18,.45); cursor: pointer; font-size: .84rem; line-height: 1.45;
  animation: panelIn .5s cubic-bezier(.22,1,.36,1);
}
.chatbot__nudge b { display: block; margin-bottom: .2rem; }
.chatbot__nudge span { color: var(--ink-soft); }
.chatbot__nudge-close { position: absolute; top: .3rem; right: .45rem; border: 0; background: 0; color: var(--muted); font-size: 1.1rem; line-height: 1; }

/* ---------- Command palette ---------- */
.cmdk { position: fixed; inset: 0; z-index: 2000; display: grid; justify-items: center; align-items: start; padding: 12vh 1rem 1rem; }
.cmdk__backdrop { position: absolute; inset: 0; background: rgba(23,20,16,.55); backdrop-filter: blur(4px); animation: fadeIn .2s; }
.cmdk__panel {
  position: relative; width: min(620px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 1rem;
  box-shadow: 0 60px 120px -40px rgba(0,0,0,.55); overflow: hidden; animation: panelIn .25s cubic-bezier(.22,1,.36,1);
}
@keyframes fadeIn { from { opacity: 0; } }
.cmdk__search { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); }
.cmdk__search svg { width: 18px; height: 18px; color: var(--muted); }
.cmdk__search input { flex: 1; border: 0; outline: 0; background: 0; font-size: 1.05rem; }
.cmdk__list { list-style: none; margin: 0; padding: .4rem; max-height: min(420px, 55vh); overflow-y: auto; }
.cmdk__group { font-family: 'JetBrains Mono', monospace; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: .7rem .7rem .35rem; }
.cmdk__list [role="option"] { display: flex; align-items: center; gap: .75rem; padding: .65rem .7rem; border-radius: .55rem; cursor: pointer; font-size: .92rem; font-weight: 600; }
.cmdk__list [role="option"] svg { width: 17px; height: 17px; color: var(--muted); }
.cmdk__list [role="option"] span { flex: 1; }
.cmdk__list [role="option"] .cmdk__enter { opacity: 0; }
.cmdk__list [role="option"][aria-selected="true"] { background: var(--paper-2); color: var(--red); }
.cmdk__list [role="option"][aria-selected="true"] svg { color: var(--red); }
.cmdk__list [role="option"][aria-selected="true"] .cmdk__enter { opacity: 1; }
.cmdk__empty { padding: 1.5rem; text-align: center; color: var(--muted); font-size: .9rem; }
.cmdk__foot { display: flex; gap: 1.2rem; padding: .6rem 1.1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .58rem; }
body.cmdk-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .pulse-dot::after, .chatbot__toggle::before { animation: none; }
  .industry-panel.is-in, .cmdk__panel, .chatbot__nudge { animation: none; }
}
.est-type, .est-feature, .seg label { position: relative; display: block; }
.est-feature { display: inline-block; }