:root {
    --aiper-gradient  : linear-gradient(45deg,#1ecad3,#9486f7);
    --color-bg        : #F5F5F7;
    --color-text-h    : #1D1D1F;
    --color-text-body : #424245;
    --color-text-meta : #6E6E73;
    --color-text-date : #6E6E73;
    --font-stack      : system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --max-width       : 1200px;
    --section-px      : clamp(16px,4vw,48px);
    --card-radius     : 12px;
    --card-shadow     : 0 4px 20px rgba(0,0,0,0.02);
    --card-shadow-hover: 0 12px 30px rgba(30,202,211,0.15);
}
#aiper-homepage { background-color:var(--color-bg); font-family:var(--font-stack); }
#aiper-homepage :is(h1,h2,h3){font-family:var(--font-stack)}

.aiper-hero { max-width:var(--max-width); margin:0 auto; padding:clamp(56px,9vw,104px) var(--section-px) clamp(40px,6vw,64px); text-align:center; }
.aiper-hero__title { font-size:clamp(34px,5.5vw,64px); font-weight:800; color:var(--color-text-h); line-height:1.12; letter-spacing:-0.025em; margin:0 0 20px; }
.aiper-hero__title .gradient-word { background:var(--aiper-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.aiper-hero__desc { font-size:18px; color:var(--color-text-body); line-height:1.6; max-width:680px; margin:0 auto 60px; }
.aiper-banner { max-width:var(--max-width); margin:0 auto; padding:0 var(--section-px) clamp(56px,9vw,96px); }
.aiper-banner__img { width:100%; height:auto; display:block; border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,0.03); }

.aiper-featured { padding:0 var(--section-px) clamp(48px,7vw,80px); }
.aiper-featured__inner, .aiper-pool__inner { max-width:var(--max-width); margin:0 auto; }
.aiper-featured__heading { font-size:32px; font-weight:700; color:var(--color-text-h); margin:0 0 32px; letter-spacing:-0.015em; }
.aiper-featured__grid { display:grid; grid-template-columns:1.15fr 0.85fr; gap:24px; align-items:stretch; }
.aiper-card-main { display:flex; flex-direction:column; background:#fff; border-radius:var(--card-radius); box-shadow:var(--card-shadow); overflow:hidden; text-decoration:none; color:inherit; transition:transform .25s ease,box-shadow .25s ease; }
.aiper-card-main:hover { transform:translateY(-4px); box-shadow:var(--card-shadow-hover); }
.aiper-card-main__img-wrap { aspect-ratio:16/9; overflow:hidden; flex-shrink:0; background:linear-gradient(135deg,#e5fafb 0%,#ede8ff 100%); }
.aiper-card-main__img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.aiper-card-main:hover .aiper-card-main__img { transform:scale(1.04); }
.aiper-card-main__body { padding:28px; display:flex; flex-direction:column; gap:12px; flex:1; }
.aiper-card-main__title { font-size:clamp(18px,1.8vw,24px); font-weight:700; color:var(--color-text-h); line-height:1.3; margin:0; }
.aiper-card-main__excerpt { font-size:15px; color:var(--color-text-meta); line-height:1.65; margin:0; flex:1; }
.aiper-cards-side { display:flex; flex-direction:column; gap:16px; }
.aiper-card-side { display:flex; background:#fff; border-radius:var(--card-radius); box-shadow:var(--card-shadow); overflow:hidden; text-decoration:none; color:inherit; transition:transform .25s ease,box-shadow .25s ease; flex:1; }
.aiper-card-side:hover { transform:translateY(-4px); box-shadow:var(--card-shadow-hover); }
.aiper-card-side__img { width:130px; min-width:130px; object-fit:cover; display:block; }
.aiper-card-side__img-ph { width:130px; min-width:130px; flex-shrink:0; background:linear-gradient(135deg,#e5fafb 0%,#ede8ff 100%); }
.aiper-card-side__body { padding:16px 20px; display:flex; flex-direction:column; justify-content:center; gap:8px; flex:1; min-width:0; }
.aiper-card-side__title { font-size:14px; font-weight:600; color:var(--color-text-h); line-height:1.45; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.aiper-card__cat { display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#0b6e77; }
.aiper-card__date { font-size:12px; color:var(--color-text-date); }
.aiper-card__readmore { display:inline-block; font-size:14px; font-weight:600; color:#0b6e77; margin-top:auto; }

.aiper-pool { padding:60px var(--section-px) clamp(48px,8vw,96px); }
.aiper-pool__heading { font-size:32px; font-weight:700; color:var(--color-text-h); margin:0 0 28px; letter-spacing:-0.015em; }
.aiper-pool-tabs { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.aiper-pool-tab { display:inline-block; padding:8px 22px; border-radius:30px; font-size:14px; font-weight:600; text-decoration:none; background:#EBEBF0; color:#1a202c; -webkit-text-fill-color:#1a202c; border:1.5px solid transparent; transition:background .2s ease,color .2s ease; white-space:nowrap; cursor:pointer; user-select:none; }
.aiper-pool-tab:hover:not(.is-active) { background:#DCDCE2; color:var(--color-text-h); -webkit-text-fill-color:var(--color-text-h); }
.aiper-pool-tab.is-active { background:linear-gradient(135deg,#1ecad3,#9486f7); color:#1a202c; -webkit-text-fill-color:#1a202c; }
.aiper-pool-tab:focus-visible{outline:2px solid #9486f7;outline-offset:2px}
.aiper-pool-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; transition:opacity .2s ease; }
.aiper-pool-grid.is-loading { opacity:0.4; pointer-events:none; }
.aiper-pool-empty { grid-column:1/-1; text-align:center; color:var(--color-text-meta); padding:40px 0; font-size:15px; }
.aiper-pool-error { grid-column:1/-1; text-align:center; padding:24px 16px; color:var(--color-text-meta); font-size:14px; }
.aiper-pool-error a { color:#0b6e77; cursor:pointer; text-decoration:underline; font-weight:600; }
.aiper-pool-card { display:flex; flex-direction:column; background:#fff; border-radius:var(--card-radius); box-shadow:var(--card-shadow); overflow:hidden; text-decoration:none; color:inherit; transition:transform .25s ease,box-shadow .25s ease; }
.aiper-pool-card:hover { transform:translateY(-4px); box-shadow:var(--card-shadow-hover); }
.aiper-pool-card__img-wrap { aspect-ratio:16/9; overflow:hidden; background:linear-gradient(135deg,#e5fafb 0%,#ede8ff 100%); flex-shrink:0; }
.aiper-pool-card__img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.aiper-pool-card:hover .aiper-pool-card__img { transform:scale(1.04); }
.aiper-pool-card__body { padding:20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.aiper-pool-card__title { font-size:15px; font-weight:600; color:var(--color-text-h); line-height:1.4; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.aiper-pool-card__date { font-size:12px; color:var(--color-text-date); margin-top:auto; }
.aiper-pool-see-more-wrap { text-align:center; margin-top:40px; }
.aiper-pool-see-more { display:inline-block; padding:13px 44px; border-radius:30px; border:none; color:#1a202c; -webkit-text-fill-color:#1a202c; text-decoration:none; font-size:15px; font-weight:600; background:linear-gradient(135deg,#1ecad3,#9486f7); transition:filter .2s ease,transform .2s ease,box-shadow .2s ease; }
.aiper-pool-see-more:hover { filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 4px 14px rgba(148,134,247,.35); color:#1a202c; -webkit-text-fill-color:#1a202c; }
.aiper-pool-see-more:focus { outline:2px solid #9486f7; outline-offset:2px; color:#1a202c; -webkit-text-fill-color:#1a202c; }
.aiper-pool-see-more:active { filter:brightness(.97); color:#1a202c; -webkit-text-fill-color:#1a202c; }

.aiper-tools { padding:60px var(--section-px) 80px; }
.aiper-tools__inner { max-width:var(--max-width); margin:0 auto; }
.aiper-tools__heading { font-size:32px; font-weight:700; color:var(--color-text-h); margin:0 0 10px; letter-spacing:-0.015em; }
.aiper-tools__sub { font-size:14px; color:var(--color-text-body); line-height:1.6; margin:0 0 36px; max-width:600px; }
.aiper-tools-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.aiper-tool-card { position:relative; display:flex; flex-direction:column; gap:14px; padding:24px; background:#fff; border-radius:16px; text-decoration:none; color:inherit; transition:transform .25s ease,box-shadow .25s ease; }
.aiper-tool-card::before { content:''; position:absolute; inset:0; border-radius:16px; padding:1px; background:#E5E5EA; -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; transition:background .3s ease; pointer-events:none; }
.aiper-tool-card:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(30,202,211,0.14); }
.aiper-tool-card:hover::before { background:var(--aiper-gradient); }
.aiper-tool-card__icon { width:48px; height:48px; border-radius:12px; overflow:hidden; flex-shrink:0; }
.aiper-tool-card__icon-img { width:48px; height:48px; object-fit:cover; display:block; }
.aiper-tool-card__icon-fallback { width:48px; height:48px; border-radius:12px; background:var(--aiper-gradient); display:flex; align-items:center; justify-content:center; }
.aiper-tool-card__title { font-size:18px; font-weight:600; color:var(--color-text-h); line-height:1.35; margin:0; }
.aiper-tool-card__excerpt { font-size:13px; color:var(--color-text-meta); line-height:1.6; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; flex:1; }

/* ── Troubleshooting Guides section (dark navy) ──────────────────── */
.aiper-tc { padding:60px var(--section-px) 80px; background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 100%); }
.aiper-tc__inner { max-width:var(--max-width); margin:0 auto; }
.aiper-tc__heading { font-size:32px; font-weight:700; color:#fff; margin:0 0 10px; letter-spacing:-0.015em; }
.aiper-tc__sub { font-size:14px; color:rgba(255,255,255,0.65); line-height:1.6; margin:0 0 36px; max-width:600px; }
.aiper-tc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.aiper-tc-card { display:flex; flex-direction:column; gap:12px; padding:24px; background:rgba(255,255,255,0.06); border-radius:16px; text-decoration:none; color:inherit; border:1px solid rgba(255,255,255,0.1); transition:transform .25s ease,background .25s ease,border-color .25s ease; }
.aiper-tc-card:hover { transform:translateY(-2px); background:rgba(255,255,255,0.1); border-color:rgba(30,202,211,0.5); }
.aiper-tc-card__icon { width:44px; height:44px; border-radius:12px; background:var(--aiper-gradient); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.aiper-tc-card__title { font-size:16px; font-weight:600; color:#fff; line-height:1.35; margin:0; }
.aiper-tc-card__excerpt { font-size:13px; color:rgba(255,255,255,0.5); line-height:1.6; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; flex:1; }
.aiper-tc-see-more-wrap { text-align:center; margin-top:40px; }
.aiper-tc-see-more { display:inline-block; padding:13px 44px; border-radius:30px; border:none; color:#1a202c; -webkit-text-fill-color:#1a202c; text-decoration:none; font-size:15px; font-weight:600; background:linear-gradient(135deg,#1ecad3,#9486f7); transition:filter .2s ease,transform .2s ease,box-shadow .2s ease; }
.aiper-tc-see-more:hover { filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 4px 14px rgba(148,134,247,.35); color:#1a202c; -webkit-text-fill-color:#1a202c; }
.aiper-tc-see-more:focus { outline:2px solid #9486f7; outline-offset:2px; color:#1a202c; -webkit-text-fill-color:#1a202c; }
.aiper-tc-see-more:active { filter:brightness(.97); color:#1a202c; -webkit-text-fill-color:#1a202c; }

@media (max-width:900px) {
    .aiper-featured__grid { grid-template-columns:1fr; }
    .aiper-pool-grid      { grid-template-columns:repeat(2,1fr); }
    .aiper-tools-grid     { grid-template-columns:repeat(2,1fr); }
    .aiper-tc-grid        { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px) {
    .aiper-featured__heading,.aiper-pool__heading,.aiper-tools__heading { font-size:26px; }
    .aiper-tc__heading    { font-size:26px; }
    .aiper-pool-grid,.aiper-tools-grid,.aiper-tc-grid { grid-template-columns:1fr; }
    .aiper-card-side__img,.aiper-card-side__img-ph { width:96px; min-width:96px; }
    /* Phones: equal-width two-column grid, labels may wrap, last odd tab spans the row (the nowrap pills used to break into ragged 3-6 rows). */
    .aiper-pool-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:24px; }
    .aiper-pool-tab  { display:flex; align-items:center; justify-content:center; box-sizing:border-box; min-height:44px; padding:8px 10px; font-size:13px; line-height:1.25; text-align:center; white-space:normal; border-radius:22px; }
    .aiper-pool-tab:last-child:nth-child(odd) { grid-column:1 / -1; }
}