/* assets/css/itce-conversion-engine.css
   Intent Tale - ROI & Proof Generator
   Fully scoped to .itce-root
*/

.itce-root{
  --it-purple: var(--it-purple, #4A154B);
  --it-blue: var(--it-blue, #64C3EB);
  --it-red: var(--it-red, #CE375C);
  --it-yellow: var(--it-yellow, #ECB22E);
  --it-green: var(--it-green, #5BB381);

  --surface: var(--surface, #ffffff);
  --ink: var(--ink, #1e293b);
  --ink2: var(--ink2, #64748b);
  --md-outline: var(--md-outline, #e2e8f0);

  --it-font-body: var(--it-font-body, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  --it-font-display: var(--it-font-display, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);

  font-family: var(--it-font-body);
  color: var(--ink);
}

.itce-root, .itce-root *{ box-sizing:border-box; }
.itce-root img{ max-width:100%; height:auto; display:block; }

.itce-app{
  padding: 16px;
  border-radius: 26px;
  background:
    radial-gradient(1100px 600px at 10% 0%, rgba(100,195,235,.18), transparent 65%),
    radial-gradient(900px 520px at 95% 10%, rgba(74,21,75,.16), transparent 60%),
    linear-gradient(180deg,#f8fafc,#eef2f7);
}

/* Header */
.itce-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 10px 6px 18px;
  margin-bottom: 18px;
}

.itce-kicker{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 8px;
}
.itce-mark{
  width:32px;
  height:32px;
  border-radius:10px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background: var(--it-purple);
  color:#fff;
  border:1px solid rgba(0,0,0,.08);
}
.itce-logo{ width: 82%; height: 82%; object-fit: contain; }
.itce-mark-fallback{
  display:none;
  font-family: var(--it-font-display);
  font-weight: 900;
  font-size: 11px;
}
.itce-kicker-text{
  font-size: 11px;
  font-family: var(--it-font-display);
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(100,116,139,.75);
}

.itce-h1{
  margin:0;
  font-family: var(--it-font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 38px;
  line-height: 1.05;
  color: #0f172a;
}

.itce-head-right{ display:flex; gap:10px; }

.itce-btn{
  appearance:none;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.82);
  border-radius: 999px;
  padding: 12px 16px;
  font-family: var(--it-font-display);
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  transition: transform .08s ease, background .15s ease, box-shadow .15s ease;
}
.itce-btn:hover{ background: rgba(255,255,255,.98); }
.itce-btn:active{ transform: translateY(1px); }

.itce-btn-dark{
  background: #0f172a;
  color: #fff !important;
  border-color: rgba(0,0,0,.20);
}
.itce-btn-dark:hover{ background: #000; }
.itce-btn-dark[aria-disabled="true"]{
  opacity: .55;
  cursor: not-allowed;
}

/* Layout */
.itce-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 1024px){
  .itce-grid{
    grid-template-columns: 360px 1fr;
    gap: 22px;
    align-items:start;
  }
}

/* Cards */
.itce-card{
  background: rgba(255,255,255,.86);
  border: 1px solid var(--md-outline);
  border-radius: 28px;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.05);
  backdrop-filter: blur(10px);
}
.itce-card-pad{ padding: 22px; }

.itce-left{ display:flex; flex-direction:column; gap: 14px; }
.itce-right{ display:flex; flex-direction:column; gap: 16px; }

/* Inputs */
.itce-card-head{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 18px;
}
.itce-rail{
  width: 10px;
  height: 26px;
  border-radius: 999px;
  background: var(--it-purple);
}
.itce-h2{
  margin:0;
  font-family: var(--it-font-display);
  font-weight: 900;
  font-size: 16px;
}

.itce-fields{ display:flex; flex-direction:column; gap: 16px; }

.itce-label{
  display:block;
  font-size: 11px;
  font-family: var(--it-font-display);
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(100,116,139,.85);
  margin-bottom: 10px;
}

.itce-input{
  width: 100%;
  padding: 14px 14px;
  border: none;
  border-radius: 18px;
  background: rgba(241,245,249,.95);
  outline: none;
  font-size: 18px;
  font-weight: 900;
  font-family: var(--it-font-display);
}
.itce-input:focus{
  box-shadow: 0 0 0 4px rgba(100,195,235,.26);
}

.itce-range{
  width: 100%;
  accent-color: var(--it-purple);
}
.itce-range-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top: 10px;
  font-family: var(--it-font-display);
  font-weight: 900;
  font-size: 13px;
}
.itce-range-val{ color: #0f172a; }
.itce-range-hint{ color: rgba(100,116,139,.85); }

/* Pro tip */
.itce-tip{
  border-radius: 28px;
  padding: 18px 18px;
  background: var(--it-purple);
  color: #fff;
}
.itce-tip-h{
  margin:0 0 6px;
  font-family: var(--it-font-display);
  font-weight: 900;
  font-size: 14px;
}
.itce-tip-p{
  margin:0;
  font-size: 13px;
  line-height: 1.55;
  opacity: .88;
}

/* Result */
.itce-result{ position:relative; overflow:hidden; }
.itce-result-pad{ padding: 28px; }
.itce-watermark{
  position:absolute;
  top: 10px;
  right: 18px;
  font-family: var(--it-font-display);
  font-weight: 900;
  font-size: 120px;
  color: rgba(15,23,42,.04);
  user-select:none;
  pointer-events:none;
}
.itce-tag{
  display:inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(16,185,129,.16);
  color: rgba(21,128,61,.92);
  font-size: 11px;
  font-family: var(--it-font-display);
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.itce-result-h{
  margin:0;
  font-family: var(--it-font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 44px;
  line-height: 1.05;
  color: #0f172a;
}
@media (min-width: 768px){
  .itce-result-h{ font-size: 52px; }
}

.itce-gradient{
  background: linear-gradient(135deg, var(--it-purple), var(--it-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.itce-result-p{
  margin: 10px 0 0;
  font-size: 18px;
  line-height: 1.45;
  color: rgba(100,116,139,.92);
  max-width: 720px;
}

/* Metrics */
.itce-metrics{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 18px;
}
@media (min-width: 640px){
  .itce-metrics{ grid-template-columns: 1fr 1fr; }
}
.itce-metric-card{
  background: #fff;
  border: 1px solid var(--md-outline);
  border-radius: 24px;
  padding: 16px;
  transition: all .25s ease;
}
.itce-metric-card:hover{
  border-color: rgba(100,195,235,.75);
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.05);
}
.itce-metric-k{
  font-size: 11px;
  font-family: var(--it-font-display);
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(100,116,139,.8);
  margin-bottom: 6px;
}
.itce-metric-v{
  font-family: var(--it-font-display);
  font-weight: 900;
  font-size: 34px;
  color: #0f172a;
}
.itce-metric-accent{ color: var(--it-blue); }

/* Proof */
.itce-proof{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 768px){
  .itce-proof{ grid-template-columns: 1fr 1fr; }
}

.itce-proof-left{
  background: #0f172a;
  color: #fff;
  border-radius: 28px;
  padding: 22px;
}
.itce-proof-k{
  font-size: 11px;
  font-family: var(--it-font-display);
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .55;
  margin-bottom: 12px;
}
.itce-proof-q{
  font-size: 22px;
  font-weight: 900;
  font-family: var(--it-font-display);
  line-height: 1.2;
  margin-bottom: 16px;
}
.itce-proof-cta{
  appearance:none;
  border:none;
  background: transparent;
  color: var(--it-blue);
  font-family: var(--it-font-display);
  font-weight: 900;
  cursor:pointer;
  display:inline-flex;
  gap: 10px;
  align-items:center;
  transition: gap .2s ease;
}
.itce-proof-cta:hover{ gap: 16px; }

.itce-proof-right-pad{ padding: 22px; }
.itce-testimonial{
  font-size: 16px;
  color: rgba(100,116,139,.92);
  font-style: italic;
  line-height: 1.55;
}
.itce-person{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-top: 16px;
}
.itce-avatar{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: rgba(148,163,184,.35);
}
.itce-person-name{
  font-family: var(--it-font-display);
  font-weight: 900;
  font-size: 13px;
  color: #0f172a;
}
.itce-person-role{
  font-size: 11px;
  color: rgba(100,116,139,.85);
}