/* FEATURE PAGES */

/* Hero */
.feature-hero{min-height:50vh;display:flex;align-items:center;justify-content:center;padding:120px 24px 80px;text-align:center;background:linear-gradient(135deg,#0f172a 0%,#162036 50%,#1a1845 100%);position:relative;overflow:hidden}
.feature-hero::before{content:'';position:absolute;top:-40%;right:-20%;width:70%;height:140%;background:radial-gradient(ellipse,rgba(90,85,163,.12) 0%,transparent 70%);pointer-events:none}
.feature-hero-content{position:relative;z-index:1;max-width:700px}
.feature-label{font-size:12px;text-transform:uppercase;letter-spacing:3px;color:#ea580c;font-weight:700;margin-bottom:16px}
.feature-hero h1{font-size:clamp(2rem,4vw,3rem);font-weight:800;color:#fff;line-height:1.15;letter-spacing:-.5px;margin-bottom:20px}
.feature-hero h1 .accent{color:#f97316}
.feature-subtitle{font-size:clamp(1rem,2vw,1.15rem);color:#94a3b8;line-height:1.7;max-width:600px;margin:0 auto 32px}
.feature-cta{display:inline-block;padding:14px 32px;background:#ea580c;color:#fff;font-size:1rem;font-weight:600;border-radius:9999px;transition:all .2s}
.feature-cta:hover{background:#f97316;transform:translateY(-2px);box-shadow:0 8px 24px rgba(234,88,12,.3)}

/* Screenshot Placeholder */
.feature-screenshot{padding:60px 24px;background:#fff}
.feature-screenshot.alt-bg{background:#f8fafc}
.screenshot-container{max-width:900px;margin:0 auto}
.screenshot-placeholder{background:#e2e8f0;border:2px dashed #cbd5e1;border-radius:16px;height:400px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#94a3b8;font-size:1rem}
.screenshot-placeholder i{font-size:3rem;margin-bottom:12px;opacity:.5}
.screenshot-img{width:100%;border-radius:12px;display:block}
.screenshot-frame{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:16px;padding:16px;box-shadow:0 12px 40px rgba(0,0,0,.06)}

/* Sections */
.feature-section{padding:80px 24px;background:#fff}
.feature-section.alt-bg{background:#f8fafc}
.feature-container{max-width:1000px;margin:0 auto}
.feature-intro{text-align:center;margin-bottom:48px}
.feature-intro h2{font-size:1.75rem;font-weight:800;color:#0f172a;margin-bottom:8px}
.feature-intro p{color:#64748b;font-size:1rem}

/* Feature Grids */
.feature-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.feature-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

/* Feature Box */
.feature-box{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:28px;transition:all .3s}
.feature-section.alt-bg .feature-box{background:#fff}
.feature-box:hover{border-color:#ea580c;box-shadow:0 8px 24px rgba(234,88,12,.08)}
.feature-box-icon{width:48px;height:48px;border-radius:12px;background:rgba(234,88,12,.1);color:#ea580c;display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:16px}
.feature-box-number{width:40px;height:40px;border-radius:10px;background:#ea580c;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:800;margin-bottom:16px}
.feature-box h3{font-size:1.05rem;font-weight:700;color:#0f172a;margin-bottom:10px}
.feature-box p{font-size:.9rem;color:#64748b;line-height:1.6;margin-bottom:12px}
.feature-box ul,.feature-box ol{font-size:.85rem;color:#64748b;line-height:1.7;padding-left:20px;margin:0}
.feature-box li{margin-bottom:6px}
.feature-box strong{color:#0f172a}

/* Subhead */
.feature-subhead{font-size:1.1rem;font-weight:700;color:#0f172a;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.feature-subhead i{color:#ea580c}

/* Use Case List */
.usecase-list{display:flex;flex-direction:column;gap:20px;max-width:700px;margin:0 auto}
.usecase-item{display:flex;align-items:flex-start;gap:16px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px 24px;transition:all .3s}
.usecase-item:hover{border-color:#ea580c;box-shadow:0 4px 16px rgba(234,88,12,.06)}
.usecase-icon{width:44px;height:44px;border-radius:10px;background:rgba(234,88,12,.1);color:#ea580c;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.usecase-item h4{font-size:.95rem;font-weight:700;color:#0f172a;margin-bottom:4px}
.usecase-item p{font-size:.85rem;color:#64748b;line-height:1.5;margin:0}

/* Data Source */
.data-source{display:flex;gap:24px;background:#f0f9ff;border:1px solid #bae6fd;border-radius:16px;padding:32px}
.data-source-icon{width:56px;height:56px;border-radius:14px;background:#0ea5e9;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0}
.data-source h3{font-size:1.1rem;font-weight:700;color:#0369a1;margin-bottom:12px}
.data-source p{font-size:.9rem;color:#0c4a6e;line-height:1.6;margin-bottom:12px}
.data-source p:last-child{margin-bottom:0}
.data-source ul{font-size:.85rem;color:#0c4a6e;line-height:1.7;padding-left:20px;margin:0 0 12px}
.data-source strong{color:#0369a1}

/* Hub Page Layout */
.hub-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;max-width:1100px;margin:0 auto}
.hub-feature-grid.reverse{direction:rtl}
.hub-feature-grid.reverse>*{direction:ltr}
.hub-feature-content h3{font-size:1.5rem;font-weight:800;margin-bottom:12px;letter-spacing:-.3px}
.hub-feature-content p{font-size:.95rem;line-height:1.7;margin-bottom:20px}
.hub-feature-content ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.hub-feature-content ul li{display:flex;align-items:center;gap:10px;font-size:.9rem}
.hub-feature-content ul li i{font-size:.8rem;flex-shrink:0}
.hub-feature-visual{border-radius:16px;overflow:hidden}
.hub-feature-visual .screenshot-frame{margin:0}
.hub-feature-more{display:inline-flex;align-items:center;gap:8px;font-size:.95rem;font-weight:600;padding:10px 24px;border-radius:9999px;transition:all .2s}

.feature-section .hub-feature-content h3{color:#0f172a}
.feature-section .hub-feature-content p{color:#64748b}
.feature-section .hub-feature-content ul li{color:#475569}
.feature-section .hub-feature-content ul li i{color:#22c55e}
.feature-section .hub-feature-more{color:#ea580c;border:1px solid rgba(234,88,12,.3)}
.feature-section .hub-feature-more:hover{background:rgba(234,88,12,.06);border-color:#ea580c;transform:translateY(-1px)}

.feature-section.alt-bg .hub-feature-content h3{color:#0f172a}
.feature-section.alt-bg .hub-feature-content p{color:#64748b}
.feature-section.alt-bg .hub-feature-content ul li{color:#475569}
.feature-section.alt-bg .hub-feature-content ul li i{color:#22c55e}
.feature-section.alt-bg .hub-feature-more{color:#ea580c;border:1px solid rgba(234,88,12,.3)}
.feature-section.alt-bg .hub-feature-more:hover{background:rgba(234,88,12,.06);border-color:#ea580c;transform:translateY(-1px)}

/* Mobile */
@media(max-width:768px){
  .feature-hero{padding:100px 24px 60px;min-height:auto}
  .feature-grid-2,.feature-grid-3{grid-template-columns:1fr}
  .screenshot-placeholder{height:250px}
  .data-source{flex-direction:column;text-align:center}
  .data-source ul{text-align:left}
  .hub-feature-grid,.hub-feature-grid.reverse{grid-template-columns:1fr;direction:ltr;gap:32px}
}