/* ============================================================
   HOMEPAGE — Premium Redesign
   Cool palette · Glassmorphism · Scroll reveals · Bento grid
   ============================================================ */

/* ---- Hero ---- */
.hero-viewport {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(160deg, hsl(220,18%,5%) 0%, hsl(210,20%,8%) 40%, hsl(230,15%,6%) 100%);
}

#hero-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 2rem;
    max-width: 900px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 1.2rem;
    border-radius: 100px;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: hsl(190,100%,70%);
    background: hsla(200,80%,50%,.08);
    border: 1px solid hsla(200,80%,50%,.18);
    margin-bottom: 2rem;
    backdrop-filter: blur(8px);
}

.hero-badge .pulse {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: hsl(150,80%,55%);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%,100% { opacity: 1; box-shadow: 0 0 0 0 hsla(150,80%,55%,.6); }
    50%     { opacity: .7; box-shadow: 0 0 0 6px hsla(150,80%,55%,0); }
}

.hero-name {
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.03em;
    margin-bottom: 1.2rem;
    background: linear-gradient(135deg, hsl(0,0%,100%) 0%, hsl(210,50%,85%) 50%, hsl(190,100%,70%) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-tagline {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-weight: 400;
    color: hsl(210,15%,60%);
    max-width: 640px;
    margin: 0 auto 2.5rem;
    line-height: 1.6;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

.btn-glass {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 2rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    cursor: pointer;
    border: none;
}

.btn-glass.primary {
    background: linear-gradient(135deg, hsl(200,100%,50%), hsl(220,80%,55%));
    color: #fff;
    box-shadow: 0 4px 24px hsla(210,100%,50%,.25);
}

.btn-glass.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px hsla(210,100%,50%,.35);
}

.btn-glass.secondary {
    background: hsla(0,0%,100%,.04);
    color: hsl(210,20%,80%);
    border: 1px solid hsla(0,0%,100%,.1);
    backdrop-filter: blur(12px);
}

.btn-glass.secondary:hover {
    background: hsla(0,0%,100%,.08);
    border-color: hsla(200,80%,60%,.3);
    transform: translateY(-2px);
}

.scroll-hint {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: hsl(210,15%,40%);
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    animation: float 2.5s ease-in-out infinite;
}

.scroll-hint span {
    display: block;
    margin-top: .4rem;
    font-size: 1.2rem;
}

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

/* ---- Proof Strip ---- */
.proof-strip {
    background: hsl(220,15%,7%);
    border-top: 1px solid hsla(0,0%,100%,.04);
    border-bottom: 1px solid hsla(0,0%,100%,.04);
    padding: 3rem 0;
}

.proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.proof-stat {
    text-align: center;
    padding: 1rem;
}

.proof-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    background: linear-gradient(135deg, hsl(190,100%,70%), hsl(220,80%,70%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: .25rem;
}

.proof-label {
    font-size: .85rem;
    color: hsl(210,15%,50%);
    font-weight: 500;
}

/* ---- General sections ---- */
.section {
    padding: 6rem 0;
    position: relative;
}

.section-dark {
    background: hsl(220,18%,5%);
}

.section-alt {
    background: hsl(220,15%,7%);
}

.section-heading {
    text-align: center;
    margin-bottom: 3.5rem;
}

.section-heading h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: hsl(0,0%,95%);
    margin-bottom: .75rem;
}

.section-heading p {
    font-size: 1.1rem;
    color: hsl(210,15%,50%);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ---- Bento Grid ---- */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 1.25rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.bento-card {
    position: relative;
    padding: 2rem;
    border-radius: 16px;
    background: hsla(0,0%,100%,.025);
    border: 1px solid hsla(0,0%,100%,.06);
    backdrop-filter: blur(12px);
    overflow: hidden;
    transition: all .4s cubic-bezier(.4,0,.2,1);
}

.bento-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, hsla(200,80%,60%,.06) 0%, transparent 60%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}

.bento-card:hover {
    border-color: hsla(200,80%,60%,.2);
    transform: translateY(-4px);
    box-shadow: 0 16px 48px hsla(220,60%,10%,.4);
}

.bento-card:hover::before {
    opacity: 1;
}

/* Bento sizes */
.bento-card.wide   { grid-column: span 2; }
.bento-card.tall   { grid-row: span 2; }
.bento-card.full   { grid-column: span 3; }

.bento-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
    background: hsla(200,80%,50%,.1);
    border: 1px solid hsla(200,80%,50%,.15);
}

.bento-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: hsl(0,0%,95%);
    margin-bottom: .6rem;
}

.bento-card p {
    font-size: .95rem;
    color: hsl(210,15%,55%);
    line-height: 1.65;
}

.bento-tag {
    display: inline-block;
    padding: .2rem .7rem;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 500;
    background: hsla(200,80%,50%,.1);
    color: hsl(190,100%,70%);
    border: 1px solid hsla(200,80%,50%,.15);
    margin-top: .8rem;
    margin-right: .35rem;
}

/* ---- Nick AI Chat ---- */
.chat-section {
    padding: 6rem 0;
    background: linear-gradient(180deg, hsl(220,15%,7%) 0%, hsl(220,18%,5%) 100%);
}

.chat-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.chat-container-v2 {
    border-radius: 20px;
    overflow: hidden;
    background: hsla(0,0%,100%,.02);
    border: 1px solid hsla(0,0%,100%,.06);
    box-shadow: 0 24px 64px hsla(220,50%,5%,.5);
}

.chat-header-v2 {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: hsla(0,0%,100%,.03);
    border-bottom: 1px solid hsla(0,0%,100%,.06);
}

.chat-avatar {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, hsl(200,100%,50%), hsl(260,70%,60%));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.chat-header-info h3 {
    font-size: 1rem;
    font-weight: 600;
    color: hsl(0,0%,95%);
    margin: 0;
}

.chat-header-info span {
    font-size: .8rem;
    color: hsl(150,60%,55%);
}

.chat-messages {
    height: 380px;
    overflow-y: auto;
    padding: 1.5rem;
    background: hsla(220,20%,4%,.6);
    scrollbar-width: thin;
    scrollbar-color: hsla(0,0%,100%,.1) transparent;
}

.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: hsla(0,0%,100%,.1); border-radius: 3px; }

.chat-quick-replies {
    display: flex;
    gap: .5rem;
    padding: .75rem 1.5rem;
    flex-wrap: wrap;
    border-bottom: 1px solid hsla(0,0%,100%,.04);
    background: hsla(0,0%,100%,.015);
}

.quick-reply {
    padding: .4rem 1rem;
    border-radius: 100px;
    font-size: .8rem;
    font-weight: 500;
    color: hsl(200,60%,70%);
    background: hsla(200,80%,50%,.06);
    border: 1px solid hsla(200,80%,50%,.15);
    cursor: pointer;
    transition: all .2s ease;
}

.quick-reply:hover {
    background: hsla(200,80%,50%,.12);
    border-color: hsla(200,80%,50%,.3);
}

.chat-input-v2 {
    display: flex;
    gap: .75rem;
    padding: 1rem 1.25rem;
    background: hsla(0,0%,100%,.02);
    border-top: 1px solid hsla(0,0%,100%,.06);
    align-items: flex-end;
}

.chat-input-v2 textarea {
    flex: 1;
    background: hsla(0,0%,100%,.04);
    border: 1px solid hsla(0,0%,100%,.08);
    border-radius: 12px;
    padding: .75rem 1rem;
    color: hsl(0,0%,95%);
    font-family: inherit;
    font-size: .95rem;
    resize: none;
    outline: none;
    transition: border-color .2s ease;
}

.chat-input-v2 textarea:focus {
    border-color: hsla(200,80%,60%,.4);
}

.chat-input-v2 textarea::placeholder {
    color: hsl(210,15%,40%);
}

.chat-send-v2 {
    padding: .75rem 1.5rem;
    border-radius: 12px;
    background: linear-gradient(135deg, hsl(200,100%,50%), hsl(220,80%,55%));
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    border: none;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
}

.chat-send-v2:hover {
    box-shadow: 0 4px 16px hsla(210,100%,50%,.3);
}

.chat-send-v2:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Chat messages — reuse existing .message classes from base */
.message {
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 14px;
    max-width: 80%;
    animation: msgIn .3s ease;
    line-height: 1.7;
}

.message.user {
    background: linear-gradient(135deg, hsl(200,100%,45%), hsl(220,80%,50%));
    color: #fff;
    margin-left: auto;
    border-bottom-right-radius: 4px;
}

.message.assistant, .message.ai {
    background: hsla(0,0%,100%,.05);
    color: hsl(0,0%,90%);
    border-bottom-left-radius: 4px;
    border: 1px solid hsla(0,0%,100%,.06);
}

.message.system {
    background: hsla(0,0%,100%,.03);
    color: hsl(210,15%,55%);
    text-align: center;
    margin: 0 auto;
    max-width: 90%;
    font-style: italic;
    font-size: .9rem;
}

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

/* ---- Terminal / Live Agent ---- */
.terminal-section {
    padding: 6rem 0;
    background: hsl(220,18%,5%);
}

.terminal-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.terminal-window {
    border-radius: 16px;
    overflow: hidden;
    background: hsla(220,20%,6%,.9);
    border: 1px solid hsla(0,0%,100%,.06);
    box-shadow: 0 24px 64px hsla(220,50%,5%,.5);
}

.terminal-titlebar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.25rem;
    background: hsla(0,0%,100%,.03);
    border-bottom: 1px solid hsla(0,0%,100%,.06);
}

.terminal-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
}
.terminal-dot.red    { background: hsl(0,70%,55%); }
.terminal-dot.yellow { background: hsl(40,90%,55%); }
.terminal-dot.green  { background: hsl(130,60%,50%); }

.terminal-title {
    flex: 1;
    text-align: center;
    font-size: .8rem;
    font-weight: 500;
    color: hsl(210,15%,45%);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.terminal-status-badge {
    font-size: .7rem;
    padding: .2rem .6rem;
    border-radius: 100px;
    font-weight: 500;
}

.terminal-status-badge.connected {
    background: hsla(150,60%,50%,.12);
    color: hsl(150,60%,55%);
    border: 1px solid hsla(150,60%,50%,.2);
}

.terminal-status-badge.disconnected {
    background: hsla(0,60%,50%,.12);
    color: hsl(0,60%,55%);
    border: 1px solid hsla(0,60%,50%,.2);
}

.terminal-body {
    padding: 1.25rem;
    max-height: 420px;
    overflow-y: auto;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: .82rem;
    line-height: 1.7;
    scrollbar-width: thin;
    scrollbar-color: hsla(0,0%,100%,.08) transparent;
}

.terminal-body::-webkit-scrollbar { width: 6px; }
.terminal-body::-webkit-scrollbar-thumb { background: hsla(0,0%,100%,.08); border-radius: 3px; }

.terminal-body .log-entry {
    padding: .5rem .75rem;
    margin-bottom: .35rem;
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition: background .2s ease;
}

.terminal-body .log-entry:hover {
    background: hsla(0,0%,100%,.02);
}

.terminal-body .log-entry.info    { border-left-color: hsl(210,80%,60%); }
.terminal-body .log-entry.success { border-left-color: hsl(150,60%,50%); }
.terminal-body .log-entry.warning { border-left-color: hsl(40,90%,55%); }
.terminal-body .log-entry.error   { border-left-color: hsl(0,70%,55%); }

.terminal-body .log-timestamp {
    color: hsl(210,15%,38%);
    margin-right: .75rem;
    font-size: .75rem;
}

.terminal-body .log-action {
    color: hsl(190,100%,65%);
    font-weight: 600;
    margin-right: .5rem;
}

.terminal-body .log-content {
    color: hsl(0,0%,75%);
}

.terminal-body .log-reasoning {
    color: hsl(210,15%,45%);
    font-style: italic;
    margin-top: .3rem;
    padding-left: 1rem;
    font-size: .78rem;
}

.terminal-footer-bar {
    padding: .6rem 1.25rem;
    border-top: 1px solid hsla(0,0%,100%,.04);
    text-align: center;
    font-size: .75rem;
    color: hsl(210,15%,38%);
}

/* ---- Thinking Stream ---- */
.thinking-section {
    padding: 6rem 0;
    background: hsl(220,15%,7%);
}

.thinking-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.thinking-status-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 12px;
    background: hsla(0,0%,100%,.02);
    border: 1px solid hsla(0,0%,100%,.06);
    margin-bottom: 1.5rem;
    font-size: .85rem;
}

.thinking-status-bar strong {
    color: hsl(210,15%,55%);
}

.thinking-status-bar span {
    color: hsl(0,0%,80%);
}

.thinking-feed {
    border-radius: 12px;
    background: hsla(0,0%,100%,.02);
    border: 1px solid hsla(0,0%,100%,.06);
    padding: 1.25rem;
    max-height: 500px;
    overflow-y: auto;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: .82rem;
}

.thinking-item {
    padding: .75rem 1rem;
    margin-bottom: .5rem;
    border-left: 3px solid hsl(210,60%,50%);
    background: hsla(0,0%,100%,.015);
    border-radius: 6px;
    animation: slideInLeft .3s ease-out;
}

.thinking-item.post-created,
.thinking-item.post { border-left-color: hsl(150,60%,50%); }
.thinking-item.reply-sent,
.thinking-item.reply { border-left-color: hsl(200,80%,60%); }
.thinking-item.tweet-liked,
.thinking-item.like { border-left-color: hsl(40,90%,55%); }
.thinking-item.wait,
.thinking-item.monitoring-cycle { border-left-color: hsl(210,15%,40%); }

.thinking-time { font-size: .75rem; color: hsl(210,15%,40%); margin-bottom: .2rem; }
.thinking-action { font-weight: 600; color: hsl(0,0%,88%); margin-bottom: .2rem; }
.thinking-reasoning { color: hsl(210,15%,55%); line-height: 1.6; white-space: pre-wrap; }

.thinking-decision {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: .72rem;
    font-weight: 600;
    margin-left: .5rem;
}
.thinking-decision.proceed, .thinking-decision.success { background: hsla(150,60%,50%,.15); color: hsl(150,60%,55%); }
.thinking-decision.wait    { background: hsla(40,90%,55%,.15); color: hsl(40,90%,55%); }
.thinking-decision.skip    { background: hsla(0,0%,50%,.15); color: hsl(0,0%,55%); }
.thinking-decision.checking { background: hsla(200,80%,55%,.15); color: hsl(200,80%,60%); }

/* ---- CTA ---- */
.cta-section {
    padding: 6rem 0;
    text-align: center;
    background: linear-gradient(180deg, hsl(220,18%,5%) 0%, hsl(220,20%,8%) 100%);
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 600px; height: 600px;
    background: radial-gradient(circle, hsla(200,100%,50%,.06) 0%, transparent 70%);
    pointer-events: none;
}

.cta-section h2 {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    color: hsl(0,0%,95%);
    margin-bottom: 1rem;
}

.cta-section p {
    font-size: 1.1rem;
    color: hsl(210,15%,50%);
    max-width: 550px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}

/* ---- Scroll animation states ---- */
[data-animate] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
}

[data-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
}

[data-animate="fade-up"]          { transform: translateY(24px); }
[data-animate="fade-left"]        { transform: translateX(-24px) translateY(0); }
[data-animate="fade-right"]       { transform: translateX(24px) translateY(0); }
[data-animate="scale"]            { transform: scale(.95); }

[data-animate="fade-left"].is-visible,
[data-animate="fade-right"].is-visible,
[data-animate="scale"].is-visible {
    opacity: 1;
    transform: none;
}

/* Staggered delays for bento cards */
.bento-card:nth-child(1) { transition-delay: 0s; }
.bento-card:nth-child(2) { transition-delay: .08s; }
.bento-card:nth-child(3) { transition-delay: .16s; }
.bento-card:nth-child(4) { transition-delay: .24s; }
.bento-card:nth-child(5) { transition-delay: .32s; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .bento-grid {
        grid-template-columns: 1fr 1fr;
    }
    .bento-card.wide { grid-column: span 2; }
    .bento-card.full { grid-column: span 2; }
    .proof-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }
    .bento-card.wide,
    .bento-card.full { grid-column: span 1; }
    .proof-grid { grid-template-columns: 1fr 1fr; }
    .hero-name { font-size: 2.5rem; }
    .chat-messages { height: 300px; }
    .message { max-width: 92%; }
    .chat-quick-replies { gap: .35rem; }
    .quick-reply { font-size: .75rem; padding: .35rem .8rem; }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}