/* ============================================================
   EmailsWave — Products page premium treatment
   Layers on top of theme.css. Scoped to body.page-products.
   Adds an animated hero (blob + floating spec card), a bento
   editions grid, and scroll reveals — matching the home page.
   ============================================================ */

body.page-products {
    --p-primary: #6C3CEC;
    --p-primary-2: #A362F0;
    --p-accent: #FF6B9D;
    --p-ink: #1A1538;
    --p-muted: #5C587A;
    --p-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --p-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Animated hero ---------- */
body.page-products .page-hero {
    position: relative;
    overflow: hidden;
    padding: 160px 0 80px;
    text-align: left;
    background: none;
}
body.page-products .page-hero::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 80% 22%, rgba(163,98,240,0.14), transparent 55%);
    pointer-events: none;
}
body.page-products .page-hero .container {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 40px;
}
body.page-products .page-hero-copy { position: relative; z-index: 2; }
body.page-products .prod-eyebrow {
    font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--p-primary); margin-bottom: 14px;
}
body.page-products .page-title {
    font-size: 52px; line-height: 58px; font-weight: 700; text-align: left;
    max-width: 12ch; margin-bottom: 18px;
}
body.page-products .page-title .grad {
    background: linear-gradient(135deg, var(--p-primary), var(--p-accent));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
body.page-products .page-subtitle {
    text-align: left; margin: 0 0 32px; max-width: 46ch; color: var(--p-muted);
    font-size: 18px; line-height: 28px;
}
body.page-products .page-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* Hero visual: blob + floating "speed" card */
body.page-products .prod-visual {
    position: relative; height: 380px;
    display: flex; align-items: center; justify-content: center;
}
body.page-products .prod-blob {
    position: absolute; width: 380px; height: 380px;
    background: linear-gradient(135deg, var(--p-primary), var(--p-accent));
    opacity: 0.26; filter: blur(8px);
    border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
    animation: pBlob 12s infinite ease-in-out, pDrift 16s infinite ease-in-out;
}
@keyframes pBlob {
    0%,100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
    50% { border-radius: 58% 42% 37% 63% / 56% 59% 41% 44%; }
}
@keyframes pDrift {
    0%,100% { transform: translate(0,0) rotate(0deg); }
    50% { transform: translate(-10px,10px) rotate(3deg); }
}
body.page-products .prod-card {
    position: relative; width: 320px;
    background: #fff; border-radius: 16px;
    box-shadow: 0 24px 64px rgba(107,60,236,0.16);
    padding: 24px;
    transform: perspective(1200px) rotateY(-5deg) rotateX(3deg);
    animation: pFloat 6s infinite ease-in-out;
}
@keyframes pFloat {
    0%,100% { transform: perspective(1200px) rotateY(-5deg) rotateX(3deg) translateY(0); }
    50% { transform: perspective(1200px) rotateY(-5deg) rotateX(3deg) translateY(-14px); }
}
body.page-products .prod-card .cap { font-size: 13px; color: var(--p-muted); font-weight: 600; }
body.page-products .prod-card .big {
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 56px; line-height: 1;
    background: linear-gradient(135deg, var(--p-primary), var(--p-accent));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    margin: 6px 0 2px;
}
body.page-products .prod-card .sub { font-size: 14px; color: var(--p-muted); margin-bottom: 16px; }
body.page-products .prod-card .meter { height: 10px; border-radius: 6px; background: rgba(108,60,236,0.12); overflow: hidden; }
body.page-products .prod-card .meter i { display: block; height: 100%; width: 92%;
    background: linear-gradient(90deg, var(--p-primary), var(--p-accent)); border-radius: 6px;
    animation: pMeter 3s var(--p-ease) infinite alternate; }
@keyframes pMeter { from { width: 30%; } to { width: 92%; } }
body.page-products .prod-token {
    position: absolute; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px);
    border-radius: 10px; padding: 8px 12px; font-size: 12px; font-weight: 600; color: var(--p-ink);
    box-shadow: 0 8px 24px rgba(107,60,236,0.14);
}
body.page-products .prod-token.a { top: 24px; right: -10px; animation: pFloatT 7s infinite ease-in-out; }
body.page-products .prod-token.b { bottom: 40px; left: -14px; animation: pFloatT 9s infinite ease-in-out; }
@keyframes pFloatT { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- Bento editions grid ---------- */
body.page-products .prod-bento {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px;
}
body.page-products .prod-tile {
    position: relative; background: #fff; border-radius: 16px; padding: 28px;
    box-shadow: 0 4px 24px rgba(107,60,236,0.06);
    transition: transform .26s var(--p-ease), box-shadow .26s var(--p-ease);
    overflow: hidden;
}
body.page-products .prod-tile:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(107,60,236,0.12); }
body.page-products .prod-tile.featured { outline: 2px solid rgba(108,60,236,0.16); }
body.page-products .prod-tile .ribbon {
    position: absolute; top: 16px; right: 16px;
    background: linear-gradient(135deg, var(--p-primary), var(--p-primary-2)); color: #fff;
    font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 100px;
}
body.page-products .prod-tile .speed {
    font-family: 'Plus Jakarta Sans'; font-weight: 800; font-size: 40px; line-height: 1;
    color: var(--p-primary); margin-bottom: 6px;
}
body.page-products .prod-tile.pink .speed { color: var(--p-accent); }
body.page-products .prod-tile h3 { font-size: 22px; margin: 0 0 4px; }
body.page-products .prod-tile .tag { font-size: 14px; color: var(--p-muted); margin: 0 0 16px; }
body.page-products .prod-tile ul { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
body.page-products .prod-tile li { font-size: 15px; color: var(--p-ink); display: flex; gap: 8px; }
body.page-products .prod-tile li .c { color: var(--p-primary); font-weight: 700; }
body.page-products .prod-tile.pink li .c { color: var(--p-accent); }

/* ---------- Comparison table polish ---------- */
body.page-products .comparison-table-wrapper {
    border-radius: 16px; overflow: hidden; box-shadow: 0 4px 24px rgba(107,60,236,0.06);
    border: 1px solid rgba(108,60,236,0.10);
}
body.page-products .comparison-table th { background: #f3f0fc; }
body.page-products .comparison-table .featured-col { background: rgba(108,60,236,0.04); }

/* ---------- Product detail rows ---------- */
body.page-products .product-detail-row {
    background: #fff; border-radius: 16px; padding: 36px;
    box-shadow: 0 4px 24px rgba(107,60,236,0.06); margin-bottom: 24px;
    transition: transform .26s var(--p-ease), box-shadow .26s var(--p-ease);
}
body.page-products .product-detail-row:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(107,60,236,0.12); }

/* ---------- Scroll reveal ---------- */
body.page-products .ewh-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--p-ease), transform .6s var(--p-ease); }
body.page-products .ewh-reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    body.page-products .page-hero .container { grid-template-columns: 1fr; }
    body.page-products .prod-visual { height: 320px; margin-top: 24px; }
    body.page-products .prod-bento { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    body.page-products .page-title { font-size: 38px; line-height: 44px; }
    body.page-products .page-hero { padding: 120px 0 60px; }
}
@media (prefers-reduced-motion: reduce) {
    body.page-products * { animation: none !important; }
    body.page-products .ewh-reveal { opacity: 1; transform: none; transition: none; }
    body.page-products .prod-card { transform: perspective(1200px) rotateY(-5deg) rotateX(3deg); }
}

/* ============================================================
   Single product detail page (also body.page-products).
   Animated gradient hero + floating spec card, polished specs,
   feature list, perf bars, efficiency cards, reveals.
   ============================================================ */

/* Hero keeps its inline product-color gradient; add depth + a soft glow. */
body.page-products .product-hero {
    position: relative;
    overflow: hidden;
    padding: 160px 0 90px;
    text-align: left;
}
body.page-products .product-hero::before {
    content: "";
    position: absolute; top: -120px; right: -80px;
    width: 420px; height: 420px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 70%);
    filter: blur(20px);
    animation: pDrift 14s infinite ease-in-out;
    pointer-events: none;
}
body.page-products .product-hero .container { position: relative; z-index: 1; }
body.page-products .product-hero-content { max-width: 640px; }
body.page-products .product-hero-speed {
    font-family: 'Plus Jakarta Sans'; font-size: 88px; line-height: 1; font-weight: 800;
    opacity: 0.35; margin-bottom: 4px;
}
body.page-products .product-hero h1 { font-size: 48px; line-height: 54px; margin-bottom: 10px; }
body.page-products .product-hero-tagline { font-size: 20px; opacity: 0.95; margin-bottom: 14px; }
body.page-products .product-hero-desc { font-size: 17px; line-height: 27px; opacity: 0.9; max-width: 52ch; margin-bottom: 28px; }

/* Specs grid → soft white cards */
body.page-products .specs-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; margin-top: -60px;
    position: relative; z-index: 3;
}
body.page-products .spec-card {
    background: #fff !important; border: none !important; border-radius: 16px;
    box-shadow: 0 12px 40px rgba(107,60,236,0.10); padding: 24px;
    transition: transform .26s var(--p-ease), box-shadow .26s var(--p-ease);
}
body.page-products .spec-card:hover { transform: translateY(-4px); box-shadow: 0 18px 48px rgba(107,60,236,0.16); }
body.page-products .spec-label { font-size: 13px; color: var(--p-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
body.page-products .spec-value { font-family: 'Plus Jakarta Sans'; font-size: 18px; font-weight: 700; color: var(--p-ink); }

/* Feature list grid */
body.page-products .features-list-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 40px;
}
body.page-products .feature-list-item {
    display: flex; align-items: center; gap: 14px;
    background: #fff; border-radius: 14px; padding: 18px 20px;
    box-shadow: 0 4px 24px rgba(107,60,236,0.06);
    transition: transform .22s var(--p-ease), box-shadow .22s var(--p-ease);
}
body.page-products .feature-list-item:hover { transform: translateX(4px); box-shadow: 0 10px 28px rgba(107,60,236,0.12); }
body.page-products .feature-list-icon {
    width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
body.page-products .feature-list-item span:last-child { font-size: 15px; color: var(--p-ink); }

/* Perf bars */
body.page-products .perf-bars { display: flex; flex-direction: column; gap: 18px; max-width: 720px; margin: 40px auto 0; }
body.page-products .perf-bar-row { display: grid; grid-template-columns: 160px 1fr 50px; align-items: center; gap: 16px; }
body.page-products .perf-label { font-weight: 600; color: var(--p-ink); }
body.page-products .perf-bar-track { height: 14px; border-radius: 8px; background: rgba(108,60,236,0.10); overflow: hidden; }
body.page-products .perf-bar-fill { height: 100%; border-radius: 8px; transition: width 1.1s var(--p-ease); }
body.page-products .perf-value { font-family: 'Plus Jakarta Sans'; font-weight: 700; color: var(--p-ink); text-align: right; }

/* Efficiency cards */
body.page-products .efficiency-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 40px; }
body.page-products .efficiency-card {
    background: #fff !important; border: none !important; border-radius: 16px; padding: 32px;
    box-shadow: 0 4px 24px rgba(107,60,236,0.06);
    transition: transform .26s var(--p-ease), box-shadow .26s var(--p-ease);
}
body.page-products .efficiency-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(107,60,236,0.12); }
body.page-products .efficiency-number { font-family: 'Plus Jakarta Sans'; font-size: 48px; font-weight: 800; line-height: 1; }
body.page-products .efficiency-label { font-family: 'Plus Jakarta Sans'; font-size: 18px; font-weight: 700; color: var(--p-ink); margin: 8px 0 10px; }
body.page-products .efficiency-card p { color: var(--p-muted); font-size: 15px; line-height: 24px; }

/* left-align inner section headers for a modern editorial feel */
body.page-products .features-detail-section .section-header,
body.page-products .product-details-section .section-header { text-align: left; }
body.page-products .features-detail-section .section-title,
body.page-products .product-details-section .section-title { text-align: left; }