:root {
    --bg-dark: #0A0A0F;
    --bg-panel: #14141E;
    --primary: #5E35B1;
    --primary-glow: rgba(94, 53, 177, 0.5);
    --secondary: #00E5FF;
    --text-main: #FFFFFF;
    --text-muted: #8A8A9E;
    --glass-bg: rgba(20, 20, 30, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Outfit', sans-serif; }
body { background-color: var(--bg-dark); color: var(--text-main); line-height: 1.6; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Typography */
h1 { font-size: 3.5rem; line-height: 1.1; margin-bottom: 20px; font-weight: 800; }
h2 { font-size: 2.5rem; margin-bottom: 15px; }
.gradient-text {
    background: linear-gradient(90deg, #b388ff, #00e5ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text-center { text-align: center; }

/* Nav */
.site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--glass-border); }
.glassmorphism { background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav-flex { display: flex; justify-content: space-between; align-items: center; height: 80px; }
.logo { font-size: 24px; font-weight: 800; color: #fff; text-decoration: none; }
.logo span { color: var(--secondary); }
.nav-links { list-style: none; display: flex; gap: 30px; }
.nav-links a { color: var(--text-muted); text-decoration: none; font-weight: 600; transition: color 0.3s; }
.nav-links a:hover, .nav-links a.active { color: #fff; }

/* Buttons */
.btn { padding: 12px 28px; border-radius: 6px; font-weight: 600; text-decoration: none; display: inline-block; cursor: pointer; transition: all 0.3s; border: none; font-size: 16px; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 4px 15px var(--primary-glow); }
.btn-primary:hover { background: #6b3cd1; transform: translateY(-2px); box-shadow: 0 6px 20px var(--primary-glow); }
.btn-outline { background: transparent; border: 1px solid var(--glass-border); color: #fff; }
.btn-outline:hover { background: rgba(255,255,255,0.05); }
.btn-secondary { background: var(--secondary); color: var(--bg-dark); }
.btn-large { padding: 16px 36px; font-size: 18px; }
.full-width { width: 100%; text-align: center; display: block; }

/* Animated Hero Background */
.animated-bg {
    background: linear-gradient(-45deg, #0A0A0F, #1c103f, #0A0A0F, #00333d);
    background-size: 400% 400%;
    animation: gradientMove 15s ease infinite;
    padding: 120px 0;
    text-align: center;
    border-bottom: 1px solid var(--glass-border);
}
@keyframes gradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

.badge-pulse { display: inline-block; padding: 6px 16px; background: rgba(0, 229, 255, 0.1); color: var(--secondary); border-radius: 30px; border: 1px solid rgba(0, 229, 255, 0.2); margin-bottom: 20px; font-size: 14px; font-weight: 600; animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(0, 229, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); } }

.hero-content p { font-size: 20px; color: var(--text-muted); max-width: 700px; margin: 0 auto 40px; }
.cta-group { display: flex; justify-content: center; gap: 20px; }

/* Features & Grid */
.features-section { padding: 100px 0; }
.section-title { text-align: center; margin-bottom: 60px; }
.grid { display: grid; gap: 30px; }
.feature-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.feature-card { background: var(--bg-panel); padding: 40px; border-radius: 12px; border: 1px solid var(--glass-border); text-align: center; transition: transform 0.3s; }
.feature-card:hover { transform: translateY(-10px); border-color: var(--primary); }
.icon-wrapper { font-size: 40px; color: var(--secondary); margin-bottom: 20px; }
.feature-card p { color: var(--text-muted); }

/* Float Animations */
.float-anim { animation: float 6s ease-in-out infinite; }
.delay-1 { animation-delay: 1s; }
.delay-2 { animation-delay: 2s; }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }

/* APP UI Dashboard */
.app-dashboard { padding: 60px 0; }
.app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; }
.app-panel { background: var(--bg-panel); border: 1px solid var(--glass-border); border-radius: 12px; padding: 40px; }
.app-panel h2 { font-size: 24px; margin-bottom: 5px; }
.panel-desc { color: var(--text-muted); margin-bottom: 30px; font-size: 14px; }
.app-panel label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--secondary); }
.app-panel textarea { width: 100%; background: var(--bg-dark); border: 1px solid var(--glass-border); color: #fff; padding: 15px; border-radius: 8px; margin-bottom: 25px; resize: vertical; height: 150px; }
.app-panel textarea:focus { outline: none; border-color: var(--primary); }

/* App States (Handled by JS) */
.hidden { display: none !important; }
.empty-state { text-align: center; color: var(--text-muted); padding: 50px 0; }
.empty-state i { font-size: 50px; margin-bottom: 20px; opacity: 0.5; }

.spinner { width: 50px; height: 50px; border: 4px solid var(--glass-border); border-top: 4px solid var(--secondary); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.progress-bar-container { width: 100%; height: 8px; background: var(--bg-dark); border-radius: 4px; overflow: hidden; margin-top: 20px; }
.progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--primary), var(--secondary)); transition: width 0.3s; }

#loading-state, #results-state { text-align: center; }
.score-circle { width: 120px; height: 120px; border-radius: 50%; border: 6px solid var(--secondary); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; box-shadow: 0 0 30px rgba(0,229,255,0.2); }
.score-number { font-size: 48px; font-weight: 800; }
.score-percent { font-size: 24px; color: var(--secondary); }
.success-text { color: var(--text-muted); margin-bottom: 20px; }
.keyword-tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 30px; }
.tag { padding: 6px 14px; border-radius: 20px; font-size: 14px; font-weight: 600; }
.tag.missing { background: rgba(255, 75, 75, 0.1); color: #ff4b4b; border: 1px solid rgba(255, 75, 75, 0.3); }
.tag.found { background: rgba(0, 229, 255, 0.1); color: var(--secondary); border: 1px solid rgba(0, 229, 255, 0.3); }
.upsell-box { background: var(--bg-dark); padding: 25px; border-radius: 8px; border: 1px solid var(--primary); }
.upsell-box h4 { margin-bottom: 5px; }
.upsell-box p { color: var(--text-muted); margin-bottom: 15px; font-size: 14px; }

.results-block { margin-top: 22px; text-align: left; }
.results-block h4 { margin-bottom: 8px; font-size: 16px; }
.results-list { margin-left: 18px; color: var(--text-muted); }
.results-list li { margin: 8px 0; }
.rewrite-box { background: rgba(255,255,255,0.03); border: 1px solid var(--glass-border); border-radius: 10px; padding: 14px; }
.rewrite-item { margin-bottom: 12px; }
.rewrite-item:last-child { margin-bottom: 0; }
.rewrite-label { font-weight: 700; color: var(--secondary); margin-bottom: 6px; font-size: 13px; }
.rewrite-text { color: #fff; }

/* Pricing */
.pricing-header { padding: 80px 0 40px; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 40px; justify-content: center; max-width: 900px; margin: 0 auto; }
.pricing-card { background: var(--bg-panel); border: 1px solid var(--glass-border); border-radius: 12px; padding: 50px 40px; position: relative; }
.pricing-card.highlight { border-color: var(--primary); box-shadow: 0 10px 40px rgba(94, 53, 177, 0.2); transform: scale(1.05); }
.popular-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--primary); color: #fff; padding: 6px 16px; border-radius: 20px; font-weight: 600; font-size: 14px; }
.price { font-size: 48px; font-weight: 800; margin: 20px 0; }
.price span { font-size: 18px; color: var(--text-muted); font-weight: 400; }
.feature-list { list-style: none; margin-bottom: 40px; }
.feature-list li { margin-bottom: 15px; color: var(--text-muted); }
.feature-list i { color: var(--secondary); margin-right: 10px; }

/* Form */
.form-container { max-width: 600px; margin: 80px auto; }
.glass-panel { background: var(--bg-panel); padding: 50px; border-radius: 12px; border: 1px solid var(--glass-border); text-align: center; }
.input-group { text-align: left; margin-bottom: 20px; }
.input-group label { display: block; margin-bottom: 8px; color: var(--text-muted); font-weight: 600; }
.input-group input, .input-group textarea { width: 100%; background: var(--bg-dark); border: 1px solid var(--glass-border); padding: 15px; border-radius: 6px; color: #fff; }
.input-group input:focus, .input-group textarea:focus { outline: none; border-color: var(--primary); }

/* Footer */
.site-footer { border-top: 1px solid var(--glass-border); padding: 60px 0 30px; margin-top: 80px; }
.footer-flex { display: flex; justify-content: space-between; margin-bottom: 40px; }
.footer-brand p { color: var(--text-muted); max-width: 300px; margin-top: 10px; }
.footer-links { display: flex; gap: 20px; }
.footer-links a { color: var(--text-muted); text-decoration: none; }
.footer-links a:hover { color: #fff; }
.copyright { text-align: center; color: var(--text-muted); font-size: 14px; }

/* Intake + Notices */
.muted { color: var(--text-muted); }
.notice { border: 1px solid var(--glass-border); border-radius: 10px; padding: 14px 16px; margin: 14px 0; background: rgba(255,255,255,0.03); }
.notice strong { display: block; margin-bottom: 4px; }
.notice-info { border-color: rgba(0, 229, 255, 0.25); }
.notice-warn { border-color: rgba(255, 198, 0, 0.25); }
.notice-error { border-color: rgba(255, 75, 75, 0.35); }
.notice-success { border-color: rgba(0, 229, 255, 0.25); }

.intake-grid { display: grid; gap: 18px; }
.intake-row label { display: block; margin-bottom: 8px; font-weight: 700; color: var(--secondary); }
.intake-row textarea { width: 100%; background: var(--bg-dark); border: 1px solid var(--glass-border); color: #fff; padding: 15px; border-radius: 8px; resize: vertical; }
.intake-row textarea:focus { outline: none; border-color: var(--primary); }
.intake-row input { width: 100%; background: var(--bg-dark); border: 1px solid var(--glass-border); padding: 14px; border-radius: 8px; color: #fff; }
.intake-row input:focus { outline: none; border-color: var(--primary); }
.intake-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.intake-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Pricing card CTA alignment */
.pricing-card { display: flex; flex-direction: column; }
.pricing-card .feature-list { margin-bottom: 26px; }
.pricing-card .full-width, .pricing-card a.btn, .pricing-card button.btn { margin-top: auto; }

@media (max-width: 768px) {
    h1 { font-size: 2.5rem; }
    .cta-group { flex-direction: column; }
    .app-grid { grid-template-columns: 1fr; }
    .pricing-card.highlight { transform: scale(1); }
    .footer-flex { flex-direction: column; gap: 30px; }
    .intake-split { grid-template-columns: 1fr; }
}

/* --- SaaS polish fixes --- */
.pricing-card{display:flex;flex-direction:column;}
.pricing-card .feature-list{flex:1;}
.pricing-card .btn, .pricing-card a.btn{margin-top:auto; align-self:center; min-width: 160px;}
@media (max-width: 900px){
  .pricing-card.highlight{transform:none;}
}

/* Better mobile readability */
.container{padding-left:20px;padding-right:20px;}
p{line-height:1.65;}
textarea, input, button{font-size:16px;} /* prevents iOS zoom */

/* Inline notices */
.notice{margin-top:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--glass-border);background:rgba(255,255,255,0.03);}
.notice.error{border-color:rgba(255,0,0,0.25);background:rgba(255,0,0,0.06);}
.notice.success{border-color:rgba(0,229,255,0.25);background:rgba(0,229,255,0.06);}

/* About + testimonials */
.about-section, .testimonial-section{padding:80px 0;}
.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:18px;}
.testimonial-card{background:var(--bg-panel);border:1px solid var(--glass-border);border-radius:12px;padding:18px;}


/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:18px 0 26px;}
.blog-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:10px;}
.blog-card h2{font-size:18px;margin:0;}
.blog-card a{text-decoration:none;color:var(--text);}
.blog-card p{color:var(--text-muted);margin:0;}
.blog-card .btn{margin-top:auto;}
.blog-article{padding:22px;margin:18px 0;}
.blog-article h2{margin-top:0;}
@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px){.blog-grid{grid-template-columns:1fr;}}

/* About section */
.about-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px;}
.about-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:16px;}
.about-card h3{margin:0 0 8px;font-size:16px;}
.about-card p{margin:0;color:var(--text-muted);}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;}}

/* App advanced blocks */
.advanced-grid{margin-top:18px;display:grid;grid-template-columns:1fr;gap:14px;}
.advanced-block h4{margin:0 0 10px;font-size:14px;letter-spacing:.02em;text-transform:uppercase;color:var(--text-muted);}
.clean-list{margin:0;padding-left:18px;}
.clean-list li{margin:6px 0;color:var(--text);}
.rewrite-sub h5{margin:10px 0 6px;font-size:14px;color:var(--text);}
.rewrite-sub p{margin:0;color:var(--text-muted);}
.score-row{display:flex;gap:14px;flex-wrap:wrap;}
.score-pill{display:inline-block;padding:8px 10px;border-radius:12px;background:rgba(0,232,255,.08);border:1px solid rgba(0,232,255,.22);min-width:76px;text-align:center;font-weight:700;}
.score-label{display:inline-block;margin-left:8px;color:var(--text-muted);}


/* --- SaaS polish: pricing card alignment + layout consistency --- */
.pricing-card{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.pricing-card .feature-list{
  flex:1 1 auto;
  margin:0;
  padding-left:0;
}
.pricing-card .btn{
  margin-top:auto;
}
.pricing-card .btn.full-width{
  width:100%;
  text-align:center;
}
/* Blog */
.hero-compact{ padding: 70px 0 40px; }
.blog-toolbar{ margin-top:24px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.blog-search{ flex:1 1 320px; display:flex; gap:10px; align-items:center; padding:12px 14px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background: rgba(255,255,255,.04); }
.blog-search input{ width:100%; background:transparent; border:0; outline:none; color: #fff; font-size: 16px; }
.blog-tags{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ padding:10px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); color:#fff; cursor:pointer; font-weight:600; }
.chip.active{ background: rgba(98, 65, 211, .35); border-color: rgba(98,65,211,.7); }
.blog-featured{ display:grid; grid-template-columns: 1.4fr .6fr; gap:18px; padding:22px; border-radius:18px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); margin-bottom:22px; }
.blog-featured-body h2{ margin:10px 0 8px; }
.blog-featured-aside{ display:flex; flex-direction:column; gap:12px; justify-content:space-between; }
.featured-stat{ padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.25); }
.stat-number{ font-size:28px; font-weight:800; }
.stat-label{ color: rgba(255,255,255,.75); margin-top:6px; }
.featured-note{ color: rgba(255,255,255,.7); padding:12px 14px; border-radius:16px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); }
.blog-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.blog-card{ padding:18px; border-radius:18px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); display:flex; flex-direction:column; gap:14px; min-height: 180px; }
.blog-card-title{ font-size:18px; font-weight:800; line-height:1.2; }
.blog-card-desc{ color: rgba(255,255,255,.78); margin-top:8px; }
.blog-card-meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; }
.text-link{ color:#7bdcff; font-weight:700; text-decoration:none; }
.text-link:hover{ text-decoration:underline; }
.meta-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.meta-pill{ padding:6px 10px; border-radius:999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); font-size: 13px; }
.meta-muted{ color: rgba(255,255,255,.65); font-size: 13px; }
.kicker{ letter-spacing:.12em; text-transform:uppercase; color: rgba(255,255,255,.65); font-weight:700; font-size: 12px; }
.cta-strip{ margin-top:22px; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px; border-radius:18px; border:1px solid rgba(255,255,255,.12); background: rgba(98,65,211,.12); }
.cta-strip h3{ margin:0 0 6px; }
.cta-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.article{ max-width: 820px; margin: 0 auto; }
.article h1{ margin-top: 10px; }
.article-lede{ color: rgba(255,255,255,.8); font-size: 18px; line-height: 1.6; margin: 12px 0 16px; }
.article p, .article li{ color: rgba(255,255,255,.82); line-height:1.7; }
.article h2{ margin-top: 22px; }
.article-cta{ margin-top: 26px; padding: 20px; border-radius: 18px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); display:flex; justify-content:space-between; gap:16px; align-items:center; }
@media (max-width: 980px){
  .blog-grid{ grid-template-columns: repeat(2, 1fr); }
  .blog-featured{ grid-template-columns: 1fr; }
  .article-cta{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 640px){
  .blog-grid{ grid-template-columns: 1fr; }
  .cta-strip{ flex-direction:column; align-items:flex-start; }
  .blog-search{ flex:1 1 100%; }
}

.form-status{margin-top:12px;color:rgba(255,255,255,.85);} .form-status.error{color:#ff8a8a;} .form-status.ok{color:#86ffb1;}

.footer-social{display:flex;gap:10px;align-items:center;justify-content:flex-end;} .footer-social .social{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:#fff;text-decoration:none;} .footer-social .social:hover{background:rgba(255,255,255,.06);} 



/* Contact form polish */
.contact-form .form-row{display:flex;gap:16px;flex-wrap:wrap;}
.contact-form .two-col > .form-group{flex:1 1 260px;}
.contact-form .form-group{margin:14px 0;}
.contact-form label{display:block;margin:0 0 8px;color:rgba(255,255,255,.85);font-weight:600;}
.contact-form input,.contact-form select,.contact-form textarea{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25);
  color:#fff;
  padding:12px 14px;
  outline:none;
}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
  border-color:rgba(120,90,255,.7);
  box-shadow:0 0 0 4px rgba(120,90,255,.18);
}
.contact-form select{appearance:none;}
.contact-form .btn-block{width:100%;}
.contact-form .req{color:#7ee5ff;font-weight:800;}
.contact-form .fineprint{margin-top:10px;font-size:0.95rem;line-height:1.5;}
.contact-form .status{margin-top:10px;font-size:1rem;}
.contact-form .status.ok{color:rgba(126,229,255,.95);}
.contact-form .status.err{color:#ff6b6b;}
.challenge-row{display:flex;gap:10px;align-items:center;}
.challenge-q{display:inline-block;min-width:120px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);}
.align-end{align-items:flex-end;}
@media (max-width: 640px){
  .contact-form .form-row{gap:10px;}
  .challenge-q{min-width:110px;}
}