/* SeatWise — features.css — Features page styles */

/* ── PAGE HERO ── */
.page-hero{padding:120px 0 72px;background:linear-gradient(135deg,#1E1B4B 0%,var(--indigo) 60%,#4338CA 100%);position:relative;overflow:hidden;text-align:center;}
.page-hero-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.18;pointer-events:none;}
.ph-b1{width:500px;height:500px;background:var(--emerald);right:-100px;top:-100px;}
.ph-b2{width:400px;height:400px;background:#818CF8;left:-80px;bottom:-80px;}
.page-hero-inner{position:relative;}
.page-breadcrumb{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:24px;font-size:13px;color:rgba(255,255,255,.6);}
.page-breadcrumb a{color:rgba(255,255,255,.6);text-decoration:none;}
.page-breadcrumb a:hover{color:#fff;}
.page-breadcrumb span{color:rgba(255,255,255,.3);}
.page-hero h1{font-size:clamp(32px,5vw,54px);font-weight:800;color:#fff;line-height:1.1;margin-bottom:20px;}
.page-hero h1 em{font-style:normal;color:#A5B4FC;}
.page-hero p{font-size:18px;color:rgba(255,255,255,.75);max-width:580px;margin:0 auto 36px;line-height:1.65;}
.hero-stats{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;}
.hs-item{text-align:center;}
.hs-num{font-size:32px;font-weight:800;color:#fff;}
.hs-label{font-size:13px;color:rgba(255,255,255,.6);margin-top:4px;}

/* ── FEATURE CATEGORIES NAV ── */
.feat-nav{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:68px;z-index:90;padding:0;}
.feat-nav-inner{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;}
.feat-nav-inner::-webkit-scrollbar{display:none;}
.feat-nav-btn{padding:18px 24px;font-family:'Manrope',sans-serif;font-size:14px;font-weight:600;color:var(--text-sec);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;transition:all .2s;display:flex;align-items:center;gap:8px;}
.feat-nav-btn:hover{color:var(--indigo);}
.feat-nav-btn.active{color:var(--indigo);border-bottom-color:var(--indigo);}

/* ── FEATURE SECTIONS ── */
.feat-section{padding:80px 0;border-bottom:1px solid var(--border);}
.feat-section:nth-child(even){background:var(--bg-gray);}
.feat-section-header{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:64px;}
.feat-section-header.reverse{direction:rtl;}
.feat-section-header.reverse > *{direction:ltr;}
.feat-section-tag{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:100px;font-size:13px;font-weight:700;margin-bottom:16px;}
.feat-section-tag.indigo{background:var(--indigo-light);color:var(--indigo);}
.feat-section-tag.emerald{background:var(--emerald-light);color:var(--emerald-dark);}
.feat-section-tag.amber{background:#FEF3C7;color:#92400E;}
.feat-section-tag.purple{background:#F3E8FF;color:#7C3AED;}
.feat-section-tag.blue{background:#EFF6FF;color:#1D4ED8;}
.feat-section-tag.red{background:#FEE2E2;color:#DC2626;}
.feat-section-h2{font-size:clamp(24px,3.5vw,36px);font-weight:800;color:var(--text);line-height:1.2;margin-bottom:16px;}
.feat-section-desc{font-size:16px;color:var(--text-sec);line-height:1.7;margin-bottom:28px;}
.feat-bullet{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;}
.feat-bullet-dot{width:22px;height:22px;border-radius:50%;background:var(--emerald-light);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--emerald-dark);flex-shrink:0;margin-top:1px;}
.feat-bullet-text{font-size:14px;color:var(--text);line-height:1.6;}
.feat-bullet-text strong{color:var(--text);font-weight:700;}

/* ── FEATURE VISUAL MOCK ── */
.feat-mock{background:var(--bg-gray);border-radius:20px;border:1px solid var(--border);padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.07);}
.mock-topbar{display:flex;align-items:center;gap:8px;margin-bottom:20px;}
.mock-dot{width:11px;height:11px;border-radius:50%;}
.mock-d1{background:#FF5F57;}.mock-d2{background:#FEBC2E;}.mock-d3{background:#28C840;}
.mock-title{font-size:13px;color:var(--text-sec);margin-left:6px;font-weight:500;}

/* Seat map mock */
.seat-map-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-bottom:16px;}
.sm-seat{aspect-ratio:1;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;}
.sm-legend{display:flex;gap:16px;flex-wrap:wrap;}
.sm-leg-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-sec);}
.sm-leg-dot{width:12px;height:12px;border-radius:3px;}

/* Member list mock */
.mock-member-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
.mock-avatar{width:36px;height:36px;border-radius:50%;background:var(--indigo-light);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--indigo);flex-shrink:0;}
.mock-info{flex:1;}
.mock-name{font-size:14px;font-weight:600;color:var(--text);}
.mock-sub{font-size:12px;color:var(--text-sec);}
.mock-badge{padding:4px 10px;border-radius:100px;font-size:11px;font-weight:700;}
.b-active{background:var(--emerald-light);color:var(--emerald-dark);}
.b-exp{background:#FEF3C7;color:#92400E;}
.b-expired{background:#FEE2E2;color:#DC2626;}

/* Payment mock */
.mock-pay-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
.mock-pay-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.mock-pay-amount{font-size:15px;font-weight:700;}
.credit{color:var(--emerald-dark);}
.debit{color:var(--red);}

/* Stats mock */
.mock-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px;}
.mock-stat-card{background:#fff;border-radius:10px;padding:14px;border:1px solid var(--border);}
.mock-stat-val{font-size:22px;font-weight:800;}
.mock-stat-label{font-size:11px;color:var(--text-sec);margin-top:4px;}
.mock-stat-trend{font-size:11px;font-weight:600;margin-top:6px;}
.trend-up{color:var(--emerald-dark);}

/* WhatsApp msg mock */
.mock-wa-bubble{background:#DCF8C6;border-radius:12px 12px 0 12px;padding:12px 16px;font-size:13px;color:#111;line-height:1.6;margin-bottom:8px;max-width:85%;margin-left:auto;}
.mock-wa-label{font-size:11px;color:var(--text-light);text-align:right;margin-right:4px;}
.mock-wa-system{text-align:center;font-size:12px;color:var(--text-light);margin:8px 0;background:var(--bg-gray);border-radius:100px;padding:4px 12px;display:inline-block;width:100%;}

/* QR card mock */
.mock-id-card{background:linear-gradient(135deg,var(--indigo) 0%,#4338CA 100%);border-radius:16px;padding:20px;color:#fff;text-align:center;}
.mock-id-avatar{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.2);margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;}
.mock-id-name{font-size:15px;font-weight:700;margin-bottom:4px;}
.mock-id-detail{font-size:12px;opacity:.7;margin-bottom:12px;}
.mock-qr{width:64px;height:64px;background:#fff;border-radius:8px;margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr);gap:2px;padding:6px;}
.qr-dot{border-radius:1px;}

/* ── ALL FEATURES GRID ── */
.all-features{padding:80px 0;background:var(--bg-gray);}
.all-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;}
.af-card{background:#fff;border-radius:16px;padding:28px 24px;border:1px solid var(--border);transition:all .3s;}
.af-card:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(55,48,163,.08);border-color:#C7D2FE;}
.af-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px;}
.af-i-indigo{background:var(--indigo-light);}
.af-i-emerald{background:var(--emerald-light);}
.af-i-amber{background:#FEF3C7;}
.af-i-purple{background:#F3E8FF;}
.af-i-blue{background:#EFF6FF;}
.af-i-red{background:#FEE2E2;}
.af-i-pink{background:#FCE7F3;}
.af-i-teal{background:#CCFBF1;}
.af-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:8px;}
.af-desc{font-size:13px;color:var(--text-sec);line-height:1.6;}

/* ── COMPARISON TABLE ── */
.comparison{padding:80px 0;background:#fff;}
.comp-table{width:100%;border-collapse:separate;border-spacing:0;margin-top:56px;border-radius:16px;overflow:hidden;border:1px solid var(--border);}
.comp-table th{padding:18px 24px;font-size:13px;font-weight:700;text-align:left;}
.comp-table th:first-child{background:var(--bg-gray);color:var(--text-sec);}
.comp-table th.sw-col{background:var(--indigo);color:#fff;text-align:center;}
.comp-table th.old-col{background:#FEF2F2;color:#991B1B;text-align:center;}
.comp-table td{padding:16px 24px;font-size:14px;border-top:1px solid var(--border);}
.comp-table td:first-child{font-weight:600;color:var(--text);background:var(--bg-gray);}
.comp-table td.sw-val{text-align:center;background:#FAFAFE;}
.comp-table td.old-val{text-align:center;background:#FFFAFA;}
.comp-table tr:last-child td{border-bottom:none;}
.check-y{color:var(--emerald-dark);font-size:16px;font-weight:700;}
.check-n{color:#DC2626;font-size:16px;}

/* ── CTA ── */
.feat-cta{padding:80px 0;background:linear-gradient(135deg,#1E1B4B 0%,var(--indigo) 50%,#2D2580 100%);position:relative;overflow:hidden;text-align:center;}
.cta-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.2;pointer-events:none;}
.cb1{width:400px;height:400px;background:var(--emerald);left:-80px;bottom:-80px;}
.cb2{width:300px;height:300px;background:#818CF8;right:-40px;top:-40px;}
.feat-cta-inner{position:relative;}
.feat-cta h2{font-size:clamp(28px,4vw,48px);font-weight:800;color:#fff;line-height:1.15;margin-bottom:16px;}
.feat-cta p{font-size:18px;color:rgba(255,255,255,.7);margin-bottom:36px;}
.feat-cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:20px;}
.feat-cta-trust{font-size:13px;color:rgba(255,255,255,.5);}

/* ── MOBILE ── */
@media(max-width:768px){
  .feat-section-header{grid-template-columns:1fr;gap:32px;}
  .feat-section-header.reverse{direction:ltr;}
  .all-feat-grid{grid-template-columns:1fr 1fr;}
  .hero-stats{gap:24px;}
  .mock-stats-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:480px){
  .all-feat-grid{grid-template-columns:1fr;}
  .feat-cta-btns{flex-direction:column;align-items:center;}
}