/*
Theme Name: Chaitrix AI
Theme URI: https://chaitrix.ai
Author: Chaitrix AI
Author URI: https://chaitrix.ai
Description: Chaitrix AI is an AI Business Copilot and Virtual Customer Research platform. Describe a business idea, get instant analysis, and test it against up to 1,000 AI-simulated customer personas before you build. Includes a full workspace: customer directory with search & filters, panel builder, quick surveys, deep interviews, product/pricing/ad/brand/concept testing, segment analysis, and report generation.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chaitrix-ai
Tags: full-width-template, custom-menu, custom-logo, threaded-comments, translation-ready, one-column, saas
*/

/* =========================================================
   0. RESET
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1,h2,h3,h4,h5,h6,p { margin: 0; }
::selection { background: #FFC400; color: #0A0A0F; }

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root{
  /* --- Color: LIGHT theme, brand palette — yellow (primary),
     purple (secondary), near-black (dark accents), white surfaces. --- */
  --c-bg:            #FFFFFF;
  --c-bg-alt:        #F6F6F6;
  --c-panel:         #FFFFFF;
  --c-panel-2:       #F0F0F0;
  --c-border:        rgba(0,0,0,0.14);
  --c-border-soft:   rgba(0,0,0,0.09);

  --c-text:          #0E0E0E;
  --c-text-dim:      #4B4B4B;
  --c-text-faint:    #868686;

  --c-accent:        #0A0A0F;
  --c-accent-2:      #7C3AED;
  --c-accent-soft:   rgba(124,58,237,0.08);
  --c-cyan:          #7C3AED;

  --c-brand-yellow:      #FFC400;
  --c-brand-yellow-soft: rgba(255,196,0,0.16);
  --c-brand-purple:      #7C3AED;
  --c-brand-purple-soft: rgba(124,58,237,0.12);
  --c-brand-dark:        #0A0A0F;

  --c-good:          #1E9D63;
  --c-warn:          #B26B00;
  --c-bad:           #D6395A;

  --grad-brand: linear-gradient(120deg, #FFFFFF 0%, #FFFCF2 45%, #F5F0FF 100%);
  --grad-panel: linear-gradient(165deg, rgba(124,58,237,0.06), rgba(124,58,237,0) 55%);
  --grad-text:  linear-gradient(95deg, #FFC400 0%, #FFC400 55%, #E0A400 100%);

  /* --- Type --- */
  --f-display: "Space Grotesk", "Segoe UI", sans-serif;
  --f-body: "Inter", "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", "Courier New", monospace;

  /* --- Layout --- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;
  --shadow-1: 0 1px 0 rgba(255,255,255,0.6) inset, 0 20px 50px -25px rgba(0,0,0,0.18);
  --shadow-glow: 0 0 0 1px rgba(0,0,0,0.10), 0 20px 60px -20px rgba(0,0,0,0.16);
  --maxw: 1220px;
}

body.chaitrix-theme {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
}

/* =========================================================
   2. TYPOGRAPHY
   ========================================================= */
.h-display{
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent-2);
}
.eyebrow::before{
  content:"";
  width:6px; height:6px; border-radius:50%;
  background: var(--c-cyan);
  box-shadow: 0 0 10px 2px rgba(124,58,237,0.45);
}
.grad-text{
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-purple{ color: var(--c-brand-purple); font-weight:600; }
.about-two-col{ max-width:820px; display:grid; grid-template-columns:1fr 1fr; gap:40px; }
@media (max-width: 700px){ .about-two-col{ grid-template-columns:1fr; gap:32px; } }
.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}
.section{ padding: 110px 0; position: relative; }
.section-head{ max-width: 640px; margin-bottom: 56px; }
.section-head h2{ font-size: clamp(28px,3.6vw,42px); margin-top: 14px; }
.section-head p{ color: var(--c-text-dim); margin-top: 16px; font-size: 17px; }

/* =========================================================
   3. BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius: 999px;
  padding: 14px 26px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn-primary{
  background: linear-gradient(100deg, #FFD24D, #FFC400);
  color: #0A0A0F;
  box-shadow: 0 12px 30px -12px rgba(255,196,0,0.55);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 18px 36px -14px rgba(255,196,0,0.65); }
.btn-secondary{
  background: linear-gradient(100deg, #8B4FF0, #7C3AED);
  color: #FFFFFF;
  box-shadow: 0 12px 30px -12px rgba(124,58,237,0.5);
}
.btn-secondary:hover{ transform: translateY(-2px); box-shadow: 0 18px 36px -14px rgba(124,58,237,0.6); }
.btn-ghost{
  background: rgba(0,0,0,0.015);
  border-color: var(--c-border);
  color: var(--c-text);
}
.btn-ghost:hover{ border-color: rgba(0,0,0,0.32); background: rgba(0,0,0,0.045); }
.btn-sm{ padding: 9px 16px; font-size: 13.5px; }
.btn-block{ width: 100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none !important; }

/* =========================================================
   4. SITE HEADER (marketing)
   ========================================================= */
.site-header{
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-border-soft);
}
.site-header .container{
  height: 78px;
  display:flex; align-items:center; justify-content:space-between;
  gap: 24px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height: 26px; width:auto; max-width: 220px; max-height: 26px; object-fit: contain; display:block; }
.brand-wordmark-img{ height: 18px !important; width:auto; max-width: 200px; margin-top:1px; object-fit: contain; }
.custom-logo-img{ height: 26px !important; width:auto !important; max-width: 220px !important; max-height: 26px !important; object-fit: contain; }

.main-nav ul{ display:flex; align-items:center; gap: 34px; }
.main-nav a{
  font-size: 14.5px; color: var(--c-text-dim); font-weight: 500;
  transition: color .15s ease;
}
.main-nav a:hover{ color: var(--c-text); }
.header-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; }

@media (max-width: 900px){
  .main-nav{ display:none; }
  .nav-toggle{ display:inline-flex; }
}

/* =========================================================
   5. HERO (dot-circuit field)
   ========================================================= */
.hero{
  position: relative;
  overflow: hidden;
  padding: 120px 0 90px;
  background: var(--grad-brand);
  border-bottom: 1px solid var(--c-border-soft);
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(60% 55% at 78% 8%, rgba(0,0,0,0.06), transparent 60%);
  pointer-events:none;
}
#hero-field{
  position:absolute; inset:0; z-index:0; opacity:0.55;
}
.hero .container{ position: relative; z-index: 2; }
.hero-inner{ max-width: 760px; margin: 0 auto; text-align:center; }
.hero h1{ font-size: clamp(38px, 6vw, 68px); margin-top: 22px; }
.hero p.lead{
  margin-top: 22px; font-size: 18px; color: var(--c-text-dim);
  max-width: 600px; margin-left:auto; margin-right:auto;
}
.hero-input{
  margin: 40px auto 0; max-width: 640px;
  display:flex; align-items:center; gap:10px;
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 8px 8px 8px 24px;
  box-shadow: var(--shadow-1);
}
.hero-input input{
  flex:1; background:transparent; border:0; outline:0;
  color: var(--c-text); font-size: 15.5px; padding: 10px 0;
}
.hero-input input::placeholder{ color: var(--c-text-faint); }
.hero-ctas{ margin-top:22px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero-stats{
  margin-top: 72px; display:flex; justify-content:center; gap: 56px; flex-wrap:wrap;
}
.hero-stats .stat b{ display:block; font-family: var(--f-display); font-size: 28px; }
.hero-stats .stat span{ font-size: 13px; color: var(--c-text-faint); letter-spacing: 0.04em; text-transform: uppercase; }

/* =========================================================
   6. LOGO STRIP / SUB-BAR
   ========================================================= */
.subbar{
  border-bottom: 1px solid var(--c-border-soft);
  background: var(--c-bg-alt);
  padding: 20px 0;
}
.subbar .container{ display:flex; gap:40px; justify-content:space-between; flex-wrap:wrap; }
.subbar span{ font-size: 12.5px; letter-spacing:0.08em; text-transform:uppercase; color: var(--c-text-faint); font-family: var(--f-mono); }

/* =========================================================
   7. HOW IT WORKS (flow)
   ========================================================= */
.flow{ display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.flow-step{
  background: var(--c-panel);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  position: relative;
}
.flow-step .num{
  font-family: var(--f-mono); font-size: 13px; color: var(--c-accent-2);
}
.flow-step h3{ margin-top: 14px; font-family: var(--f-display); font-size: 18px; }
.flow-step p{ margin-top: 10px; color: var(--c-text-dim); font-size: 14.5px; }
.flow-arrow{
  position:absolute; right:-20px; top:50%; transform:translateY(-50%);
  color: var(--c-text-faint); font-size: 20px; z-index: 2;
}
@media (max-width: 900px){
  .flow{ grid-template-columns: 1fr; }
  .flow-arrow{ display:none; }
}

/* =========================================================
   8. FEATURE GRID
   ========================================================= */
.feature-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.feature-card{
  background: var(--c-panel);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-md);
  padding: 28px;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.feature-card:hover{ border-color: rgba(0,0,0,0.22); transform: translateY(-3px); background: var(--c-panel-2); }
.feature-card .icon{
  width:42px; height:42px; border-radius: 12px;
  background: var(--c-accent-soft);
  display:flex; align-items:center; justify-content:center;
  color: var(--c-cyan);
  margin-bottom: 18px;
}
.feature-card h3{ font-family: var(--f-display); font-size: 17px; }
.feature-card p{ margin-top: 10px; color: var(--c-text-dim); font-size: 14.5px; }
@media (max-width: 900px){ .feature-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .feature-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   9. SAMPLE CUSTOMER SHOWCASE
   ========================================================= */
.showcase{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.persona-card{
  background: var(--c-panel);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-md);
  padding: 22px;
}
.persona-top{ display:flex; align-items:center; gap:13px; }
.persona-avatar{
  width:46px; height:46px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-display); font-weight:700; font-size: 15px;
  color:#fff;
}
.persona-name{ font-weight:600; font-size:15px; }
.persona-meta{ font-size:12.5px; color: var(--c-text-faint); margin-top:2px; }
.persona-tags{ display:flex; gap:7px; flex-wrap:wrap; margin-top:16px; }
.tag{
  font-size:11.5px; padding: 5px 10px; border-radius: 999px;
  background: rgba(0,0,0,0.035); border:1px solid var(--c-border-soft);
  color: var(--c-text-dim);
}
.persona-row{ display:flex; justify-content:space-between; margin-top:14px; font-size:13px; }
.persona-row span:first-child{ color: var(--c-text-faint); }
.pill{ padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:600; }
.pill-low{ background: rgba(51,209,139,0.14); color: var(--c-good); }
.pill-medium{ background: rgba(255,176,32,0.14); color: var(--c-warn); }
.pill-high{ background: rgba(255,92,122,0.14); color: var(--c-bad); }
@media (max-width: 900px){ .showcase{ grid-template-columns: 1fr; } }

/* =========================================================
   10. CTA BANNER
   ========================================================= */
.cta-banner{
  border-radius: var(--radius-lg);
  background: var(--grad-brand);
  border: 1px solid var(--c-border);
  padding: 64px 48px;
  text-align:center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(50% 80% at 50% 0%, rgba(0,0,0,0.07), transparent 70%);
}
.cta-banner *{ position: relative; z-index:1; }
.cta-banner h2{ font-size: clamp(26px,4vw,40px); max-width: 620px; margin: 16px auto 0; }
.cta-banner .btn-row{ margin-top: 30px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* =========================================================
   11. FOOTER
   ========================================================= */
.site-footer{
  border-top: 1px solid var(--c-border-soft);
  background: var(--c-bg-alt);
  padding: 64px 0 32px;
}
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px;
  padding-bottom: 48px; border-bottom: 1px solid var(--c-border-soft);
}
.footer-grid h4{ font-size:13px; text-transform:uppercase; letter-spacing:0.08em; color: var(--c-text-faint); margin-bottom:16px; }
.footer-grid li{ margin-bottom:11px; }
.footer-grid a{ color: var(--c-text-dim); font-size:14.5px; }
.footer-grid a:hover{ color: var(--c-text); }
.footer-brand p{ margin-top:14px; color: var(--c-text-dim); font-size:14px; max-width:280px; }
.footer-bottom{
  padding-top: 26px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
}
.footer-bottom span{ color: var(--c-text-faint); font-size:13px; }
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }

/* =========================================================
   12. UTILITIES / REVEAL ANIM
   ========================================================= */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   13. AUTH / LOGIN PAGE
   ========================================================= */
body.is-auth-shell{
  min-height: 100vh;
  display:flex; align-items:center; justify-content:center;
  background: var(--grad-brand);
  padding: 24px;
}
.auth-wrap{ width:100%; max-width: 420px; }
.auth-brand{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom: 28px; }
.auth-brand img{ height:26px; width:auto; max-width:220px; max-height:26px; object-fit:contain; }
.auth-brand .brand-wordmark-img{ height:19px !important; margin-top:2px; }
.auth-card{
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 32px 30px;
  box-shadow: var(--shadow-glow);
  backdrop-filter: blur(10px);
}
.auth-card h1{ font-family: var(--f-display); font-size: 22px; text-align:center; }
.auth-card p.sub{ text-align:center; color: var(--c-text-dim); font-size:14px; margin-top:8px; }

.auth-tabs{
  display:flex; gap:4px; background: rgba(0,0,0,0.035); border:1px solid var(--c-border-soft);
  border-radius: 12px; padding:4px; margin: 24px 0 20px;
}
.auth-tab{
  flex:1; text-align:center; padding:9px 0; border-radius:9px; font-size:13.5px; font-weight:600; color: var(--c-text-dim);
}
.auth-tab.active{ background: var(--c-accent); color:#fff; }

.auth-form{ display:none; flex-direction:column; gap:14px; }
.auth-form.active{ display:flex; }
.auth-field label{ font-size:12.5px; color: var(--c-text-faint); display:block; margin-bottom:7px; }
.auth-field input, .auth-field textarea{
  width:100%; background: var(--c-panel-2); border:1px solid var(--c-border-soft); border-radius:10px;
  padding: 12px 14px; color: var(--c-text); font-size:14.5px; outline:0; font-family: var(--f-body); resize: vertical;
}
.auth-field input:focus, .auth-field textarea:focus{ border-color: rgba(0,0,0,0.35); }
.auth-error{
  background: rgba(214,57,90,0.09); border:1px solid rgba(214,57,90,0.3); color:#B3234A;
  border-radius:10px; padding:11px 14px; font-size:13px; margin-bottom:16px;
}
.auth-footer-note{ text-align:center; margin-top:20px; font-size:13px; color: var(--c-text-faint); }
.auth-footer-note a{ color: var(--c-accent-2); font-weight:600; }

.panel-like-card{
  background: var(--c-panel); border:1px solid var(--c-border-soft); border-radius: var(--radius-lg);
  padding: 32px 30px; box-shadow: var(--shadow-1);
}
.contact-form{ display:flex; flex-direction:column; gap:16px; }
.contact-success{ text-align:center; padding: 20px 0; }
.contact-success h3{ font-family: var(--f-display); font-size:20px; color: var(--c-good); }
.contact-success p{ margin-top:10px; color: var(--c-text-dim); font-size:14.5px; }

/* --- FAQ accordion --- */
.faq-list{ margin-top:34px; display:flex; flex-direction:column; gap:12px; }
.faq-item{
  background: var(--c-panel); border:1px solid var(--c-border-soft); border-radius: var(--radius-md);
  padding: 6px 22px;
}
.faq-item summary{
  list-style:none; cursor:pointer; padding: 16px 0; display:flex; align-items:center; justify-content:space-between;
  font-family: var(--f-display); font-weight:600; font-size:15.5px; gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-icon{
  flex-shrink:0; width:24px; height:24px; border-radius:50%; background: var(--c-brand-yellow-soft);
  display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; color: var(--c-text);
  transition: transform .2s ease;
}
.faq-item[open] .faq-icon{ transform: rotate(45deg); }
.faq-item p{ padding: 0 0 18px; margin:0; color: var(--c-text-dim); font-size:14.5px; line-height:1.65; }
.auth-back{ text-align:center; margin-top:18px; }
.auth-back a{ font-size:13px; color: var(--c-text-faint); }
.auth-back a:hover{ color: var(--c-text); }
.skip-link{
  position:absolute; left:-999px; top:auto;
  background:#fff; color:#000; padding:10px 16px; z-index:999;
  border-radius: 0 0 8px 0;
}
.skip-link:focus{ left:0; top:0; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--c-cyan);
  outline-offset: 2px;
}