/* Gript -- Feature Requests */
/* --- HERO --- */
.page-hero{padding:var(--hero-pad-top) var(--hero-pad-x) 24px;text-align:center;position:relative;overflow:hidden}
.page-hero h1{font-family:var(--font);font-size:var(--hero-h1-size);font-weight:700;letter-spacing:var(--hero-h1-tracking);line-height:var(--hero-h1-leading);margin-bottom:16px}
.page-hero h1 .accent{background:linear-gradient(135deg,#d97706,#e11d48,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.page-hero p{font-size:var(--hero-sub-size);color:var(--ink-2);max-width:500px;margin:0 auto;line-height:var(--hero-sub-leading)}

/* floating emojis */
.hero-float{position:absolute;font-size:28px;opacity:0.12;animation:float 6s ease-in-out infinite}
.hero-float:nth-child(1){top:110px;left:10%;animation-delay:0s}
.hero-float:nth-child(2){top:130px;right:12%;animation-delay:2s}
.hero-float:nth-child(3){top:190px;left:18%;animation-delay:4s}
.hero-float:nth-child(4){top:170px;right:20%;animation-delay:1s}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-12px) rotate(5deg)}}

/* --- TOP STATS --- */
.top-stats{max-width:720px;margin:0 auto;padding:32px 48px 48px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ts-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;text-align:center;transition:transform 0.2s var(--ease)}
.ts-card:hover{transform:translateY(-2px)}
.ts-num{font-family:var(--font);font-size:32px;font-weight:700;letter-spacing:-1.5px;line-height:1}
.ts-label{font-size:12px;color:var(--ink-2);margin-top:2px}

/* --- SUBMIT BANNER --- */
.submit-banner{max-width:720px;margin:0 auto;padding:0 48px 48px}
.sb-card{background:linear-gradient(135deg,#111 0%,#333 100%);border-radius:20px;padding:36px 40px;color:var(--bg);display:flex;align-items:center;gap:32px;position:relative;overflow:hidden;cursor:pointer}
.sb-card::before{content:'💡';position:absolute;top:-10px;right:20px;font-size:80px;opacity:0.08;transform:rotate(15deg);pointer-events:none}
.sb-text{flex:1;pointer-events:none}
.sb-text h2{font-family:var(--font);font-size:24px;font-weight:700;letter-spacing:-1px;margin-bottom:6px}
.sb-text p{font-size:14px;color:rgba(255,255,255,0.6);line-height:1.5}
.sb-btn{padding:12px 28px;background:var(--bg);color:var(--ink);border:none;border-radius:10px;font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all 0.15s;flex-shrink:0}
.sb-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(255,255,255,0.2)}

/* --- SUBMIT MODAL --- */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.25s}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{background:var(--surface);border-radius:20px;padding:36px;width:90%;max-width:520px;box-shadow:0 24px 80px rgba(0,0,0,0.15);transform:translateY(20px) scale(0.97);transition:transform 0.3s var(--ease);position:relative}
.modal-overlay.open .modal{transform:translateY(0) scale(1)}
.modal-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border:none;background:var(--bg);border-radius:8px;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink-3);transition:all 0.15s}
.modal-close:hover{background:var(--line);color:var(--ink)}
.modal h2{font-family:var(--font);font-size:22px;font-weight:700;letter-spacing:-0.8px;margin-bottom:4px}
.modal .sub{font-size:14px;color:var(--ink-2);margin-bottom:24px}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-family:var(--font);font-size:13px;font-weight:600;margin-bottom:5px}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:10px 14px;border:1px solid var(--line);border-radius:10px;font-family:var(--body);font-size:14px;color:var(--ink);background:var(--bg);transition:border-color 0.15s;outline:none;resize:vertical}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--ink)}
.form-group textarea{min-height:90px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.btn-submit{width:100%;padding:13px;background:var(--ink);color:var(--bg);border:none;border-radius:10px;font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;transition:all 0.15s}
.btn-submit:hover{background:#333;transform:translateY(-1px)}

/* --- FILTERS --- */
.filters{max-width:900px;margin:0 auto;padding:0 48px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.filter-pills{display:flex;gap:6px;flex-wrap:wrap}
.fp{padding:7px 16px;border:1.5px solid var(--line);background:var(--surface);border-radius:20px;font-family:var(--font);font-size:12px;font-weight:600;color:var(--ink-3);cursor:pointer;transition:all 0.15s;display:flex;align-items:center;gap:5px;user-select:none}
.fp:hover{border-color:#ccc;color:var(--ink-2)}
.fp.active{border-color:var(--ink);color:var(--ink);background:var(--bg)}
.fp .fp-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.fp .fp-count{font-size:10px;opacity:0.5;margin-left:2px}
.sort-select{padding:8px 14px;border:1.5px solid var(--line);border-radius:20px;font-family:var(--font);font-size:12px;font-weight:600;color:var(--ink-2);background:var(--surface);cursor:pointer;outline:none;transition:border-color 0.15s}
.sort-select:hover{border-color:#ccc}

/* --- FEATURE CARDS --- */
.features-grid{max-width:900px;margin:0 auto;padding:0 48px 80px;display:flex;flex-direction:column;gap:12px}

.fr-card{display:grid;grid-template-columns:72px 1fr auto;gap:20px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 24px;transition:all 0.25s var(--ease);position:relative;overflow:hidden}
.fr-card:hover{box-shadow:0 8px 32px rgba(0,0,0,0.06);transform:translateY(-2px);border-color:#ddd}
/* Top color bar */
.fr-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;opacity:0;transition:opacity 0.2s}
.fr-card:hover::before{opacity:1}
.fr-card[data-status="shipped"]::before{background:linear-gradient(90deg,#059669,#34d399)}
.fr-card[data-status="building"]::before{background:linear-gradient(90deg,#2563eb,#60a5fa)}
.fr-card[data-status="planned"]::before{background:linear-gradient(90deg,#7c3aed,#a78bfa)}
.fr-card[data-status="under-review"]::before{background:linear-gradient(90deg,#d97706,#fbbf24)}
.fr-card[data-status="new"]::before{background:linear-gradient(90deg,#94a3b8,#cbd5e1)}

/* Vote button */
.vote-box{display:flex;flex-direction:column;align-items:center;gap:2px}
.vote-btn{width:56px;height:56px;border:2px solid var(--line);border-radius:14px;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;transition:all 0.2s var(--ease);position:relative}
.vote-btn:hover{border-color:var(--ink);transform:scale(1.05)}
.vote-btn.voted{border-color:var(--building);background:linear-gradient(135deg,#eff6ff,#dbeafe);transform:scale(1.05)}
.vote-arrow{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:8px solid var(--ink-3);transition:all 0.2s}
.vote-btn:hover .vote-arrow{border-bottom-color:var(--ink);transform:translateY(-1px)}
.vote-btn.voted .vote-arrow{border-bottom-color:var(--building);transform:translateY(-2px)}
.vote-count{font-family:var(--font);font-size:16px;font-weight:700;color:var(--ink);line-height:1;transition:all 0.2s}
.vote-btn.voted .vote-count{color:var(--building)}

/* bump animation */
@keyframes bump{0%{transform:scale(1)}30%{transform:scale(1.15)}100%{transform:scale(1.05)}}
.vote-btn.bumping{animation:bump 0.3s var(--ease)}

/* Card content */
.fr-content{min-width:0}
.fr-content h3{font-family:var(--font);font-size:17px;font-weight:700;letter-spacing:-0.4px;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.fr-emoji{font-size:20px;flex-shrink:0}
.fr-content p{font-size:14px;color:var(--ink-2);line-height:1.55;margin-bottom:8px}
.fr-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fr-category{font-size:11px;font-weight:600;padding:3px 10px;border-radius:6px;display:flex;align-items:center;gap:4px}
/* category colors */
.cat-views{background:#ede9fe;color:#7c3aed}
.cat-tasks{background:#dbeafe;color:#2563eb}
.cat-notebook{background:#fef3c7;color:#d97706}
.cat-dashboard{background:#fce7f3;color:#db2777}
.cat-automations{background:#dcfce7;color:#059669}
.cat-integrations{background:#e0f2fe;color:#0284c7}
.cat-collab{background:#f0fdf4;color:#16a34a}
.cat-mobile{background:#fef9c3;color:#ca8a04}
.cat-ai{background:#fce4ec;color:#e11d48}
.cat-other{background:#f1f5f9;color:#64748b}
.fr-comments{font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:4px}
.fr-date{font-size:12px;color:var(--ink-3)}

/* Status badge */
.fr-status{font-family:var(--font);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;padding:5px 12px;border-radius:8px;white-space:nowrap;flex-shrink:0;text-align:center}
.fr-status.shipped{background:#dcfce7;color:var(--shipped)}
.fr-status.building{background:#dbeafe;color:var(--building)}
.fr-status.planned{background:#ede9fe;color:var(--planned)}
.fr-status.under-review{background:#fef3c7;color:var(--review)}
.fr-status.new{background:#f1f5f9;color:var(--new)}

/* --- CTA STRIP --- */
.cta-strip{padding:100px 48px;text-align:center;border-top:1px solid rgba(255,255,255,.1);background:var(--ink)}
.cta-strip h2{font-family:var(--font);font-size:clamp(28px,4vw,44px);font-weight:700;letter-spacing:-2px;margin-bottom:16px;color:var(--bg)}
.cta-strip p{font-size:16px;color:var(--ink-3);margin-bottom:32px}
.cta-strip .btn-dark{background:var(--bg);color:var(--ink)}
.cta-strip .btn-dark:hover{background:var(--line)}

/* --- HAMBURGER --- */

/* --- REVEAL --- */

.stagger-list .fr-card{opacity:0;transform:translateY(12px);transition:opacity 0.35s var(--ease),transform 0.35s var(--ease)}
.stagger-list.visible .fr-card:nth-child(1){opacity:1;transform:translateY(0);transition-delay:0.03s}
.stagger-list.visible .fr-card:nth-child(2){opacity:1;transform:translateY(0);transition-delay:0.06s}
.stagger-list.visible .fr-card:nth-child(3){opacity:1;transform:translateY(0);transition-delay:0.09s}
.stagger-list.visible .fr-card:nth-child(4){opacity:1;transform:translateY(0);transition-delay:0.12s}
.stagger-list.visible .fr-card:nth-child(5){opacity:1;transform:translateY(0);transition-delay:0.15s}
.stagger-list.visible .fr-card:nth-child(6){opacity:1;transform:translateY(0);transition-delay:0.18s}
.stagger-list.visible .fr-card:nth-child(7){opacity:1;transform:translateY(0);transition-delay:0.21s}
.stagger-list.visible .fr-card:nth-child(8){opacity:1;transform:translateY(0);transition-delay:0.24s}
.stagger-list.visible .fr-card:nth-child(9){opacity:1;transform:translateY(0);transition-delay:0.27s}
.stagger-list.visible .fr-card:nth-child(10){opacity:1;transform:translateY(0);transition-delay:0.30s}
.stagger-list.visible .fr-card:nth-child(11){opacity:1;transform:translateY(0);transition-delay:0.33s}
.stagger-list.visible .fr-card:nth-child(12){opacity:1;transform:translateY(0);transition-delay:0.36s}

/* --- TOAST --- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--ink);color:var(--bg);font-family:var(--font);font-size:14px;font-weight:600;padding:12px 24px;border-radius:12px;z-index:300;opacity:0;transition:all 0.3s var(--ease);pointer-events:none;box-shadow:0 8px 32px rgba(0,0,0,0.2);display:flex;align-items:center;gap:8px}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast-emoji{font-size:18px}

/* --- CONFETTI --- */
.confetti-piece{position:fixed;width:8px;height:8px;border-radius:2px;z-index:250;pointer-events:none;animation:confetti-fall 1.2s var(--ease) forwards}
@keyframes confetti-fall{0%{opacity:1;transform:translateY(0) rotate(0deg)}100%{opacity:0;transform:translateY(200px) rotate(720deg)}}

/* --- RESPONSIVE --- */
@media(max-width:768px){
  
  .page-hero{padding:100px 24px 16px}
  .hero-float{display:none}
  .top-stats{padding:24px 24px 32px;grid-template-columns:repeat(3,1fr);gap:10px}
  .ts-card{padding:14px 10px}
  .ts-num{font-size:24px}
  .submit-banner{padding:0 24px 32px}
  .sb-card{flex-direction:column;text-align:center;gap:16px;padding:28px 24px}
  .filters{padding:0 24px 16px;flex-direction:column;align-items:stretch}
  .filter-pills{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .features-grid{padding:0 24px 60px}
  .fr-card{grid-template-columns:56px 1fr;gap:14px}
  .fr-status{grid-column:2;justify-self:start;margin-top:-4px}
  .form-row{grid-template-columns:1fr}
  .cta-strip{padding:60px 24px}
  
}