/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;height:100%}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:#0a0a0f;color:#e4e4e7;line-height:1.6;overflow-x:hidden;min-height:100vh;min-height:100dvh;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%}

/* ── Utilities ── */
.container{max-width:1120px;margin:0 auto;padding:0 24px}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-weight:600;border:none;border-radius:12px;cursor:pointer;transition:all .25s ease}
.btn-primary{background:linear-gradient(135deg,#6d5aff,#a855f7);color:#fff;box-shadow:0 4px 24px rgba(109,90,255,.35)}
.btn-primary:hover{box-shadow:0 6px 32px rgba(109,90,255,.55);transform:translateY(-1px)}
.btn-outline{background:transparent;color:#e4e4e7;border:1.5px solid rgba(255,255,255,.15)}
.btn-outline:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.05)}
.btn-sm{padding:8px 20px;font-size:.875rem}
.btn-lg{padding:14px 32px;font-size:1rem}
.btn-block{width:100%;padding:12px 0}

/* ── Navbar ── */
.navbar{position:fixed;top:0;left:0;right:0;z-index:100;backdrop-filter:blur(16px);background:rgba(10,10,15,.85);border-bottom:1px solid rgba(255,255,255,.06);padding-top:env(safe-area-inset-top,0px)}
.nav-container{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-size:1.25rem;font-weight:700;display:flex;align-items:center;gap:6px}
.logo-icon{font-size:1.4rem;background:linear-gradient(135deg,#6d5aff,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.nav-links{display:flex;gap:32px}
.nav-links a{font-size:.9rem;font-weight:500;color:#a1a1aa;transition:color .2s}
.nav-links a:hover{color:#fff}

/* ── Hero ── */
.hero{position:relative;padding:calc(160px + env(safe-area-inset-top,0px)) 0 100px;text-align:center;overflow:hidden}
.hero-glow{position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:700px;height:700px;background:radial-gradient(circle,rgba(109,90,255,.2) 0%,transparent 70%);pointer-events:none;z-index:0}
.hero-container{position:relative;z-index:1}
.badge{display:inline-block;padding:6px 16px;font-size:.8rem;font-weight:600;border-radius:999px;background:rgba(109,90,255,.12);color:#a78bfa;border:1px solid rgba(109,90,255,.25);margin-bottom:24px}
.hero h1{font-size:clamp(2.4rem,5.5vw,4.2rem);font-weight:800;line-height:1.1;letter-spacing:-.02em;margin-bottom:20px}
.gradient-text{background:linear-gradient(135deg,#6d5aff,#c084fc,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-desc{max-width:540px;margin:0 auto 36px;font-size:1.1rem;color:#a1a1aa}
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ── Section common ── */
.section-badge{display:inline-block;padding:5px 14px;font-size:.75rem;font-weight:600;border-radius:999px;background:rgba(109,90,255,.1);color:#a78bfa;border:1px solid rgba(109,90,255,.2);margin-bottom:16px;text-transform:uppercase;letter-spacing:.06em}
.features,.demo-section,.pricing{padding:100px 0;text-align:center}
.features h2,.demo-section h2,.pricing h2{font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:700;margin-bottom:48px;letter-spacing:-.01em}

/* ── Features Grid ── */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;text-align:left}
.feature-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:32px;transition:all .3s ease}
.feature-card:hover{background:rgba(255,255,255,.06);border-color:rgba(109,90,255,.25);transform:translateY(-4px)}
.feature-icon{font-size:2rem;margin-bottom:16px}
.feature-card h3{font-size:1.15rem;font-weight:600;margin-bottom:8px}
.feature-card p{color:#a1a1aa;font-size:.925rem;line-height:1.65}

/* ── Demo Chat ── */
.chat-window{max-width:720px;margin:0 auto;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:20px;overflow:hidden;text-align:left}
.chat-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.chat-title{font-size:.9rem;font-weight:600;color:#a1a1aa}
.btn-icon{background:none;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:8px;cursor:pointer;color:#a1a1aa;transition:all .2s;display:flex;align-items:center;justify-content:center}
.btn-icon:hover{color:#fff;border-color:rgba(109,90,255,.4);background:rgba(109,90,255,.1)}
.api-status{font-size:.7rem;padding:3px 8px;border-radius:999px;font-weight:600;margin-left:8px}
.api-status.active{background:rgba(34,197,94,.15);color:#4ade80}
.api-status.inactive{background:rgba(239,68,68,.12);color:#f87171}
.chat-messages{padding:28px 24px;min-height:320px;max-height:420px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.message{display:flex;gap:12px;animation:fadeUp .35s ease}
.ai-message .message-avatar{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,#6d5aff,#a855f7);display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;color:#fff}
.user-message{flex-direction:row-reverse}
.user-message .message-content{background:rgba(109,90,255,.15);border-color:rgba(109,90,255,.25)}
.message-content{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px 16px;max-width:85%;font-size:.925rem;line-height:1.6}
.message-content p{margin:0}

/* typing dots */
.typing-dots{display:flex;gap:5px;padding:4px 0}
.typing-dots span{width:7px;height:7px;border-radius:50%;background:#a78bfa;animation:bounce .6s infinite alternate}
.typing-dots span:nth-child(2){animation-delay:.15s}
.typing-dots span:nth-child(3){animation-delay:.3s}
@keyframes bounce{to{opacity:.3;transform:translateY(-4px)}}

.chat-input-area{display:flex;gap:12px;padding:16px 20px;border-top:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.chat-input-area input{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 16px;font-size:.95rem;color:#fff;font-family:inherit;outline:none;transition:border .2s}
.chat-input-area input:focus{border-color:rgba(109,90,255,.5)}
.chat-input-area input::placeholder{color:#71717a}
.btn-send{width:48px;height:48px;border-radius:12px;padding:0;flex-shrink:0}

/* ── Pricing ── */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;max-width:920px;margin:0 auto}
.pricing-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:36px 28px;text-align:left;position:relative;transition:all .3s ease}
.pricing-card:hover{border-color:rgba(109,90,255,.25)}
.pricing-card.popular{border-color:rgba(109,90,255,.4);background:rgba(109,90,255,.06)}
.popular-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:4px 16px;font-size:.75rem;font-weight:600;border-radius:999px;background:linear-gradient(135deg,#6d5aff,#a855f7);color:#fff}
.pricing-card h3{font-size:1.2rem;font-weight:600;margin-bottom:8px}
.price{font-size:2.4rem;font-weight:800;margin-bottom:24px}
.price span{font-size:.95rem;font-weight:500;color:#71717a}
.pricing-card ul{margin-bottom:28px;display:flex;flex-direction:column;gap:10px}
.pricing-card li{font-size:.9rem;color:#a1a1aa}

/* ── Footer ── */
.footer{padding:48px 0;border-top:1px solid rgba(255,255,255,.06)}
.footer-container{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.footer-brand p{color:#71717a;font-size:.875rem;margin-top:4px}
.footer-links{display:flex;gap:24px}
.footer-links a{font-size:.875rem;color:#71717a;transition:color .2s}
.footer-links a:hover{color:#fff}
.copyright{font-size:.8rem;color:#52525b}

/* ── Modal ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:200}
.modal-overlay.show{display:flex}
.modal{background:#18181b;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:32px;max-width:440px;width:90%;text-align:left;animation:fadeUp .25s ease}
.modal h3{font-size:1.2rem;margin-bottom:8px}
.modal p{color:#a1a1aa;font-size:.875rem;margin-bottom:12px;line-height:1.5}
.api-link{display:inline-block;font-size:.82rem;color:#a78bfa;margin-bottom:16px;transition:color .2s}
.api-link:hover{color:#c4b5fd}
.modal input{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 16px;font-size:.9rem;color:#fff;font-family:inherit;outline:none;margin-bottom:20px;transition:border .2s}
.modal input:focus{border-color:rgba(109,90,255,.5)}
.modal-label{display:block;font-size:.8rem;font-weight:600;color:#a1a1aa;margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em}
.modal select{width:100%;background:#1e1e23;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 16px;font-size:.9rem;color:#fff;font-family:inherit;outline:none;margin-bottom:20px;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;transition:border .2s}
.modal select:focus{border-color:rgba(109,90,255,.5)}
.modal select option{background:#1e1e23;color:#fff}
.modal-actions{display:flex;gap:10px;justify-content:flex-end}

/* ── Auth Modal ── */
.modal-tabs{display:flex;gap:0;margin-bottom:24px;border-bottom:1px solid rgba(255,255,255,.1)}
.modal-tab{flex:1;padding:12px 0;background:none;border:none;color:#71717a;font-family:inherit;font-size:.9rem;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s}
.modal-tab.active{color:#fff;border-bottom-color:#6d5aff}
.modal-tab:hover{color:#d4d4d8}
.modal-close{position:absolute;top:16px;right:16px;background:none;border:none;color:#71717a;font-size:1.5rem;cursor:pointer;line-height:1;transition:color .2s}
.modal-close:hover{color:#fff}
.modal{position:relative}
.auth-form{display:flex;flex-direction:column}
.auth-error{color:#f87171;font-size:.82rem;margin:-12px 0 16px;min-height:1.2em}

/* ── Nav Auth ── */
.nav-auth{display:flex;align-items:center;gap:12px}
.user-menu{position:relative}
.user-menu-btn{display:flex;align-items:center;gap:8px;background:none;border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:4px 14px 4px 4px;cursor:pointer;color:#e4e4e7;font-family:inherit;font-size:.85rem;transition:border-color .2s}
.user-menu-btn:hover{border-color:rgba(255,255,255,.3)}
.user-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#6d5aff,#a855f7);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#fff}
.user-name{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:220px;background:#18181b;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px;display:none;z-index:201;animation:fadeUp .15s ease}
.user-dropdown.show{display:block}
.user-dropdown-plan{font-size:.82rem;font-weight:600;color:#a78bfa;margin-bottom:4px}
.user-dropdown-usage{font-size:.78rem;color:#71717a;margin-bottom:8px}
.user-dropdown hr{border:none;border-top:1px solid rgba(255,255,255,.08);margin:6px 0}
.user-dropdown-item{display:block;width:100%;text-align:left;background:none;border:none;color:#a1a1aa;font-family:inherit;font-size:.85rem;padding:8px 4px;cursor:pointer;border-radius:8px;transition:all .2s}
.user-dropdown-item:hover{color:#fff;background:rgba(255,255,255,.05)}

/* ── Toast ── */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);background:#18181b;color:#e4e4e7;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px 24px;font-size:.9rem;z-index:300;opacity:0;transition:all .3s ease;pointer-events:none;max-width:90%;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.toast-success{border-color:rgba(74,222,128,.3);background:#052e16}
.toast.toast-error{border-color:rgba(248,113,113,.3);background:#450a0a}
.toast.toast-info{border-color:rgba(96,165,250,.3);background:#172554}

/* ── Animations ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ── Scrollbar ── */
.chat-messages::-webkit-scrollbar{width:6px}
.chat-messages::-webkit-scrollbar-track{background:transparent}
.chat-messages::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}

/* ── Responsive ── */

/* Tablet */
@media(max-width:768px){
    .nav-links{display:none}
    .hero{padding:calc(120px + env(safe-area-inset-top,0px)) 0 80px}
    .hero h1{font-size:2rem}
    .hero-desc{font-size:1rem;padding:0 8px}
    .features,.demo-section,.pricing{padding:64px 0}
    .features h2,.demo-section h2,.pricing h2{margin-bottom:32px}
    .features-grid{grid-template-columns:1fr}
    .pricing-grid{grid-template-columns:1fr;max-width:400px}
    .chat-messages{min-height:260px;max-height:360px;padding:20px 16px}
    .chat-input-area{padding:12px 14px;gap:10px}
    .message-content{max-width:90%}
}

/* Mobile small */
@media(max-width:480px){
    .container{padding:0 16px}
    .hero{padding:calc(100px + env(safe-area-inset-top,0px)) 0 60px}
    .hero h1{font-size:1.65rem}
    .hero-desc{font-size:.9rem}
    .hero-actions{flex-direction:column;align-items:center;gap:12px}
    .hero-actions .btn-lg{width:100%;max-width:280px}
    .badge,.section-badge{font-size:.7rem}
    .feature-card{padding:24px 20px}
    .feature-icon{font-size:1.6rem}
    .feature-card h3{font-size:1.05rem}
    .feature-card p{font-size:.85rem}
    .chat-window{border-radius:14px}
    .chat-header{padding:10px 14px}
    .chat-messages{min-height:220px;max-height:320px;padding:16px 12px;gap:12px}
    .chat-input-area{padding:10px 12px;gap:8px}
    .chat-input-area input{padding:10px 12px;font-size:.875rem}
    .btn-send{width:42px;height:42px}
    .message-content{padding:10px 12px;font-size:.85rem;max-width:92%}
    .ai-message .message-avatar{width:28px;height:28px;font-size:.75rem}
    .pricing-card{padding:28px 20px}
    .price{font-size:2rem}
    .pricing-card li{font-size:.825rem}
    .footer{padding:32px 0}
    .footer-links{gap:16px}
    .nav-container .btn-sm{padding:6px 14px;font-size:.8rem}
    .user-name{display:none}
}

/* Safe area for notched phones */
@supports(padding: env(safe-area-inset-bottom)){
    .chat-input-area{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
    .footer{padding-bottom:calc(48px + env(safe-area-inset-bottom))}
}
@supports(padding: env(safe-area-inset-left)){
    .container{padding-left:calc(24px + env(safe-area-inset-left));padding-right:calc(24px + env(safe-area-inset-right))}
}

/* ── PWA Standalone Mode ── */
@media(display-mode: standalone){
    body{-webkit-user-select:none;user-select:none}
    .chat-messages,.message-content,input,textarea{-webkit-user-select:text;user-select:text}
    .chat-window{border-radius:16px;max-width:100%}
    .chat-messages{max-height:50vh}
}

/* Touch improvements */
@media(hover:none){
    .feature-card:hover{transform:none}
    .btn-primary:hover{transform:none}
}

/* Landscape phone */
@media(max-height:500px) and (orientation:landscape){
    .hero{padding:80px 0 40px}
    .chat-messages{min-height:180px;max-height:240px}
}