/* =====================================================================
   AIsion — Site: hero, page sections, decorative elements
   ===================================================================== */

/* ---------------- Hero ---------------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  background: var(--grad-ink); color: var(--on-dark); overflow: hidden;
  padding-top: calc(var(--nav-h) + clamp(.5rem, 2vh, 1.5rem));
  padding-bottom: clamp(2.5rem, 6vh, 4rem); /* room for the scroll cue */
}
.hero-canvas { position:absolute; inset:0; z-index:0; opacity:.9; }
.hero::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(60% 50% at 78% 12%, rgba(91,61,245,.32), transparent 60%),
    radial-gradient(50% 45% at 12% 88%, rgba(32,199,240,.18), transparent 60%);
}
.hero .container { position: relative; z-index: 2; }
.hero-grid { display:grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items:center; }
@media (max-width: 980px){ .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* Headline scales to the SHORTER of width/height so it always fits one screen */
.hero h1 { color:#fff; font-size: clamp(2.4rem, min(6.2vw, 8.2vh), 5.4rem); line-height: 1.0; margin: clamp(.7rem,1.8vh,1.3rem) 0 clamp(.8rem,2vh,1.4rem); }
.hero h1 .rotator { display:block; }
.hero-sub { font-size: clamp(1rem, .92rem + .35vw, 1.3rem); color: var(--on-dark-body); max-width: 46ch; line-height: 1.55; }
.hero-cta { display:flex; gap:.9rem; flex-wrap:wrap; margin-top: clamp(1.1rem, 2.4vh, 2rem); }
.hero-meta { display:flex; gap: clamp(1.4rem, 3vw, 2rem); margin-top: clamp(1.2rem, 3vh, 2.6rem); flex-wrap:wrap; }
.hero-meta .stat .num { font-size: clamp(1.5rem,1.2rem+1.2vw,2.1rem); }
.hero-meta .stat .lbl { font-size:.82rem; }

/* Keep the right-hand console mock from driving hero height on laptops */
.hero .console-mock { max-height: min(72vh, 620px); overflow: hidden; }

/* Short-viewport tuning (typical laptops): compress spacing + hide scroll cue */
@media (max-height: 820px) {
  .hero-sub { max-width: 44ch; }
  .hero-meta { gap: 1.5rem; }
  .hero .scroll-cue { display: none; }
}
@media (max-height: 700px) {
  .hero h1 { font-size: clamp(2rem, 7.4vh, 3.4rem); }
  .hero-sub { font-size: 1rem; }
}

/* rotating word */
.rotator-word { display:inline-block; position:relative; }
.rotator-word .w {
  background: var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
  display:inline-block;
}

/* scroll cue */
.scroll-cue { position:absolute; bottom: 26px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:.5rem; color: var(--on-dark-muted); font-family:var(--font-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; }
.scroll-cue .mouse { width:24px; height:38px; border:1.5px solid var(--on-dark-line-2); border-radius:12px; position:relative; }
.scroll-cue .mouse::before { content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%); width:3px; height:7px; border-radius:2px; background: var(--violet-300); animation: mscroll 1.6s var(--ease-inout) infinite; }
@keyframes mscroll { 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 70%{opacity:1;transform:translate(-50%,10px)} 100%{opacity:0;transform:translate(-50%,10px)} }

/* ---------------- Interior page hero ---------------- */
.page-hero { position:relative; background:var(--grad-ink); color:var(--on-dark); overflow:hidden;
  padding: calc(var(--nav-h) + clamp(3rem,6vw,5.5rem)) 0 clamp(3rem,6vw,5rem); }
.page-hero canvas { position:absolute; inset:0; z-index:0; opacity:.6; }
.page-hero::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(55% 60% at 82% 0%, rgba(91,61,245,.3), transparent 62%),
              radial-gradient(45% 50% at 6% 100%, rgba(32,199,240,.14), transparent 60%); }
.page-hero .container { position:relative; z-index:2; }
.page-hero h1 { color:#fff; margin:1.1rem 0 1.2rem; max-width: 18ch; }
.page-hero .lead { max-width: 60ch; color: var(--on-dark-body); }
.page-hero .hero-cta { margin-top: 2rem; }
.crumb { font-family:var(--font-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color: var(--on-dark-muted); }
.crumb a { color: var(--violet-300); } .crumb a:hover { color:#fff; }

/* numbered big section markers */
.sec-num { font-family:var(--font-mono); font-size:.8rem; letter-spacing:.16em; color:var(--violet-500); text-transform:uppercase; }
.on-dark .sec-num { color: var(--violet-300); }

/* mini kpi row */
.kpi-row { display:flex; flex-wrap:wrap; gap: 2.4rem; }
.kpi-row .stat .num { font-size: clamp(1.8rem,1.3rem+1.6vw,2.6rem); }

/* feature list within splits */
.flist { display:grid; gap:1rem; }
.flist .fitem { display:flex; gap:.85rem; align-items:flex-start; }
.flist .fitem .fi-ic { width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;background:var(--violet-100);color:var(--violet-600); }
.on-dark .flist .fitem .fi-ic { background: rgba(91,61,245,.16); color: var(--violet-300); }
.flist .fitem h4 { font-size:1.02rem; color:var(--text); margin-bottom:.15rem; }
.on-dark .flist .fitem h4 { color:#fff; }
.flist .fitem p { font-size:.92rem; color: var(--muted); }
.on-dark .flist .fitem p { color: var(--on-dark-muted); }

/* ---------------- Product console mock (hero right / product page) ---------------- */
.console-mock {
  background: linear-gradient(160deg, rgba(23,28,66,.92), rgba(11,15,44,.96));
  border: 1px solid var(--on-dark-line-2); border-radius: var(--r-lg);
  box-shadow: 0 40px 90px rgba(0,0,0,.55); overflow:hidden;
  transform: perspective(1600px) rotateY(-9deg) rotateX(3deg);
  transition: transform .6s var(--ease-out);
}
.console-mock:hover { transform: perspective(1600px) rotateY(-3deg) rotateX(1deg); }
.cm-bar { display:flex; align-items:center; gap:.5rem; padding:.75rem 1rem; border-bottom:1px solid var(--on-dark-line); background: rgba(0,0,0,.2); }
.cm-bar .dots { display:flex; gap:.4rem; }
.cm-bar .dots i { width:11px; height:11px; border-radius:50%; background: rgba(255,255,255,.18); }
.cm-bar .dots i:nth-child(1){ background:#F5646E } .cm-bar .dots i:nth-child(2){ background:#F5BD4F } .cm-bar .dots i:nth-child(3){ background:#5FCE7E }
.cm-bar .cm-title { font-family: var(--font-mono); font-size:.72rem; color: var(--on-dark-muted); letter-spacing:.06em; }
.cm-body { padding: 1.1rem; display:flex; flex-direction:column; gap:.8rem; }
.cm-msg { display:flex; gap:.7rem; align-items:flex-start; }
.cm-msg .av { width:30px; height:30px; border-radius:9px; flex:none; display:grid; place-items:center; font-size:.75rem; font-weight:700; }
.cm-msg .av.user { background: rgba(255,255,255,.1); color:#fff; }
.cm-msg .av.ai { background: var(--grad-brand); color:#fff; }
.cm-bubble { background: rgba(255,255,255,.05); border:1px solid var(--on-dark-line); border-radius: 12px; padding:.7rem .9rem; font-size:.85rem; color: var(--on-dark-body); line-height:1.5; }
.cm-bubble.ai { background: rgba(91,61,245,.12); border-color: rgba(122,99,248,.28); }
.cm-cite { display:inline-flex; align-items:center; gap:.35rem; font-family:var(--font-mono); font-size:.65rem; color: var(--cyan-400); background: rgba(32,199,240,.1); padding:.15rem .45rem; border-radius:6px; margin-top:.4rem; }
.typing { display:inline-flex; gap:3px; }
.typing i { width:6px; height:6px; border-radius:50%; background: var(--violet-300); animation: blink 1.2s infinite; }
.typing i:nth-child(2){ animation-delay:.2s } .typing i:nth-child(3){ animation-delay:.4s }
@keyframes blink { 0%,60%,100%{opacity:.25} 30%{opacity:1} }

/* ---------------- Pillars ---------------- */
.pillar { display:flex; flex-direction:column; height:100%; }
.pillar .num { font-family: var(--font-mono); font-size:.78rem; color: var(--faint); letter-spacing:.1em; }
.pillar h3 { margin:.9rem 0 .55rem; }
.pillar .tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:auto; padding-top:1.2rem; }
.pillar .tags span { font-family:var(--font-mono); font-size:.68rem; color: var(--muted); background: var(--bg-alt); border:1px solid var(--line); padding:.25rem .55rem; border-radius:6px; }
.on-dark .pillar .tags span { background: rgba(255,255,255,.04); border-color: var(--on-dark-line); color: var(--on-dark-muted); }

/* ---------------- Steps / process ---------------- */
.steps { counter-reset: step; display:grid; gap: 1.2rem; }
.step { display:grid; grid-template-columns: auto 1fr; gap:1.2rem; align-items:start; position:relative; }
.step .idx { counter-increment: step; width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; background: var(--grad-brand); color:#fff; box-shadow: var(--sh-violet); }
.step .idx::before { content:"0" counter(step); }
.step h4 { font-size:1.15rem; margin-bottom:.3rem; color: var(--text); }

/* horizontal process line variant */
.flow { display:grid; grid-template-columns: repeat(5,1fr); gap:1rem; position:relative; }
.flow::before { content:""; position:absolute; top:23px; left:8%; right:8%; height:2px; background: linear-gradient(90deg, var(--violet-500), var(--cyan-500)); opacity:.35; z-index:0; }
@media (max-width:820px){ .flow { grid-template-columns: 1fr 1fr; } .flow::before{ display:none; } }
.flow .node { position:relative; z-index:1; text-align:center; }
.flow .node .dot { width:48px; height:48px; margin:0 auto .9rem; border-radius:50%; display:grid; place-items:center; background: var(--surface); border:2px solid var(--violet-500); color: var(--violet-600); font-weight:700; font-family:var(--font-display); }
.on-dark .flow .node .dot { background: var(--ink-600); }
.flow .node h4 { font-size:1.02rem; margin-bottom:.3rem; }
.flow .node p { font-size:.86rem; }

/* ---------------- Industry tiles ---------------- */
.ind-tile { position:relative; overflow:hidden; padding: 1.6rem; border-radius: var(--r-lg); background: var(--surface); border:1px solid var(--line); transition: all var(--t-med) var(--ease-out); }
.ind-tile:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: rgba(91,61,245,.28); }
.ind-tile .ic-chip { margin-bottom:1rem; }
.ind-tile h3 { font-size:1.2rem; margin-bottom:.4rem; }
.ind-tile p { font-size:.92rem; color:var(--muted); }
.ind-tile .verticals { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:.74rem; color:var(--faint); }

/* ---------------- CTA band ---------------- */
.cta-band { position:relative; overflow:hidden; border-radius: var(--r-xl); padding: clamp(2.5rem,5vw,4.5rem); background: var(--grad-ink); color:#fff; text-align:center; }
.cta-band::before { content:""; position:absolute; inset:0; background: radial-gradient(50% 80% at 50% 0%, rgba(91,61,245,.4), transparent 70%); }
.cta-band > * { position:relative; z-index:1; }
.cta-band h2 { color:#fff; }
.cta-band .lead { color: var(--on-dark-body); margin: 1rem auto 2rem; max-width:56ch; }

/* ---------------- Bento grid ---------------- */
.bento { display:grid; grid-template-columns: repeat(3,1fr); grid-auto-rows: minmax(180px,auto); gap: 1.2rem; }
.bento .card { display:flex; flex-direction:column; }
.bento .span2 { grid-column: span 2; }
.bento .row2 { grid-row: span 2; }
@media (max-width: 900px){ .bento { grid-template-columns: 1fr 1fr; } .bento .span2 { grid-column: span 2; } .bento .row2{ grid-row: auto; } }
@media (max-width: 600px){ .bento { grid-template-columns: 1fr; } .bento .span2 { grid-column: auto; } }

/* ---------------- Accordion (FAQ) ---------------- */
.acc { border:1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow:hidden; }
.acc + .acc { margin-top: .8rem; }
.acc summary { list-style:none; cursor:pointer; padding: 1.15rem 1.4rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; font-family:var(--font-display); font-weight:600; color:var(--text); font-size:1.05rem; }
.acc summary::-webkit-details-marker { display:none; }
.acc summary .plus { flex:none; width:24px; height:24px; position:relative; transition: transform var(--t-med); }
.acc summary .plus::before, .acc summary .plus::after { content:""; position:absolute; background: var(--violet-500); border-radius:2px; }
.acc summary .plus::before { top:50%; left:0; right:0; height:2px; transform:translateY(-50%); }
.acc summary .plus::after { left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%); transition: transform var(--t-med); }
.acc[open] summary .plus::after { transform: translateX(-50%) scaleY(0); }
.acc .acc-body { padding: 0 1.4rem 1.3rem; color: var(--muted); }

/* ---------------- Pricing ---------------- */
.price-card { display:flex; flex-direction:column; height:100%; }
.price-card.featured { border-color: var(--violet-400); box-shadow: var(--sh-glow); position:relative; }
.price-card.featured::after { content:"Most adopted"; position:absolute; top:-1px; right:1.4rem; transform:translateY(-50%); background: var(--grad-brand); color:#fff; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; padding:.3rem .7rem; border-radius: var(--r-pill); }
.price-card .tier { font-family:var(--font-mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--violet-600); }
.price-card .price { font-family:var(--font-display); font-weight:700; font-size:2.4rem; margin:.6rem 0 .2rem; color:var(--text); }
.price-card .price small { font-size:.9rem; color:var(--muted); font-weight:400; }
.price-card ul { margin:1.4rem 0; display:grid; gap:.7rem; }
.price-card .btn { margin-top:auto; }

/* ---------------- Testimonial ---------------- */
.quote { font-family: var(--font-display); font-size: clamp(1.3rem,1rem+1.4vw,2rem); line-height:1.35; color: var(--text); letter-spacing:-.02em; }
.on-dark .quote { color:#fff; }
.quote-mark { font-family:var(--font-display); font-size:4rem; line-height:.5; color: var(--violet-400); opacity:.5; }

/* ---------------- Decorative blobs ---------------- */
.blob { position:absolute; border-radius:50%; filter: blur(80px); opacity:.5; z-index:0; pointer-events:none; }
.blob.v { background: rgba(91,61,245,.5); } .blob.c { background: rgba(32,199,240,.35); }

/* ---------------- Data lineage widget ---------------- */
.lineage-row { display:flex; align-items:center; gap:.9rem; padding:.9rem 1rem; background:#fff; border:1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-sm); }
.lineage-ic { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background: var(--violet-100); font-size:1.1rem; flex:none; }
.lineage-row strong { display:block; color: var(--text); font-size:.98rem; }
.lineage-row small { color: var(--muted); font-size:.82rem; }
.lineage-row div { flex:1; }
.lineage-tag { font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color: var(--violet-600); background: var(--violet-100); padding:.3rem .55rem; border-radius: var(--r-pill); border:1px solid rgba(91,61,245,.16); }
.lineage-tag.ok { color: var(--green-500); background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.22); }
.lineage-arrow { text-align:center; color: var(--violet-400); font-size:1.2rem; line-height:1; padding:.25rem 0; }

/* ---------------- Compliance badges ---------------- */
.cert { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.2rem;
  height:92px; border-radius: var(--r-md); background: var(--surface); border:1px solid var(--line);
  font-family:var(--font-display); font-weight:700; color: var(--text); font-size:1rem;
  transition: all var(--t-med) var(--ease-out); }
.cert:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: rgba(91,61,245,.3); color: var(--violet-600); }
.cert small { font-family:var(--font-body); font-weight:500; font-size:.72rem; color: var(--muted); }

/* ---------------- Architecture stack ---------------- */
.arch { display:grid; gap:.9rem; max-width: 940px; margin-inline:auto; }
.arch-layer { display:grid; grid-template-columns: auto 1fr auto; gap:1.4rem; align-items:center;
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); padding:1.3rem 1.6rem;
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med), border-color var(--t-med); }
.arch-layer:hover { transform: translateX(6px); box-shadow: var(--sh-md); border-color: rgba(91,61,245,.3); }
.arch-n { font-family:var(--font-display); font-weight:700; font-size:1.4rem; color:#fff; background: var(--grad-brand); width:52px; height:52px; border-radius:14px; display:grid; place-items:center; box-shadow: var(--sh-violet); }
.arch-body h3 { font-size:1.2rem; margin-bottom:.2rem; }
.arch-body p { font-size:.92rem; color: var(--muted); }
.arch-tags { display:flex; flex-wrap:wrap; gap:.4rem; justify-content:flex-end; max-width: 260px; }
.arch-tags span { font-family:var(--font-mono); font-size:.68rem; color: var(--violet-600); background: var(--violet-100); border:1px solid rgba(91,61,245,.14); padding:.24rem .5rem; border-radius:6px; }
@media (max-width: 760px){ .arch-layer { grid-template-columns: auto 1fr; } .arch-tags { display:none; } }

/* ---------------- Connector tiles ---------------- */
.conn { display:grid; place-items:center; height:66px; border-radius: var(--r-md); background: rgba(255,255,255,.04); border:1px solid var(--on-dark-line); color: var(--on-dark-body); font-weight:600; font-size:.9rem; transition: all var(--t-fast) var(--ease-out); }
.conn:hover { border-color: var(--violet-300); color:#fff; background: rgba(91,61,245,.14); transform: translateY(-3px); }

/* ---------------- Doc extraction widget ---------------- */
.doc-field { display:flex; align-items:center; gap:.8rem; padding:.7rem 0; border-bottom:1px solid var(--line); }
.doc-field:last-of-type { border-bottom:0; }
.doc-field span { width:92px; flex:none; color: var(--muted); font-size:.85rem; }
.doc-field strong { flex:1; color: var(--text); font-size:.95rem; }
.doc-field .conf { font-family:var(--font-mono); font-size:.72rem; padding:.2rem .5rem; border-radius:6px; }
.conf.ok { color: var(--green-500); background: rgba(16,185,129,.1); }
.conf.warn { color: var(--amber-500); background: rgba(245,166,35,.12); }
.doc-flag { margin-top:.9rem; font-size:.82rem; color: var(--amber-500); background: rgba(245,166,35,.1); border:1px dashed rgba(245,166,35,.4); border-radius: var(--r-sm); padding:.6rem .8rem; }

/* ---------------- Workflow steps widget ---------------- */
.wf-steps { display:grid; gap:0; }
.wf-step { display:flex; gap:.85rem; align-items:center; padding:.7rem 0; position:relative; }
.wf-step .wf-dot { width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:.85rem; border:2px solid var(--line-2); color: var(--faint); background:#fff; z-index:1; }
.wf-step:not(:last-child)::after { content:""; position:absolute; left:14px; top:34px; bottom:-6px; width:2px; background: var(--line); }
.wf-step.done .wf-dot { background: var(--green-500); border-color: var(--green-500); color:#fff; }
.wf-step.active .wf-dot { background: var(--violet-500); border-color: var(--violet-500); color:#fff; animation: pulse 1.6s var(--ease-inout) infinite; }
.wf-step strong { display:block; color: var(--text); font-size:.95rem; }
.wf-step small { color: var(--muted); font-size:.82rem; }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(91,61,245,.4);} 50%{ box-shadow:0 0 0 7px rgba(91,61,245,0);} }

/* ---------------- Auth pages ---------------- */
.auth-wrap { min-height: 100svh; display:grid; grid-template-columns: 1.1fr .9fr; }
@media (max-width: 940px){ .auth-wrap { grid-template-columns: 1fr; } .auth-aside { display:none; } }
.auth-aside { position:relative; background: var(--grad-ink); color:#fff; overflow:hidden; padding: clamp(2rem,5vw,4rem); display:flex; flex-direction:column; justify-content:space-between; }
.auth-aside canvas { position:absolute; inset:0; z-index:0; opacity:.85; }
.auth-aside > * { position:relative; z-index:1; }
.auth-main { display:flex; align-items:center; justify-content:center; padding: clamp(1.5rem,5vw,3rem); background: var(--bg); }
.auth-card { width:100%; max-width: 420px; }
.field { margin-bottom: 1.1rem; }
.field label { display:block; font-size:.85rem; font-weight:600; color: var(--text); margin-bottom:.45rem; }
.field .inp {
  width:100%; padding:.85rem 1rem; border-radius: var(--r-md); border:1px solid var(--line-2);
  background: var(--surface); transition: border-color var(--t-fast), box-shadow var(--t-fast); font-size:.98rem;
}
.field .inp:focus { outline:none; border-color: var(--violet-400); box-shadow: 0 0 0 4px rgba(91,61,245,.14); }
.field .inp-wrap { position:relative; }
.field .inp-wrap .toggle-pw { position:absolute; right:.7rem; top:50%; transform:translateY(-50%); color: var(--faint); padding:.3rem; }
.auth-alt { text-align:center; margin-top:1.4rem; color: var(--muted); font-size:.92rem; }
.divider-or { display:flex; align-items:center; gap:1rem; color: var(--faint); font-size:.82rem; margin:1.4rem 0; }
.divider-or::before, .divider-or::after { content:""; flex:1; height:1px; background: var(--line); }
.demo-hint { background: var(--violet-100); border:1px dashed rgba(91,61,245,.35); border-radius: var(--r-md); padding:.9rem 1rem; font-size:.85rem; color: var(--violet-700); margin-bottom:1.4rem; }
.demo-hint code { font-family:var(--font-mono); background:#fff; padding:.1rem .35rem; border-radius:5px; }