:root {
    --purple: #7c3aed;
    --purple-light: #a855f7;
    --purple-glow: rgba(124, 58, 237, 0.4);
    --neon: #c084fc;
    --dark: #050508;
    --dark2: #0d0d14;
    --dark3: #12121e;
    --border: rgba(124, 58, 237, 0.25);
    --text: #e2e8f0;
    --muted: #94a3b8;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }

  body {
    background: var(--dark);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
  }

  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
      linear-gradient(rgba(124,58,237,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(124,58,237,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
  }

  body::after {
    content: '';
    position: fixed;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(124,58,237,0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
  }

  .container {
    position: relative;
    z-index: 1;
    max-width: 480px;
    margin: 0 auto;
    padding: 0 20px 120px;
  }

  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40px;
    margin-bottom: 28px;
  }

  .hero-img-wrap {
    position: relative;
    width: 200px;
    height: 220px;
    margin-bottom: 20px;
  }

  .hero-img-wrap::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--purple), var(--neon), var(--purple));
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
    z-index: -1;
  }

  @keyframes gradientShift {
    0%,100%{background-position:0% 50%} 50%{background-position:100% 50%}
  }

  .hero-img {
    width: 100%;
    height: 100%;
    border-radius: 18px;
    object-fit: cover;
    object-position: center top;
    animation: float 4s ease-in-out infinite;
    filter: contrast(1.05) saturate(1.1);
  }

  @keyframes float {
    0%,100%{transform:translateY(0px)} 50%{transform:translateY(-8px)}
  }

  .glow-ring {
    position: absolute;
    inset: -12px;
    border-radius: 28px;
    border: 1px solid var(--purple-glow);
    animation: pulseRing 2.5s ease-in-out infinite;
    pointer-events: none;
  }

  @keyframes pulseRing {
    0%,100%{opacity:0.3;transform:scale(1)} 50%{opacity:0.7;transform:scale(1.02)}
  }

  .logo-text {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 48px;
    letter-spacing: 6px;
    color: #fff;
    text-shadow: 0 0 20px var(--purple-glow), 0 0 40px rgba(124,58,237,0.2);
    line-height: 1;
  }

  .logo-text span { color: var(--neon); }

  .name-line {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: 4px;
    color: var(--muted);
    margin-top: 2px;
  }

  .title-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 5px 14px;
    background: rgba(124,58,237,0.15);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--neon);
    letter-spacing: 2px;
  }

  .title-badge::before {
    content: '▶';
    font-size: 8px;
    animation: blink 1.2s step-end infinite;
  }

  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

  .terminal {
    background: rgba(13,13,20,0.9);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 24px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    line-height: 1.7;
    position: relative;
    overflow: hidden;
  }

  .terminal::before {
    content: '';
    position: absolute;
    top:0; left:0; right:0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--neon), transparent);
    animation: scanLine 4s ease-in-out infinite;
  }

  @keyframes scanLine { 0%,100%{opacity:0} 40%,60%{opacity:1} }

  .terminal-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }

  .dot { width:10px; height:10px; border-radius:50%; }
  .dot-r { background:#ff5f57; }
  .dot-y { background:#febc2e; }
  .dot-g { background:#28c840; }

  .terminal-title {
    margin-left: auto;
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 1px;
  }

  .cli-line { color: var(--muted); }
  .cli-line .prompt { color: var(--neon); }
  .cli-line .cmd { color: #fff; }
  .cli-output { color: #a5f3fc; }
  .cli-cursor {
    display: inline-block;
    width: 8px; height: 14px;
    background: var(--neon);
    animation: blink 1s step-end infinite;
    vertical-align: text-bottom;
    margin-left: 2px;
  }

  .links-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .link-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: rgba(13,13,20,0.8);
    border: 1px solid var(--border);
    border-radius: 14px;
    text-decoration: none;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
  }

  .link-btn::before {
    content: '';
    position: absolute;
    left:0; top:0; bottom:0;
    width: 3px;
    background: linear-gradient(180deg, var(--purple), var(--neon));
    opacity: 0;
    transition: opacity 0.25s;
  }

  .link-btn:hover {
    border-color: rgba(124,58,237,0.5);
    background: rgba(124,58,237,0.1);
    transform: translateX(4px);
    box-shadow: 0 0 20px var(--purple-glow);
  }

  .link-btn:hover::before { opacity:1; }

  .link-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: rgba(124,58,237,0.15);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.25s;
  }

  .link-btn:hover .link-icon {
    background: rgba(124,58,237,0.3);
    box-shadow: 0 0 12px var(--purple-glow);
  }

  .link-icon svg { width:18px; height:18px; }
  .link-label { flex:1; }
  .link-label small {
    display: block;
    font-size: 11px;
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    margin-top: 1px;
  }

  .link-arrow {
    color: var(--purple-light);
    font-size: 16px;
    opacity: 0.6;
    transition: all 0.25s;
  }

  .link-btn:hover .link-arrow { opacity:1; transform:translateX(3px); }

  .section-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--purple);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
  }

  .footer {
    text-align: center;
    margin-top: 32px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 1px;
  }

  /* ── CHAT FAB (links to /phanzo.php) ── */
  .chat-fab {
    position: fixed;
    bottom: 24px; right: 20px;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--purple), var(--purple-light));
    border: none;
    cursor: pointer;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 0 0 0 var(--purple-glow);
    animation: chatPulse 2.5s ease-in-out infinite;
    transition: transform 0.2s;
  }

  .chat-fab:hover { transform: scale(1.1); }

  @keyframes chatPulse {
    0%,100%{box-shadow:0 0 0 0 var(--purple-glow)}
    50%{box-shadow:0 0 0 12px rgba(124,58,237,0)}
  }

  .chat-fab svg { width:24px; height:24px; color:#fff; }

  /* ── Shared message + lead form styles (used by /phanzo.php) ── */

  .msg {
    display: flex;
    gap: 10px;
    animation: msgIn 0.2s ease;
  }

  @keyframes msgIn {
    from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)}
  }

  .msg.user { flex-direction: row-reverse; }

  .msg-avatar {
    width: 28px; height: 28px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    margin-top: 2px;
  }

  .msg.bot .msg-avatar {
    background: linear-gradient(135deg, var(--purple), var(--neon));
    font-family: 'Bebas Neue', sans-serif;
    font-size: 13px;
    color: #fff;
  }

  .msg.user .msg-avatar {
    background: rgba(255,255,255,0.08);
    color: var(--muted);
  }

  .msg-bubble {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.6;
  }

  .msg.bot .msg-bubble {
    background: rgba(124,58,237,0.12);
    border: 1px solid rgba(124,58,237,0.2);
    border-top-left-radius: 4px;
    color: var(--text);
  }

  .msg.user .msg-bubble {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-top-right-radius: 4px;
    color: var(--text);
  }

  .typing-indicator {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    align-items: center;
  }

  .typing-dot {
    width:6px; height:6px;
    border-radius:50%;
    background: var(--neon);
    animation: typingBounce 1.2s ease-in-out infinite;
  }

  .typing-dot:nth-child(2){animation-delay:0.2s}
  .typing-dot:nth-child(3){animation-delay:0.4s}

  @keyframes typingBounce {
    0%,60%,100%{transform:translateY(0);opacity:0.4}
    30%{transform:translateY(-6px);opacity:1}
  }

  .chat-error-banner {
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 12px 20px 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #fca5a5;
    text-align: center;
    display: none;
  }

  .lead-form {
    background: rgba(124,58,237,0.08);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .lead-form-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--neon);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 4px;
  }

  .lead-input {
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
    width: 100%;
  }

  .lead-input:focus { border-color: var(--purple); }
  .lead-input::placeholder { color: var(--muted); }

  .lead-submit {
    background: linear-gradient(135deg, var(--purple), var(--purple-light));
    border: none;
    border-radius: 10px;
    padding: 11px;
    color: #fff;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 15px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .lead-submit:hover { opacity:0.9; transform:translateY(-1px); }
  .lead-submit:disabled { opacity:0.5; cursor:not-allowed; transform:none; }