/* ================================================================
   FranchisAI · Landing
   Tech-forward / futuristic · rainbow gradient · FranchisAI CI
   ================================================================ */

:root{
  /* base */
  --bg-0:        #07060d;
  --bg-1:        #0d0b17;
  --bg-2:        #15121f;
  --line:        rgba(255,255,255,.08);
  --line-2:      rgba(255,255,255,.14);
  --ink-0:       #ffffff;
  --ink-1:       rgba(255,255,255,.92);
  --ink-2:       rgba(255,255,255,.66);
  --ink-3:       rgba(255,255,255,.44);
  --ink-4:       rgba(255,255,255,.26);

  /* rainbow tokens (FranchisAI brand spectrum) */
  --c-rose:      #ff3d77;
  --c-orange:    #ff8a3d;
  --c-amber:     #ffd23d;
  --c-mint:      #2ee7a4;
  --c-cyan:      #2ec5ff;
  --c-indigo:    #6b6bff;
  --c-violet:    #c75bff;

  --grad-rainbow: linear-gradient(
    90deg,
    var(--c-rose) 0%,
    var(--c-orange) 18%,
    var(--c-amber) 34%,
    var(--c-mint) 52%,
    var(--c-cyan) 68%,
    var(--c-indigo) 84%,
    var(--c-violet) 100%
  );
  --grad-rainbow-soft: linear-gradient(
    90deg,
    rgba(255,61,119,.22) 0%,
    rgba(255,138,61,.22) 18%,
    rgba(255,210,61,.22) 34%,
    rgba(46,231,164,.22) 52%,
    rgba(46,197,255,.22) 68%,
    rgba(107,107,255,.22) 84%,
    rgba(199,91,255,.22) 100%
  );

  /* type */
  --f-thai:    'IBM Plex Sans Thai', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-display: 'Space Grotesk', 'IBM Plex Sans Thai', ui-sans-serif, system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* radii / shadows */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --shadow-glow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 0 0 1px rgba(255,255,255,.04),
    0 24px 60px -20px rgba(107,107,255,.35),
    0 8px 24px -8px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--bg-0);color-scheme:dark}
body{
  font-family: var(--f-thai);
  font-weight: 400;
  color: var(--ink-1);
  background: var(--bg-0);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button{font-family:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
input,button{font-family:inherit}

::selection{ background: rgba(46,197,255,.35); color:#fff }

/* ================================================================
   ATMOSPHERE — animated rainbow blobs + subtle grid
   ================================================================ */
.fa-atmos{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.fa-atmos::before{
  /* grid */
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 35%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 35%, transparent 90%);
}
.fa-atmos::after{
  /* vignette */
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(0,0,0,.6), transparent 60%);
}

.fa-blob{
  position:absolute;
  border-radius:50%;
  filter: blur(80px);
  opacity:.55;
  mix-blend-mode: screen;
  animation: blob-float 18s ease-in-out infinite;
}
.fa-blob.b1{ width:560px;height:560px; left:-160px; top:-120px; background: radial-gradient(circle at 30% 30%, var(--c-rose), transparent 60%) }
.fa-blob.b2{ width:520px;height:520px; right:-140px; top:-80px; background: radial-gradient(circle at 70% 30%, var(--c-indigo), transparent 60%); animation-delay:-6s }
.fa-blob.b3{ width:680px;height:680px; left:30%; top:40%; background: radial-gradient(circle at 50% 50%, var(--c-cyan), transparent 60%); animation-delay:-12s; opacity:.35 }
.fa-blob.b4{ width:420px;height:420px; right:10%; bottom:-100px; background: radial-gradient(circle at 50% 50%, var(--c-amber), transparent 60%); animation-delay:-3s; opacity:.3 }

@keyframes blob-float{
  0%,100% { transform: translate3d(0,0,0) scale(1) }
  33%     { transform: translate3d(40px,-30px,0) scale(1.08) }
  66%     { transform: translate3d(-30px,40px,0) scale(.96) }
}

/* ================================================================
   PAGE FRAME
   ================================================================ */
.fa-page{
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
}

/* HEADER */
.fa-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 22px 4px 0;
  gap: 16px;
}
.fa-header-brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
}
.fa-header-brand .mini-mark{ width: 26px; height: 26px }

.fa-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.fa-status{
  display:flex; align-items:center; gap:8px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .14em;
}
.fa-status::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background: var(--c-mint);
  box-shadow: 0 0 10px var(--c-mint);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:.6 }
  50%    { opacity:1 }
}

.fa-login{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-1);
  transition: all .2s ease;
}
.fa-login:hover{
  background: rgba(255,255,255,.09);
  border-color: var(--line-2);
}
.fa-login .arrow{
  width:14px;height:14px;display:inline-block;
  background: var(--grad-rainbow);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M9.3 3l-1.1 1.1L11 7H2v1.5h9L8.2 11.4 9.3 12.5 14 7.8z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M9.3 3l-1.1 1.1L11 7H2v1.5h9L8.2 11.4 9.3 12.5 14 7.8z'/></svg>") no-repeat center / contain;
}

/* ================================================================
   MAIN / HERO
   ================================================================ */
.fa-main{
  padding: 72px 0 56px;
  display:flex; flex-direction: column; align-items: center;
}

.fa-hero{
  width:100%;
  max-width: 760px;
  display:flex; flex-direction:column; align-items:center;
  text-align: center;
  margin-bottom: 36px;
}

.fa-brand-symbol{
  width: 96px; height: 96px;
  margin-bottom: 24px;
}

.fa-brand-title{
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(48px, 6.5vw, 76px);
  line-height: 1;
  letter-spacing: -.02em;
  margin: 0 0 14px;

  background: var(--grad-rainbow);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: gradient-shift 12s linear infinite;
}
@keyframes gradient-shift{
  0%{ background-position: 0% 50% }
  100%{ background-position: 200% 50% }
}

.fa-brand-tagline{
  font-size: 16px;
  color: var(--ink-2);
  margin: 0 0 6px;
  font-weight: 400;
}
.fa-brand-meta{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.fa-brand-meta .dot{
  width:4px;height:4px;border-radius:50%;
  background: var(--ink-4);
}
.fa-brand-meta .rb{
  display:inline-block;
  height:6px; width: 32px; border-radius: 999px;
  background: var(--grad-rainbow);
}

/* ================================================================
   SEARCH
   ================================================================ */
.fa-search-form{
  width: 100%;
  max-width: 720px;
  position: relative;
}

.fa-search-wrap{
  position: relative;
  border-radius: var(--r-xl);
  padding: 1.5px;
  background: var(--grad-rainbow);
  background-size: 220% 100%;
  animation: gradient-shift 14s linear infinite;
  box-shadow: var(--shadow-glow);
}
.fa-search-wrap::after{
  /* outer halo */
  content:"";
  position:absolute; inset: -20px;
  border-radius: inherit;
  background: var(--grad-rainbow-soft);
  filter: blur(28px);
  z-index: -1;
  opacity:.7;
  animation: gradient-shift 14s linear infinite;
}

.fa-search-box{
  display:flex; align-items:center; gap: 14px;
  padding: 18px 22px;
  border-radius: calc(var(--r-xl) - 2px);
  background: rgba(11, 9, 20, .85);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
.fa-search-icon{
  width: 22px; height: 22px;
  background: var(--grad-rainbow);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19zM5 9.5A4.5 4.5 0 1 1 9.5 14 4.5 4.5 0 0 1 5 9.5'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19zM5 9.5A4.5 4.5 0 1 1 9.5 14 4.5 4.5 0 0 1 5 9.5'/></svg>") no-repeat center / contain;
  flex-shrink: 0;
}
.fa-search-input{
  flex: 1;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-0);
  font-size: 17px;
  font-weight: 400;
  outline: none;
  padding: 4px 0;
  min-width: 0;
}
.fa-search-input::placeholder{
  color: var(--ink-3);
}
.fa-search-input::-webkit-search-cancel-button{ display:none }

.fa-search-actions{
  display:flex;
  gap: 10px;
  margin-top: 14px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.fa-btn{
  appearance: none;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,.04);
  color: var(--ink-1);
  font-size: 13.5px;
  font-weight: 500;
  padding: 11px 18px;
  border-radius: 999px;
  display:inline-flex; align-items:center; gap:8px;
  transition: all .18s ease;
}
.fa-btn:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22) }
.fa-btn:active{ transform: scale(.98) }

.fa-btn-primary{
  position: relative;
  border: 0;
  color: #07060d;
  padding: 12px 22px;
  font-weight: 600;
  background: var(--grad-rainbow);
  background-size: 200% 100%;
  animation: gradient-shift 8s linear infinite;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.15) inset,
    0 10px 30px -8px rgba(199,91,255,.5),
    0 10px 30px -8px rgba(46,197,255,.4);
}
.fa-btn-primary:hover{ filter: brightness(1.08) }
.fa-btn-primary .ic{ width:14px; height:14px; display:inline-block;
  background: #07060d;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2 9.2 8.2 3 11l6.2 2.8L12 20l2.8-6.2L21 11l-6.2-2.8z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2 9.2 8.2 3 11l6.2 2.8L12 20l2.8-6.2L21 11l-6.2-2.8z'/></svg>") no-repeat center / contain;
}

/* example prompt chips */
.fa-chips{
  display:flex; gap:8px; flex-wrap: wrap;
  justify-content: center;
  margin-top: 18px;
}
.fa-chip{
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.025);
  color: var(--ink-2);
  font-size: 12.5px;
  padding: 7px 13px;
  border-radius: 999px;
  display:inline-flex; align-items:center; gap:7px;
  transition: all .18s ease;
}
.fa-chip:hover{ color: var(--ink-0); border-color: var(--line-2); background: rgba(255,255,255,.06) }
.fa-chip .chip-dot{
  width:6px;height:6px;border-radius:50%;
  background: var(--c);
  box-shadow: 0 0 8px var(--c);
}

/* ================================================================
   AI RESPONSE
   ================================================================ */
.fa-ai{
  width: 100%;
  max-width: 720px;
  margin-top: 24px;
}

.fa-ai-card{
  position: relative;
  border-radius: var(--r-lg);
  background: rgba(20,17,30,.7);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  padding: 22px 24px;
  overflow: hidden;
}
.fa-ai-card::before{
  /* top accent bar */
  content:"";
  position:absolute; left:0; right:0; top:0; height:1.5px;
  background: var(--grad-rainbow);
  background-size: 200% 100%;
  animation: gradient-shift 6s linear infinite;
}

.fa-ai-head{
  display:flex; align-items:center; gap:10px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.fa-ai-head .ai-dot{
  width:8px;height:8px;border-radius:50%;
  background: var(--c-mint);
  box-shadow: 0 0 12px var(--c-mint);
}
.fa-ai-head .ai-dot.thinking{
  background: var(--c-amber);
  box-shadow: 0 0 12px var(--c-amber);
  animation: pulse 1s ease-in-out infinite;
}

/* thinking dots */
.fa-thinking{
  display:flex; align-items:center; gap:10px;
  font-size: 14px;
  color: var(--ink-2);
}
.fa-thinking .dots{ display:inline-flex; gap:4px }
.fa-thinking .dots i{
  width:5px; height:5px; border-radius:50%;
  background: var(--ink-2);
  animation: bob 1.2s ease-in-out infinite;
}
.fa-thinking .dots i:nth-child(2){ animation-delay: .15s; background: var(--c-cyan) }
.fa-thinking .dots i:nth-child(3){ animation-delay: .3s;  background: var(--c-violet) }
@keyframes bob{
  0%,100%{ transform: translateY(0); opacity:.4 }
  50%    { transform: translateY(-4px); opacity:1 }
}

.fa-ai-summary{
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-1);
  margin-bottom: 16px;
}
.fa-ai-summary strong{
  background: var(--grad-rainbow);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-weight: 600;
}

.fa-ai-section-label{
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-3);
  margin: 14px 0 8px;
  display:flex; align-items:center; gap:8px;
}
.fa-ai-section-label::before{
  content:""; width:14px; height:1px; background: var(--line-2);
}

.fa-ai-suggestions{
  display: grid; gap: 8px;
  grid-template-columns: 1fr;
}
.fa-ai-suggestion{
  display:flex; align-items:flex-start; gap:12px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  transition: all .18s ease;
  cursor: default;
}
.fa-ai-suggestion:hover{
  background: rgba(255,255,255,.05);
  border-color: var(--line-2);
}
.fa-ai-suggestion .ico{
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 7px;
  display:grid; place-items:center;
  font-size: 13px;
  font-family: var(--f-mono);
  font-weight: 600;
  color: #07060d;
}
.fa-ai-suggestion .body{ flex:1; min-width:0 }
.fa-ai-suggestion .title{
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-0);
  margin-bottom: 2px;
}
.fa-ai-suggestion .sub{
  font-size: 12.5px;
  color: var(--ink-3);
  font-family: var(--f-mono);
  display:flex; align-items:center; gap:8px;
}
.fa-ai-suggestion .sub .sep{ color: var(--ink-4) }

.fa-ai-followup{
  font-size: 13.5px;
  color: var(--ink-2);
  background: rgba(46,197,255,.06);
  border: 1px solid rgba(46,197,255,.18);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  display:flex; gap:10px; align-items:flex-start;
}
.fa-ai-followup .q{
  width: 18px; height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(46,197,255,.2);
  color: var(--c-cyan);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  display:grid; place-items:center;
  margin-top: 1px;
}

.fa-ai-meta{
  display:flex; gap:14px; flex-wrap:wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.fa-ai-meta span b{ color: var(--ink-1); font-weight:500 }

.fa-ai-error{
  font-size: 13.5px;
  color: var(--c-rose);
  background: rgba(255,61,119,.08);
  border: 1px solid rgba(255,61,119,.25);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}

/* ================================================================
   CHAT
   ================================================================ */
.chat{
  width: 100%;
  max-width: 760px;
  margin: 8px auto 0;
}

.chat-frame{
  position: relative;
  border-radius: var(--r-xl);
  padding: 1.5px;
  background: var(--grad-rainbow);
  background-size: 220% 100%;
  animation: gradient-shift 14s linear infinite;
  box-shadow: var(--shadow-glow);
}
.chat-frame::after{
  content:"";
  position:absolute; inset: -24px;
  border-radius: inherit;
  background: var(--grad-rainbow-soft);
  filter: blur(32px);
  z-index: -1;
  opacity:.7;
  animation: gradient-shift 14s linear infinite;
}
.chat-frame-inner{
  border-radius: calc(var(--r-xl) - 2px);
  background: rgba(11, 9, 20, .92);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  overflow: hidden;
  display: flex; flex-direction: column;
}

.chat-head{
  display:flex; align-items:center; gap:10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.chat-head .ch-dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--c-mint);
  box-shadow: 0 0 12px var(--c-mint);
  animation: pulse 2.4s ease-in-out infinite;
}

.chat-body{
  padding: 24px 22px;
  display: flex; flex-direction: column; gap: 22px;
  max-height: min(560px, 60vh);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
.chat-body::-webkit-scrollbar{ width:8px }
.chat-body::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.12);
  border-radius: 4px;
}

.msg{
  display: flex;
  gap: 12px;
  max-width: 100%;
}
.msg-user{
  justify-content: flex-end;
}
.msg-assistant .msg-avatar{
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  flex-shrink: 0;
  padding: 2px;
}
.msg-col{
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
  max-width: calc(100% - 44px);
}
.msg-bubble{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink-1);
}
.msg-bubble p{ margin: 0 }
.msg-bubble p + p{ margin-top: 10px }
.msg-bubble strong{
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  color: var(--ink-0);
  font-weight: 700;
}
.msg-bubble ul{
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex; flex-direction: column; gap: 6px;
}
.msg-bubble li{
  position: relative;
  padding-left: 16px;
}
.msg-bubble li::before{
  content: "";
  position: absolute;
  left: 0; top: .68em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--grad-rainbow);
}
.msg-bubble code{
  font-family: var(--f-mono);
  font-size: 13px;
  background: rgba(255,255,255,.06);
  padding: 1px 6px;
  border-radius: 4px;
}

.msg-user .msg-bubble{
  background: linear-gradient(135deg, rgba(46,197,255,.18), rgba(107,107,255,.18));
  border-color: rgba(107,107,255,.32);
  border-bottom-right-radius: 4px;
  max-width: 80%;
}
.msg-assistant .msg-bubble{
  border-bottom-left-radius: 4px;
}

.msg-suggestions{
  display:flex; flex-wrap: wrap; gap: 6px;
  margin-top: 2px;
}
.msg-sugg{
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.025);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 12.5px;
  padding: 7px 12px;
  border-radius: 999px;
  transition: all .18s ease;
}
.msg-sugg:hover{
  color: var(--ink-0);
  background: rgba(255,255,255,.07);
  border-color: var(--line-2);
}

.msg-inline-cta{
  appearance: none;
  border: 0;
  display: inline-flex; align-items:center; gap: 10px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: #07060d;
  background: var(--grad-rainbow);
  background-size: 200% 100%;
  animation: gradient-shift 8s linear infinite;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 10px 26px -10px rgba(199,91,255,.55);
  align-self: flex-start;
}
.msg-inline-cta:hover{ filter: brightness(1.08) }
.msg-cta-rb{
  display:inline-block; width: 4px; height: 14px; border-radius: 2px;
  background: rgba(7,6,13,.85);
}

/* Chat input */
.chat-input{
  display:flex; align-items: center; gap: 10px;
  padding: 14px 16px 14px 22px;
  border-top: 1px solid var(--line);
  background: rgba(7,6,13,.55);
}
.ci-prompt{
  font-family: var(--f-mono);
  font-size: 18px;
  color: var(--c-mint);
}
.chat-input input{
  flex: 1; min-width: 0;
  background: transparent;
  border: 0;
  color: var(--ink-0);
  font: inherit;
  font-size: 15.5px;
  outline: none;
  padding: 6px 0;
}
.chat-input input::placeholder{ color: var(--ink-3) }
.chat-input input:disabled{ opacity: .5 }

.ci-send{
  appearance: none;
  border: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #07060d;
  background: var(--grad-rainbow);
  background-size: 200% 100%;
  animation: gradient-shift 8s linear infinite;
  padding: 9px 14px;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: opacity .18s ease;
}
.ci-send:disabled{ opacity: .35; cursor: not-allowed }
.ci-arrow{ font-family: var(--f-mono); font-size: 12px }

/* CTA bar below chat */
.cta-bar{
  margin-top: 18px;
  display:flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--r-md);
  background: rgba(20,17,30,.6);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  animation: cta-in .4s ease both;
}
@keyframes cta-in{
  from { opacity:0; transform: translateY(8px) }
  to   { opacity:1; transform: none }
}
.cta-bar::before{
  content:"";
  position: absolute; left:0; top:0; bottom:0; width: 3px;
  background: var(--grad-rainbow);
}
.cta-bar-text{
  display:flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.cta-bar-text b{
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-0);
}
.cta-bar-text span{
  font-size: 13px;
  color: var(--ink-3);
}

/* ================================================================
   LEAD FORM MODAL
   ================================================================ */
.lf-overlay{
  position: fixed; inset: 0;
  background: rgba(5, 4, 10, .72);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  display: grid; place-items: center;
  padding: 24px;
  z-index: 1000;
  animation: lf-fade .25s ease;
}
@keyframes lf-fade{ from { opacity: 0 } to { opacity: 1 } }

.lf-modal{
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 0% 0%, rgba(255,61,119,.15), transparent 40%),
    radial-gradient(circle at 100% 0%, rgba(107,107,255,.15), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(46,197,255,.12), transparent 50%),
    rgba(13, 11, 23, .98);
  border: 1px solid var(--line-2);
  padding: 36px 32px 28px;
  box-shadow:
    0 24px 80px -20px rgba(199,91,255,.4),
    0 0 0 1px rgba(255,255,255,.06) inset;
  animation: lf-in .35s cubic-bezier(.2,.8,.2,1.05) both;
}
@keyframes lf-in{
  from { opacity: 0; transform: translateY(20px) scale(.97) }
  to   { opacity: 1; transform: none }
}

.lf-close{
  appearance: none;
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  color: var(--ink-1);
  font-size: 18px;
  line-height: 1;
  transition: all .18s ease;
}
.lf-close:hover{
  background: rgba(255,255,255,.1);
  border-color: var(--line-2);
}

.lf-head{
  margin-bottom: 22px;
}
.lf-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.lf-rb{
  display: inline-block;
  width: 18px; height: 4px; border-radius: 2px;
  background: var(--grad-rainbow);
}
.lf-head h2{
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 10px;
  background: var(--grad-rainbow);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.lf-head p{
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.lf-head p b{ color: var(--ink-0); font-weight: 500 }

.lf-form{
  display: flex; flex-direction: column; gap: 14px;
}
.lf-row{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}

.lf-field{
  display: flex; flex-direction: column; gap: 6px;
}
.lf-field > span{
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 500;
}
.lf-field > span em{
  font-style: normal;
  color: var(--ink-4);
  font-weight: 400;
}
.lf-field input,
.lf-field textarea{
  appearance: none;
  width: 100%;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--ink-0);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: all .15s ease;
  resize: vertical;
}
.lf-field input::placeholder,
.lf-field textarea::placeholder{ color: var(--ink-4) }
.lf-field input:focus,
.lf-field textarea:focus{
  border-color: rgba(107,107,255,.5);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 3px rgba(107,107,255,.15);
}

.lf-seg{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 4px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.lf-seg-btn{
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 8px;
  border-radius: 8px;
  transition: all .15s ease;
}
.lf-seg-btn:hover{ color: var(--ink-0) }
.lf-seg-btn.on{
  background: var(--grad-rainbow);
  background-size: 200% 100%;
  animation: gradient-shift 8s linear infinite;
  color: #07060d;
  font-weight: 600;
}

.lf-submit{
  appearance: none;
  border: 0;
  margin-top: 8px;
  padding: 14px 20px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #07060d;
  background: var(--grad-rainbow);
  background-size: 200% 100%;
  animation: gradient-shift 8s linear infinite;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 14px 32px -10px rgba(199,91,255,.55),
    0 10px 24px -8px rgba(46,197,255,.4);
  transition: filter .18s ease, transform .18s ease;
}
.lf-submit:hover{ filter: brightness(1.08) }
.lf-submit:active{ transform: scale(.99) }
.lf-arrow{ font-family: var(--f-mono); font-size: 16px }

.lf-fine{
  font-size: 11px;
  color: var(--ink-4);
  text-align: center;
  margin: 4px 0 0;
  line-height: 1.5;
}

.lf-success{
  text-align: center;
  padding: 12px 0 4px;
}
.lf-success-mark{ display: inline-block; margin-bottom: 14px }
.lf-success h2{
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 10px;
  background: var(--grad-rainbow);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.lf-success p{
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0 0 20px;
}
.lf-success p b{ color: var(--ink-0); font-weight: 500 }

/* pill helper */
.fa-pill{
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-3);
  padding: 3px 7px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-left: 6px;
}

/* ================================================================
   ANNOUNCEMENTS (legacy — unused in v2, kept for compat)
   ================================================================ */
.fa-announcements{
  width: 100%;
  max-width: 1080px;
  margin: 88px auto 0;
}
.fa-section-head{
  display:flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
}
.fa-section-head h2{
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .01em;
  margin: 0;
  display:flex; align-items:center; gap:10px;
  color: var(--ink-0);
}
.fa-section-head h2 .num{
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: .14em;
}
.fa-section-head .head-line{
  flex:1;
  height: 1px;
  background: linear-gradient(to right, var(--line-2), transparent);
  margin: 0 16px 0 4px;
}
.fa-section-head .head-meta{
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.fa-anno-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.fa-anno{
  position:relative;
  border-radius: var(--r-md);
  background: rgba(20,17,30,.55);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  padding: 18px 20px 20px;
  transition: all .2s ease;
  overflow: hidden;
}
.fa-anno:hover{
  border-color: var(--line-2);
  background: rgba(20,17,30,.75);
  transform: translateY(-1px);
}
.fa-anno::before{
  content:"";
  position:absolute; top:0; left:18px; right:18px; height:1.5px;
  background: var(--accent);
  opacity:.85;
}
.fa-anno-head{
  display:flex; align-items:center; justify-content:space-between;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.fa-anno-tag{
  color: var(--accent);
  font-weight: 600;
}
.fa-anno-title{
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-0);
  margin: 0 0 6px;
  text-wrap: balance;
}
.fa-anno-body{
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}
.fa-anno-foot{
  display:flex; align-items:center; gap:10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.fa-anno-foot .br{ color: var(--ink-1) }

/* ================================================================
   FOOTER
   ================================================================ */
.fa-footer{
  display:flex; align-items:center; justify-content:space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 36px 4px 28px;
  margin-top: 64px;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.fa-footer-l{ display:flex; align-items:center; gap:14px }
.fa-footer-mark{ width: 18px; height: 18px }
.fa-footer .pow{
  display:inline-flex; align-items:center; gap:8px;
}
.fa-footer .pow b{
  color: var(--ink-1);
  font-weight: 500;
}
.fa-footer .pow .rb-mini{
  display:inline-block;
  height: 4px; width: 22px; border-radius: 999px;
  background: var(--grad-rainbow);
  box-shadow: 0 0 10px rgba(199,91,255,.3);
}
.fa-footer-nav{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.fa-footer-nav a:hover{
  color:var(--ink-0);
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 820px){
  .fa-anno-grid{ grid-template-columns: 1fr 1fr }
}
@media (max-width: 640px){
  .fa-page{ padding: 0 18px }
  .fa-main{ padding: 48px 0 36px }
  .fa-brand-symbol{ width: 80px; height: 80px }
  .fa-search-box{ padding: 14px 16px; gap:10px }
  .fa-search-input{ font-size: 15px }
  .fa-anno-grid{ grid-template-columns: 1fr }
  .fa-announcements{ margin-top: 56px }
  .fa-section-head .head-line{ display:none }
  .chat-body{ padding: 18px 16px; gap: 18px }
  .msg-bubble{ font-size: 14.5px }
  .chat-input{ padding: 12px 12px 12px 18px }
  .cta-bar{ flex-direction: column; align-items: stretch; text-align: center }
  .cta-bar .fa-btn-primary{ justify-content: center }
  .lf-modal{ padding: 28px 22px 22px }
  .lf-head h2{ font-size: 24px }
  .lf-row{ grid-template-columns: 1fr }
  .fa-status{ display: none }
  .fa-header{ align-items:flex-start }
  .fa-header-actions{ gap:8px }
  .fa-header-actions .fa-login{ padding:9px 12px }
}