/*
Theme Name: Cogzera
Theme URI: https://cogzera.com
Author: Cogzera
Author URI: https://cogzera.com
Description: Official WordPress theme for Cogzera — the all-in-one AI copilot for your browser. Recreates the Cogzera marketing homepage: hero, floating feature cards, stats, and CTA.
Version: 1.0.9
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cogzera
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root{
  --cz-bg: #F6F7FC;
  --cz-bg-2: #FFFFFF;
  --cz-navy: #0B1130;
  --cz-navy-soft: #4B5169;
  --cz-gray: #6B7280;
  --cz-gray-light: #9AA1B4;
  --cz-blue: #4F5BFF;
  --cz-purple: #8B5CF6;
  --cz-gradient: linear-gradient(115deg, #4F5BFF 0%, #7B61FF 45%, #A855F7 100%);
  --cz-gradient-soft: linear-gradient(115deg, rgba(79,91,255,.12) 0%, rgba(168,85,247,.12) 100%);
  --cz-border: #E7E9F5;
  --cz-card-shadow: 0 10px 30px rgba(24, 28, 68, 0.08), 0 2px 6px rgba(24,28,68,.04);
  --cz-radius: 16px;
  --cz-radius-sm: 10px;
  --cz-radius-pill: 999px;
  --cz-font-display: 'Sora', 'Inter', sans-serif;
  --cz-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --cz-max: 1320px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--cz-font-body);
  color: var(--cz-navy);
  background: var(--cz-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
svg{ max-width:100%; }
/* Safety net: any icon svg without a sizing context falls back to 1.25em
   instead of the browser's 300x150 intrinsic default. */
svg:not([class]):not(.cz-logo svg):not(.cz-mark-center svg){ width:1.25em; height:1.25em; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }
.screen-reader-text{
  position:absolute!important; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.container{
  max-width: var(--cz-max);
  margin: 0 auto;
  padding: 0 32px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Logo mark (hexagon "C")
   ========================================================================== */
.cz-logo{ display:flex; align-items:center; gap:10px; font-family: var(--cz-font-display); font-weight:800; font-size:22px; color: var(--cz-navy); letter-spacing:-0.01em; }
.cz-logo svg{ width:34px; height:34px; flex-shrink:0; }
.cz-mark-center{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.cz-mark-center svg{ width:96px; height:96px; filter: drop-shadow(0 12px 24px rgba(79,91,255,.35)); }

/* ==========================================================================
   Header / nav
   ========================================================================== */
.cz-header{
  position: sticky; top:0; z-index: 60;
  background: rgba(246,247,252,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
}
.cz-header.is-scrolled{ border-bottom-color: var(--cz-border); }
.cz-header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 0;
}
.cz-nav{ display:flex; align-items:center; gap:40px; }
.cz-nav ul{ display:flex; align-items:center; gap:36px; list-style:none; }
.cz-nav a{
  font-size:15px; font-weight:600; color: var(--cz-navy-soft);
  transition: color .15s ease;
}
.cz-nav a:hover, .cz-nav a:focus-visible{ color: var(--cz-navy); }
.cz-header-actions{ display:flex; align-items:center; gap:20px; }
.cz-header-login{
  font-family: var(--cz-font-body); font-weight:700; font-size:14.5px; color: var(--cz-navy-soft);
  white-space:nowrap; transition: color .15s ease; background:none; border:0; padding:0; cursor:pointer;
}
.cz-header-login:hover, .cz-header-login:focus-visible{ color: var(--cz-navy); }

.cz-account-menu{ position:relative; }
.cz-account-avatar-btn{
  display:flex; align-items:center; background:none; border:0; padding:0; cursor:pointer; line-height:0;
}
.cz-account-avatar{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--cz-gradient); color:#fff; font-family: var(--cz-font-display);
  font-size:13px; font-weight:700; letter-spacing:.01em;
}
.cz-account-avatar-lg{ width:38px; height:38px; font-size:14px; }
.cz-account-dropdown{
  position:absolute; top:calc(100% + 12px); right:0; width:250px; z-index:70;
  background:#fff; border:1px solid var(--cz-border); border-radius: var(--cz-radius);
  box-shadow: 0 20px 45px rgba(24,28,68,.14); padding:8px; text-align:left;
}
.cz-account-dropdown-head{ display:flex; align-items:center; gap:12px; padding:8px 8px 12px; }
.cz-account-dropdown-who{ min-width:0; flex:1; }
.cz-account-dropdown-name{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color: var(--cz-navy); }
.cz-account-dropdown-name span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-transform:capitalize; }
.cz-account-plan-badge{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color: var(--cz-blue);
  background: var(--cz-gradient-soft); padding:2px 8px; border-radius: var(--cz-radius-pill); flex-shrink:0;
}
.cz-account-dropdown-email{
  font-size:12.5px; color: var(--cz-gray-light); font-weight:600; margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cz-account-dropdown-sep{ height:1px; background: var(--cz-border); margin:0 0 8px; }
.cz-account-dropdown-item{
  display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border:0; background:none;
  border-radius: var(--cz-radius-sm); font-family: var(--cz-font-body); font-size:14px; font-weight:600;
  color: var(--cz-navy-soft); cursor:pointer; text-align:left;
}
.cz-account-dropdown-item svg{ width:16px; height:16px; flex-shrink:0; }
.cz-account-dropdown-item:hover{ background: var(--cz-bg); color: var(--cz-navy); }
.cz-account-dropdown-signout:hover{ background:rgba(220,38,38,.08); color:#B42318; }
.cz-menu-toggle{
  display:none; background:none; border:0; padding:8px; color: var(--cz-navy);
}
.cz-menu-toggle svg{ width:26px; height:26px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.cz-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family: var(--cz-font-body); font-weight:700; font-size:15px;
  padding: 13px 26px; border-radius: var(--cz-radius-pill);
  border: 1px solid transparent; white-space:nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.cz-btn:focus-visible{ outline: 2px solid var(--cz-blue); outline-offset: 2px; }
.cz-btn svg{ width:18px; height:18px; flex-shrink:0; }
.cz-btn-primary{
  background: var(--cz-gradient); color:#fff;
  box-shadow: 0 8px 20px rgba(79,91,255,.35);
}
.cz-btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 12px 26px rgba(79,91,255,.45); }
.cz-btn-secondary{
  background: #fff; color: var(--cz-navy);
  border-color: var(--cz-border);
}
.cz-btn-secondary:hover{ border-color:#D3D7EC; transform: translateY(-1px); }
.cz-btn-lg{ padding:16px 30px; font-size:16px; }
.cz-header-actions .cz-btn{ padding:11px 22px; font-size:14px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.cz-hero{
  position: relative;
  padding: 72px 0 60px;
  overflow: hidden;
}
.cz-hero::before{
  content:"";
  position:absolute; top:-200px; right:-160px; width:900px; height:900px;
  background: radial-gradient(circle, rgba(139,92,246,.14) 0%, rgba(79,91,255,.08) 45%, transparent 72%);
  z-index:0; pointer-events:none;
}
.cz-hero-waves{
  position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
}
.cz-hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns: minmax(0,480px) 1fr; gap:20px; align-items:center;
}
.cz-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--cz-gradient-soft); color:#6D3FE0;
  font-size:13px; font-weight:700; padding:8px 16px; border-radius: var(--cz-radius-pill);
  margin-bottom:26px; border: 1px solid rgba(139,92,246,.18);
}
.cz-eyebrow svg{ width:15px; height:15px; }
.cz-hero-title{
  font-family: var(--cz-font-display);
  font-size: 64px; line-height: 1.03; font-weight: 800; letter-spacing:-0.02em;
  margin: 0 0 22px;
  color: var(--cz-navy);
}
.cz-hero-title .grad{
  background: var(--cz-gradient);
  -webkit-background-clip: text; background-clip:text; color: transparent;
}
.cz-hero-desc{
  font-size:18px; line-height:1.6; color: var(--cz-gray); margin: 0 0 34px; max-width: 470px;
}
.cz-hero-ctas{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:52px; }

.cz-stats{ display:flex; gap:36px; flex-wrap:wrap; }
.cz-stat{ display:flex; align-items:center; gap:12px; }
.cz-stat-icon{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.cz-stat-icon svg{ width:20px; height:20px; }
.cz-stat-icon.blue{ background:#E7E9FF; color:#4F5BFF; }
.cz-stat-icon.purple{ background:#F0E7FF; color:#8B5CF6; }
.cz-stat-icon.green{ background:#DFF5E9; color:#1FA05C; }
.cz-stat-icon.amber{ background:#FDEFDD; color:#E08A1F; }
.cz-stat-num{ font-family: var(--cz-font-display); font-size:22px; font-weight:800; line-height:1.1; color: var(--cz-navy); }
.cz-stat-label{ font-size:13px; color: var(--cz-gray-light); font-weight:600; }

/* ==========================================================================
   Hero visual / mockup composition
   ========================================================================== */
.cz-hero-visual{
  position: relative;
  height: 720px;
  min-width: 0;
}
.cz-connectors{
  position:absolute; inset:0; width:100%; height:100%; z-index:1; overflow:visible;
}
.cz-connectors path{ fill:none; stroke-width:1.5; }

.cz-hero-pills{
  position:absolute; top:0; left:6%; right:2%; z-index:5;
  display:flex; justify-content:space-between; align-items:flex-end; gap:10px;
}
.cz-pill{
  display:inline-flex; align-items:center; gap:7px;
  background:#fff; border:1px solid var(--cz-border);
  border-radius: var(--cz-radius-pill); padding:10px 15px;
  font-size:13px; font-weight:700; color: var(--cz-navy);
  box-shadow: var(--cz-card-shadow);
  white-space:nowrap;
}
.cz-pill:nth-child(1){ transform: translateY(14px); }
.cz-pill:nth-child(2){ transform: translateY(8px); }
.cz-pill:nth-child(3){ transform: translateY(3px); }
.cz-pill:nth-child(4){ transform: translateY(-2px); }
.cz-pill:nth-child(5){ transform: translateY(-6px); }
.cz-pill svg{ width:15px; height:15px; }
.cz-pill.blue svg{ color:#4F5BFF; }
.cz-pill.purple svg{ color:#8B5CF6; }
.cz-pill.green svg{ color:#1FA05C; }
.cz-pill.orange svg{ color:#F97316; }
.cz-pill.violet svg{ color:#7C3AED; }

.cz-float-card{
  position:absolute;
  background:#fff; border-radius: var(--cz-radius);
  border:1px solid var(--cz-border);
  box-shadow: var(--cz-card-shadow);
  padding:14px;
  z-index:3;
  animation: cz-float 7s ease-in-out infinite;
}
@keyframes cz-float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-9px); }
}
.cz-float-card .fc-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:12.5px; font-weight:700; color: var(--cz-navy-soft);
  margin-bottom:10px;
}
.cz-float-card .fc-head .fc-head-label{ display:flex; align-items:center; gap:7px; }
.cz-float-card .fc-head svg{ width:14px; height:14px; flex-shrink:0; }
.cz-float-card .fc-head-icons{ display:flex; gap:6px; color: var(--cz-gray-light); }
.cz-float-card .fc-head-icons svg{ width:12px; height:12px; }
.cz-float-card .fc-line{ height:7px; border-radius:4px; background:#EDEFF7; margin-bottom:6px; }
.cz-float-card .fc-line.w60{ width:60%; }
.cz-float-card .fc-line.w80{ width:80%; }
.cz-float-card .fc-line.w40{ width:40%; }

.cz-card-search{ top:78px; left:1%; width:190px; animation-delay:.2s; }
.cz-card-search .fc-thumb{
  height:70px; border-radius:8px; margin-bottom:8px; position:relative; overflow:hidden;
  background: linear-gradient(200deg,#8FD3E8 0%,#4F7FE0 45%,#26346B 100%);
}
.cz-card-search .fc-thumb::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:38%;
  background: linear-gradient(0deg, rgba(20,40,90,.55), transparent);
}

.cz-card-pdf{ top:238px; left:6%; width:172px; animation-delay:1.1s; }
.cz-card-pdf .fc-body{ display:flex; align-items:center; gap:10px; }
.cz-card-pdf .fc-thumb-sm{
  width:38px; height:38px; border-radius:8px; background:#E43D2E; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; flex-shrink:0;
}
.cz-card-pdf .fc-lines{ flex:1; min-width:0; }

.cz-card-code{ top:392px; left:0; width:214px; animation-delay:.6s; }
.cz-card-code .fc-code{
  background:#161B33; border-radius:8px; padding:12px;
}
.cz-card-code .fc-code div{ height:6px; border-radius:3px; margin-bottom:6px; }
.cz-card-code .fc-code div:last-child{ margin-bottom:0; }
.cz-card-code .fc-code div:nth-child(1){ background:#8B5CF6; width:45%; }
.cz-card-code .fc-code div:nth-child(2){ background:#4F5BFF; width:78%; }
.cz-card-code .fc-code div:nth-child(3){ background:#22C1DC; width:33%; }
.cz-card-code .fc-code div:nth-child(4){ background:#4F5BFF; width:60%; }

.cz-card-yt{ top:540px; left:6%; width:178px; animation-delay:1.6s; }
.cz-card-yt .fc-head svg{ color:#FF0000; }

.cz-card-gmail{ top:64px; right:0; width:212px; animation-delay:.4s; }
.cz-card-gmail .fc-head svg{ color:#EA4335; }
.cz-card-notion{ top:246px; right:3%; width:206px; animation-delay:1.3s; }
.cz-card-sheets{ top:412px; right:0; width:196px; animation-delay:.8s; }
.cz-card-sheets .fc-head svg{ color:#0F9D58; }
.cz-card-cal{ top:562px; right:5%; width:188px; animation-delay:1.9s; }
.cz-card-cal .fc-head svg{ color:#4285F4; }

.cz-notif-dot{
  position:absolute; top:-5px; right:-5px; width:16px; height:16px; border-radius:50%;
  background:#EA4335; border:2px solid #fff;
}

.cz-mini-table{ display:flex; gap:4px; margin-bottom:6px; }
.cz-mini-table span{ flex:1; height:22px; border-radius:4px; background:#EDEFF7; }
.cz-mini-table span:nth-child(1){ background:#DFF5E9; }
.cz-mini-table span:nth-child(3){ background:#E7E9FF; }

.cz-mini-cal{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-bottom:8px; }
.cz-mini-cal span{ height:14px; border-radius:3px; background:#EDEFF7; }
.cz-mini-cal span.on{ background:#34C77B; }
.cz-mini-cal span.pk{ background:#F472B6; }

.cz-chip{
  display:inline-flex; align-items:center; gap:6px;
  background: var(--cz-gradient-soft); color:#6D3FE0;
  font-size:11px; font-weight:700; padding:6px 11px; border-radius: var(--cz-radius-pill);
  margin-top:4px;
}
.cz-chip svg{ width:11px; height:11px; }

/* Central glow + logomark */
.cz-visual-glow{
  position:absolute; top:230px; left:50%; transform:translateX(-50%);
  width:190px; height:190px; border-radius:50%; z-index:2;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(236,239,255,.7) 55%, rgba(236,239,255,0) 78%);
  box-shadow: 0 0 60px rgba(120,130,255,.25);
  display:flex; align-items:center; justify-content:center;
}
.cz-visual-glow svg{ width:78px; height:78px; filter: drop-shadow(0 14px 26px rgba(79,91,255,.4)); }

/* Central browser + chat panel */
.cz-browser{
  position:absolute; top:198px; left:50%; transform: translateX(-50%);
  width: 420px; border-radius: 14px; overflow:hidden;
  background:#fff; border:1px solid var(--cz-border); box-shadow: var(--cz-card-shadow);
  z-index:2;
}
.cz-browser-bar{
  display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--cz-border);
}
.cz-browser-dot{ width:8px; height:8px; border-radius:50%; }
.cz-browser-bar-icons{ margin-left:auto; display:flex; gap:8px; color: var(--cz-gray-light); }
.cz-browser-bar-icons svg{ width:13px; height:13px; }
.cz-browser-addr-row{
  display:flex; align-items:center; gap:8px; padding:8px 12px; background:#F1F2FA; border-bottom:1px solid var(--cz-border);
}
.cz-browser-addr{
  flex:1; background:#fff; border-radius:7px; padding:7px 12px; font-size:11px; color: var(--cz-gray-light);
  border:1px solid var(--cz-border); display:flex; align-items:center; gap:6px;
}
.cz-browser-addr svg{ width:12px; height:12px; flex-shrink:0; }
.cz-browser-addr-icons{ display:flex; align-items:center; gap:8px; color: var(--cz-gray-light); }
.cz-browser-addr-icons svg{ width:14px; height:14px; }
.cz-browser-addr-icons .cz-logo svg{ width:18px; height:18px; }
.cz-browser-body{ height:34px; background: linear-gradient(180deg,#fff,#F8F9FE); }

.cz-chat-panel{
  position:absolute; top:346px; left:50%; transform: translateX(-50%);
  width:330px; z-index:4;
  background:#fff; border-radius: var(--cz-radius); border:1px solid var(--cz-border);
  box-shadow: 0 20px 45px rgba(24,28,68,.14);
  padding:20px;
}
.cz-chat-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cz-chat-head .cz-logo{ font-size:15px; }
.cz-chat-head .cz-logo svg{ width:22px; height:22px; }
.cz-chat-icons{ display:flex; gap:9px; color: var(--cz-gray-light); }
.cz-chat-icons svg{ width:15px; height:15px; }
.cz-chat-greet{ font-size:14px; color: var(--cz-navy-soft); margin-bottom:12px; font-weight:600; }
.cz-chat-input{
  border:1px solid var(--cz-border); border-radius:12px; padding:12px 14px;
  font-size:13px; color: var(--cz-gray-light); display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.cz-chat-input-icons{ display:flex; align-items:center; gap:9px; }
.cz-chat-input-icons svg{ width:15px; height:15px; color: var(--cz-gray-light); }
.cz-send-btn{
  width:28px; height:28px; border-radius:50%; background: var(--cz-gradient);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.cz-send-btn svg{ width:13px; height:13px; }
.cz-chat-actions{ display:flex; flex-wrap:wrap; gap:7px; }
.cz-chat-actions span{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--cz-border); border-radius: var(--cz-radius-pill);
  padding:6px 11px; font-size:11.5px; font-weight:600; color: var(--cz-navy-soft);
}
.cz-chat-actions svg{ width:12px; height:12px; color: var(--cz-gray-light); }

/* ==========================================================================
   Generic sections (features / footer) — kept for a real, usable site
   ========================================================================== */
.cz-section{ padding:90px 0; }
.cz-section-head{ text-align:center; max-width:640px; margin:0 auto 56px; }
.cz-section-eyebrow{
  display:inline-block; font-size:13px; font-weight:800; color:#6D3FE0; letter-spacing:.04em; text-transform:uppercase; margin-bottom:14px;
}
.cz-section-title{ font-family: var(--cz-font-display); font-size:38px; font-weight:800; letter-spacing:-0.02em; margin:0 0 16px; }
.cz-section-desc{ color: var(--cz-gray); font-size:16.5px; line-height:1.6; }

.cz-feature-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.cz-feature-card{
  background:#fff; border:1px solid var(--cz-border); border-radius: var(--cz-radius);
  padding:26px 20px; text-align:left; box-shadow: var(--cz-card-shadow);
}
.cz-feature-icon{
  width:44px; height:44px; border-radius:12px; background: var(--cz-gradient-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:#6D3FE0;
}
.cz-feature-icon svg{ width:22px; height:22px; }
.cz-feature-card h3{ font-family: var(--cz-font-display); font-size:17px; margin:0 0 8px; }
.cz-feature-card p{ font-size:14px; color: var(--cz-gray); margin:0; line-height:1.55; }

/* Use cases */
.cz-usecase-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cz-usecase-card{
  background:#fff; border:1px solid var(--cz-border); border-radius: var(--cz-radius);
  padding:28px 24px; box-shadow: var(--cz-card-shadow);
}
.cz-usecase-icon{
  width:44px; height:44px; border-radius:12px; background: var(--cz-gradient-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:#6D3FE0;
}
.cz-usecase-icon svg{ width:22px; height:22px; }
.cz-usecase-card h3{ font-family: var(--cz-font-display); font-size:17px; margin:0 0 8px; }
.cz-usecase-card p{ font-size:14px; color: var(--cz-gray); margin:0; line-height:1.55; }

/* Pricing */
.cz-billing-toggle{
  display:flex; align-items:center; justify-content:center; gap:4px; margin:0 auto 40px;
  width:max-content; background:#F3F3FA; border:1px solid var(--cz-border); border-radius: var(--cz-radius-pill);
  padding:5px;
}
.cz-billing-option{
  appearance:none; border:0; background:transparent; cursor:pointer; font-family:inherit;
  font-size:14px; font-weight:700; color: var(--cz-gray); padding:9px 18px; border-radius: var(--cz-radius-pill);
  display:flex; align-items:center; gap:8px; transition:.15s ease;
}
.cz-billing-option.is-active{ background:#fff; color: var(--cz-navy); box-shadow:0 4px 10px rgba(20,20,50,.08); }
.cz-billing-save{
  font-size:11px; font-weight:700; color:#1FA05C; background:rgba(31,160,92,.12);
  padding:2px 8px; border-radius: var(--cz-radius-pill);
}
.cz-pricing-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; align-items:stretch; }
.cz-price-card{
  position:relative; background:#fff; border:1px solid var(--cz-border); border-radius: var(--cz-radius);
  padding:24px 18px; box-shadow: var(--cz-card-shadow); display:flex; flex-direction:column;
}
.cz-price-card.is-featured{
  border:2px solid transparent;
  background: linear-gradient(#fff,#fff) padding-box, var(--cz-gradient) border-box;
  transform: translateY(-8px); box-shadow: 0 20px 40px rgba(79,91,255,.18);
}
.cz-price-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background: var(--cz-gradient); color:#fff; font-size:12px; font-weight:700;
  padding:6px 16px; border-radius: var(--cz-radius-pill); white-space:nowrap;
}
.cz-price-name{ font-family: var(--cz-font-display); font-size:20px; margin:0 0 6px; }
.cz-price-desc{ font-size:14px; color: var(--cz-gray); margin:0 0 20px; min-height:38px; }
.cz-price-amount{ display:flex; align-items:baseline; gap:8px; }
.cz-price-num{ font-family: var(--cz-font-display); font-size:34px; font-weight:800; color: var(--cz-navy); }
.cz-price-period{ font-size:14px; color: var(--cz-gray-light); font-weight:600; }
.cz-price-discount{
  font-size:11px; font-weight:700; color:#1FA05C; background:rgba(31,160,92,.12);
  padding:2px 8px; border-radius: var(--cz-radius-pill); order:-1;
}
.cz-price-amount-annual{ display:none; }
.cz-pricing-grid.is-annual .cz-price-amount-monthly{ display:none; }
.cz-pricing-grid.is-annual .cz-price-amount-annual{ display:flex; }
.cz-pricing-grid.is-annual p.cz-price-amount-annual{ display:block; }
.cz-price-annual-note{ font-size:12px; color: var(--cz-gray); margin:6px 0 0; }
.cz-price-usage{ list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.cz-price-usage li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; font-weight:700; color: var(--cz-navy); }
.cz-price-usage li.is-muted{ font-weight:600; color: var(--cz-gray-light); }
.cz-price-usage li.is-muted svg{ color: var(--cz-gray-light); opacity:.5; }
.cz-price-usage svg{ width:17px; height:17px; flex-shrink:0; margin-top:1px; color:#1FA05C; }
.cz-price-tagline{ font-size:13px; color: var(--cz-gray); margin:8px 0 0; }
.cz-price-models{ margin:20px 0 4px; padding:16px; background:#F8F8FC; border-radius:14px; display:flex; flex-direction:column; gap:12px; }
.cz-model-group-label{ display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--cz-gray-light); margin-bottom:8px; }
.cz-model-pills{ display:flex; flex-wrap:wrap; gap:6px; }
.cz-model-pill{
  font-size:12px; font-weight:600; color: var(--cz-navy-soft); background:#fff; border:1px solid var(--cz-border);
  padding:5px 10px; border-radius: var(--cz-radius-pill); white-space:nowrap;
}
.cz-model-pill.is-advanced{ color:#6D3FE0; border-color:rgba(109,63,224,.25); background:rgba(109,63,224,.06); }
.cz-price-features{ list-style:none; margin:20px 0 28px; padding:0; display:flex; flex-direction:column; gap:12px; flex:1; }
.cz-price-features li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color: var(--cz-navy-soft); }
.cz-price-features svg{ width:17px; height:17px; flex-shrink:0; margin-top:1px; color:#1FA05C; }
.cz-price-features li.is-unavailable{ color: var(--cz-gray-light); text-decoration: line-through; }
.cz-price-features li.is-unavailable svg{ color: var(--cz-gray-light); }
.cz-price-card .cz-btn{ width:100%; justify-content:center; }
.cz-price-note{ text-align:center; font-size:12px; color: var(--cz-gray-light); margin:10px 0 0; }

/* About */
.cz-about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center; }
.cz-about-points{ list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.cz-about-points li{ display:flex; align-items:flex-start; gap:12px; font-size:15px; color: var(--cz-navy-soft); font-weight:600; }
.cz-about-points svg{ width:20px; height:20px; flex-shrink:0; color:#6D3FE0; margin-top:2px; }
.cz-about-card{
  background: var(--cz-gradient); border-radius: var(--cz-radius); padding:44px 34px; color:#fff;
  text-align:center; box-shadow: var(--cz-card-shadow);
}
.cz-about-card-mark{
  display:flex; align-items:center; justify-content:center;
  width:72px; height:72px; margin:0 auto 22px; border-radius:20px;
  background: rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35);
}
.cz-about-card-mark svg{ margin:0; }
.cz-about-card p{ font-family: var(--cz-font-display); font-size:19px; line-height:1.5; margin:0 0 16px; }
.cz-about-card-role{ font-size:13px; opacity:.85; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }

.cz-cta-band{
  background: var(--cz-gradient); border-radius:28px; padding:64px 48px; text-align:center; color:#fff;
  position:relative; overflow:hidden;
}
.cz-cta-band h2{ font-family: var(--cz-font-display); font-size:34px; margin:0 0 14px; }
.cz-cta-band p{ opacity:.9; margin:0 0 30px; font-size:16px; }
.cz-cta-band .cz-btn-secondary{ background:#fff; color: var(--cz-navy); }

.cz-footer{ background:#0B1130; color:#B9BFDA; padding:64px 0 30px; margin-top:60px; }
.cz-footer .cz-logo{ color:#fff; }
.cz-footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
.cz-footer-col h4{ color:#fff; font-size:14px; margin:0 0 16px; }
.cz-footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.cz-footer-col a{ font-size:14px; color:#9AA1C4; }
.cz-footer-col a:hover{ color:#fff; }
.cz-footer-desc{ font-size:14px; line-height:1.6; margin:16px 0 0; max-width:280px; color:#9AA1C4; }
.cz-footer-bottom{
  border-top:1px solid rgba(255,255,255,.08); padding-top:24px;
  display:flex; justify-content:space-between; align-items:center; font-size:13px; color:#7B82A8; flex-wrap:wrap; gap:12px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px){
  .cz-hero-grid{ grid-template-columns:1fr; }
  .cz-hero-visual{ height:460px; margin-top:20px; }
  .cz-float-card{ display:none; }
  .cz-hero-pills{ display:none; }
  .cz-connectors{ display:none; }
  .cz-visual-glow{ top:20px; width:150px; height:150px; }
  .cz-visual-glow svg{ width:60px; height:60px; }
  .cz-browser{ width:90%; max-width:420px; top:40px; }
  .cz-chat-panel{ width:90%; max-width:400px; top:180px; }
  .cz-feature-grid{ grid-template-columns:repeat(3,1fr); }
  .cz-usecase-grid{ grid-template-columns:repeat(2,1fr); }
  .cz-pricing-grid{ grid-template-columns:repeat(2,1fr); max-width:640px; margin:0 auto; }
  .cz-price-card.is-featured{ transform:none; }
  .cz-about-grid{ grid-template-columns:1fr; gap:40px; }
  .cz-about-visual{ order:-1; }
}
@media (max-width: 900px){
  .cz-nav{ display:none; }
  .cz-menu-toggle{ display:inline-flex; }
  .cz-hero-title{ font-size:44px; }
  .cz-footer-grid{ grid-template-columns:1fr 1fr; }
  .cz-feature-grid{ grid-template-columns:repeat(2,1fr); }
  .cz-usecase-grid{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .container{ padding:0 20px; }
  .cz-pricing-grid{ grid-template-columns:1fr; max-width:440px; }
  .cz-hero{ padding:40px 0 30px; }
  .cz-hero-title{ font-size:36px; }
  .cz-hero-desc{ font-size:16px; }
  .cz-stats{ gap:22px; }
  .cz-header-actions .cz-btn span{ display:none; }
  .cz-hero-visual{ height:340px; }
  .cz-visual-glow{ display:none; }
  .cz-browser{ display:none; }
  .cz-chat-panel{ width:100%; max-width:none; top:0; }
  .cz-feature-grid{ grid-template-columns:1fr; }
  .cz-footer-grid{ grid-template-columns:1fr; }
  .cz-cta-band{ padding:44px 24px; }
  .cz-section-title{ font-size:28px; }
}

/* ==========================================================================
   Auth (login) page
   ========================================================================== */
.cz-auth-main{ padding:64px 0 100px; }
.cz-auth-wrap{ display:flex; justify-content:center; }
.cz-auth-card{
  width:100%; max-width:420px; background:#fff; border:1px solid var(--cz-border);
  border-radius: var(--cz-radius); box-shadow: var(--cz-card-shadow); padding:40px 34px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.cz-auth-logo{ display:flex; align-items:center; gap:10px; font-family: var(--cz-font-display); font-weight:800; font-size:18px; margin-bottom:22px; }
.cz-auth-title{ font-family: var(--cz-font-display); font-size:24px; font-weight:800; margin:0 0 6px; }
.cz-auth-sub{ color: var(--cz-gray); font-size:14.5px; margin:0 0 22px; }
.cz-auth-alert{
  width:100%; font-size:13.5px; padding:10px 14px; border-radius: var(--cz-radius-sm); margin-bottom:16px; text-align:left;
}
.cz-auth-alert.is-error{ background:rgba(220,38,38,.08); color:#B42318; }
.cz-auth-alert.is-success{ background:rgba(31,160,92,.1); color:#1FA05C; }
.cz-auth-google{ width:100%; justify-content:center; gap:10px; }
.cz-auth-divider{
  width:100%; display:flex; align-items:center; gap:12px; margin:20px 0;
  color: var(--cz-gray-light); font-size:12px; text-transform:uppercase; letter-spacing:.04em;
}
.cz-auth-divider::before, .cz-auth-divider::after{ content:''; flex:1; height:1px; background: var(--cz-border); }
.cz-auth-form{ width:100%; display:flex; flex-direction:column; gap:14px; }
.cz-auth-field{ display:flex; flex-direction:column; gap:6px; text-align:left; font-size:13px; font-weight:600; color: var(--cz-navy-soft); }
.cz-auth-field input{
  font-family:inherit; font-size:14.5px; padding:11px 14px; border-radius: var(--cz-radius-sm);
  border:1px solid var(--cz-border); background: var(--cz-bg); color: var(--cz-navy); outline:none; transition:.15s ease;
}
.cz-auth-field input:focus{ border-color: var(--cz-blue); background:#fff; box-shadow:0 0 0 3px rgba(79,91,255,.12); }
.cz-auth-submit{ width:100%; justify-content:center; margin-top:4px; }
.cz-auth-switch{ margin:22px 0 0; font-size:13.5px; color: var(--cz-gray); display:flex; gap:6px; align-items:center; }
.cz-auth-switch + .cz-auth-switch{ margin-top:12px; }
.cz-auth-switch button{
  appearance:none; border:0; background:transparent; color: var(--cz-blue); font-weight:700; font-size:13.5px; padding:0;
}
.cz-verify-code{
  font-size:22px !important; letter-spacing:8px; text-align:center; font-weight:700;
}
.cz-auth-legal{
  margin:16px 0 0; font-size:12px; line-height:1.6; color: var(--cz-gray-light); text-align:center;
}
.cz-auth-legal a{ color: var(--cz-gray); font-weight:600; text-decoration:underline; text-decoration-color: var(--cz-border); }
.cz-auth-legal a:hover{ color: var(--cz-blue); }

/* ==========================================================================
   Account (dashboard) page
   ========================================================================== */
[hidden]{ display:none !important; }
.cz-account-main{ padding:56px 0 100px; }
.cz-account-loading{
  display:flex; align-items:center; justify-content:center; gap:12px; padding:120px 0;
  color: var(--cz-gray); font-size:14.5px; font-weight:600;
}
.cz-spinner{
  width:20px; height:20px; border-radius:50%; border:2.5px solid var(--cz-border);
  border-top-color: var(--cz-blue); animation: cz-spin .8s linear infinite;
}
@keyframes cz-spin{ to{ transform: rotate(360deg); } }
.cz-account-head{ margin-top:36px; }
.cz-account-alert{
  max-width:640px; margin:0 auto 24px; text-align:center; font-size:14px; font-weight:600;
  color:#1FA05C; background:rgba(31,160,92,.1); padding:12px 18px; border-radius: var(--cz-radius-sm);
}
.cz-price-current-badge{
  position:absolute; top:-13px; right:18px; background: var(--cz-navy); color:#fff; font-size:11px; font-weight:700;
  padding:5px 12px; border-radius: var(--cz-radius-pill);
}
.cz-price-card.is-selected{ border-color: var(--cz-blue); box-shadow: 0 0 0 3px rgba(79,91,255,.15); }
.cz-price-card.is-current{ border-color: var(--cz-navy); }
.cz-plan-action{ width:100%; justify-content:center; border:0; }

/* Left tab navigation + panels */
.cz-account-layout{ display:grid; grid-template-columns:220px 1fr; gap:32px; align-items:start; margin-top:28px; }
.cz-account-tabs{
  display:flex; flex-direction:column; gap:4px; background:#fff; border:1px solid var(--cz-border);
  border-radius: var(--cz-radius); padding:10px; box-shadow: var(--cz-card-shadow); position:sticky; top:24px;
}
.cz-account-tab{
  display:flex; align-items:center; gap:10px; width:100%; padding:11px 14px; border:0; background:transparent;
  border-radius: var(--cz-radius-sm); font-family: var(--cz-font-body); font-size:14.5px; font-weight:600;
  color: var(--cz-navy-soft); cursor:pointer; text-align:left; transition: background .15s ease, color .15s ease;
}
.cz-account-tab svg{ width:18px; height:18px; flex-shrink:0; }
.cz-account-tab:hover{ background: var(--cz-bg); color: var(--cz-navy); }
.cz-account-tab.is-active{ background: var(--cz-gradient-soft); color: var(--cz-blue); }
.cz-account-panels{ min-width:0; }
.cz-account-panel[hidden]{ display:none; }
.cz-account-head-left{ text-align:left; max-width:none; margin:0 0 28px; }

/* Overview tab */
.cz-overview-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.cz-overview-card{
  background:#fff; border:1px solid var(--cz-border); border-radius: var(--cz-radius);
  padding:22px; box-shadow: var(--cz-card-shadow); display:flex; flex-direction:column;
}
.cz-overview-card-wide{ grid-column:1 / -1; }
.cz-overview-card-label{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--cz-gray-light); }
.cz-overview-plan-row{ margin:10px 0 4px; }
.cz-overview-plan-row strong{ font-family: var(--cz-font-display); font-size:26px; font-weight:800; color: var(--cz-navy); text-transform:capitalize; }
.cz-overview-sub{ font-size:13px; color: var(--cz-gray); margin:0 0 16px; }
.cz-overview-cancel-note{ font-size:13px; color: var(--cz-gray); margin:0 0 16px; }
.cz-overview-plan-actions{ margin-top:auto; display:flex; flex-wrap:wrap; gap:8px; }
.cz-overview-manage-btn,
.cz-overview-cancel-btn{ align-self:flex-start; padding:9px 18px; font-size:13.5px; }
.cz-overview-credits-row{ display:flex; align-items:baseline; gap:6px; margin:10px 0 12px; }
.cz-overview-credits-row strong{ font-family: var(--cz-font-display); font-size:26px; font-weight:800; color: var(--cz-navy); }
.cz-overview-credits-total{ font-size:14px; color: var(--cz-gray-light); font-weight:600; }
.cz-credit-bar{ height:8px; border-radius: var(--cz-radius-pill); background: var(--cz-bg); overflow:hidden; margin-bottom:10px; }
.cz-credit-bar-fill{ height:100%; width:0; border-radius: var(--cz-radius-pill); background: var(--cz-gradient); transition: width .3s ease; }
.cz-overview-detail-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0;
  border-bottom:1px solid var(--cz-border); font-size:14px;
}
.cz-overview-detail-row:last-child{ border-bottom:0; padding-bottom:0; }
.cz-overview-detail-row span{ color: var(--cz-gray); }
.cz-overview-detail-row strong{ color: var(--cz-navy); font-weight:600; }
.cz-overview-note{
  margin:20px 0 0; font-size:13px; color: var(--cz-gray); background: var(--cz-bg);
  border-radius: var(--cz-radius-sm); padding:12px 16px;
}

@media (max-width: 780px){
  .cz-account-layout{ grid-template-columns:1fr; }
  .cz-account-tabs{ flex-direction:row; position:static; overflow-x:auto; }
  .cz-account-tab{ flex:1; justify-content:center; white-space:nowrap; }
  .cz-overview-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Legal pages (Terms of Service / Privacy Policy / Refund Policy)
   ========================================================================== */
.cz-legal{ padding:64px 0 100px; }
.cz-legal-wrap{ max-width:760px; }
.cz-legal-header{ margin-bottom:32px; padding-bottom:28px; border-bottom:1px solid var(--cz-border); }
.cz-legal-title{
  font-family: var(--cz-font-display); font-weight:800; letter-spacing:-0.02em;
  font-size:38px; margin:0; color: var(--cz-navy);
}
.cz-legal-content{ font-size:16px; line-height:1.8; color: var(--cz-navy-soft); }
.cz-legal-content em{ color: var(--cz-gray-light); font-size:14.5px; font-style:normal; }
.cz-legal-content h2{
  font-family: var(--cz-font-display); font-weight:700; letter-spacing:-0.01em;
  font-size:21px; color: var(--cz-navy); margin:36px 0 12px;
}
.cz-legal-content h2:first-of-type{ margin-top:24px; }
.cz-legal-content h3{ font-size:17px; font-weight:700; color: var(--cz-navy); margin:22px 0 8px; }
.cz-legal-content p{ margin:0 0 16px; }
.cz-legal-content ul{ margin:0 0 16px; padding-left:22px; }
.cz-legal-content li{ margin-bottom:8px; padding-left:2px; }
.cz-legal-content li::marker{ color: var(--cz-blue); }
.cz-legal-content strong{ color: var(--cz-navy); font-weight:700; }
.cz-legal-content a{ color: var(--cz-blue); font-weight:600; text-decoration:underline; text-decoration-color: rgba(79,91,255,.35); }
.cz-legal-content a:hover{ text-decoration-color: var(--cz-blue); }
@media (max-width:640px){
  .cz-legal{ padding:44px 0 72px; }
  .cz-legal-title{ font-size:28px; }
}