/* OptiWolf marketing-site — CRO Academy index. Shared chrome is in site.css. */

.head{text-align:center;padding:64px 0 40px;}
.eyebrow{display:inline-flex;align-items:center;gap:.5em;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 14px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-700);box-shadow:var(--sh-sm);margin-bottom:18px;}
.head h1{font-size:clamp(2.4rem,4.8vw,3.2rem);}
.head p{color:var(--muted);font-size:1.15rem;max-width:560px;margin:14px auto 0;}
.filters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:28px;}
.chip{font-family:var(--body);font-weight:600;font-size:.86rem;color:var(--ink-soft);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:7px 16px;cursor:pointer;transition:.15s;}
.chip.on{background:var(--navy-900);color:#fff;border-color:var(--navy-900);}
.chip:hover{border-color:var(--navy-400);}

/* featured */
.feat{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;background:var(--surface);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:var(--sh-md);margin-bottom:40px;}
@media(max-width:820px){.feat{grid-template-columns:1fr;}}
.feat .cover{min-height:280px;background:var(--grad-navy);position:relative;overflow:hidden;}
.feat .cover::after{content:"";position:absolute;inset:0;background:radial-gradient(420px 220px at 75% 15%,rgba(47,217,194,.28),transparent 60%);}
.feat .cover img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62%;}
.feat .body{padding:36px 36px 36px 8px;display:flex;flex-direction:column;justify-content:center;}
@media(max-width:820px){.feat .body{padding:28px;}}
.tag{display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;border-radius:999px;background:#e3f6f2;color:var(--teal-700);}
.tag.navy{background:var(--navy-100);color:var(--navy-700);}
.feat h2{font-size:1.8rem;margin:14px 0 10px;}
.feat p{color:var(--muted);margin:0 0 18px;}
.meta{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted);}
.meta .dot{width:3px;height:3px;border-radius:50%;background:var(--navy-200);}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--grad-facet);color:#fff;font-family:var(--display);font-weight:700;font-size:.7rem;display:grid;place-content:center;}

/* grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:860px){.grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.grid{grid-template-columns:1fr;}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--sh-sm);transition:.2s;display:flex;flex-direction:column;}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--navy-200);}
.card .cover{height:150px;position:relative;overflow:hidden;}
.card .cover.c1{background:var(--grad-navy);}.card .cover.c2{background:var(--grad-facet);}
.card .cover.c3{background:linear-gradient(135deg,#0e8c7d,#0a2342);}.card .cover.c4{background:linear-gradient(135deg,#1b4f78,#061b36);}
.card .cover::after{content:"";position:absolute;inset:0;background:radial-gradient(220px 120px at 80% 10%,rgba(47,217,194,.26),transparent 60%);}
.card .cover .tag{position:absolute;left:14px;top:14px;background:rgba(255,255,255,.92);color:var(--navy-700);z-index:1;}
.card .body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1;}
.card h3{font-size:1.15rem;margin-bottom:8px;}
.card p{color:var(--muted);font-size:.92rem;margin:0 0 16px;flex:1;}

/* pagination */
.pager{display:flex;justify-content:center;align-items:center;gap:6px;margin:48px 0 8px;}
.pager a,.pager span{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--border);background:var(--surface);font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--ink-soft);padding:0 12px;}
.pager a:hover{border-color:var(--navy-400);color:var(--navy-900);}
.pager .cur{background:var(--navy-900);color:#fff;border-color:var(--navy-900);}
.pager .gap{border:none;background:transparent;}
.pager .nav-btn{gap:6px;}
.pager .disabled{opacity:.4;pointer-events:none;}

/* newsletter */
.news{margin:56px 0 0;}
.news .box{background:var(--grad-navy);border-radius:24px;padding:48px;text-align:center;box-shadow:var(--sh-lg);position:relative;overflow:hidden;}
.news .box::after{content:"";position:absolute;left:-60px;bottom:-80px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(47,217,194,.22),transparent 65%);}
.news h2{color:#fff;position:relative;}
.news p{color:var(--navy-200);position:relative;max-width:480px;margin:12px auto 22px;}
.news form{position:relative;display:flex;gap:10px;max-width:460px;margin:0 auto;}
.news input{flex:1;border:none;border-radius:11px;padding:.85em 1.1em;font-family:var(--body);font-size:1rem;}
@media(max-width:520px){.news form{flex-direction:column;}}