/* ============================================================
   Websites page — bespoke sections not in theme.css
   ============================================================ */

/* Left-aligned interior hero */
.wd-hero-left{text-align:left}
.wd-hero-left .section-title{max-width:820px}
.wd-hero-left .section-sub{margin-left:0;margin-right:0;max-width:620px}
.wd-hero-left .hero-ctas{justify-content:flex-start}

/* What's included */
.incl{padding:46px 0 30px}
.incl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:42px}
.icard2{background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:26px 24px;transition:border-color .2s,transform .2s}
.icard2:hover{border-color:rgba(212,165,55,.4);transform:translateY(-4px)}
.icard2 .ic2{width:42px;height:42px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:14px}
.icard2 h3{font-family:var(--font-head);font-size:1.08rem;margin-bottom:8px}
.icard2 p{color:var(--muted);font-size:.9rem;line-height:1.55}
@media(max-width:860px){.incl-grid{grid-template-columns:1fr}}

/* Portfolio */
.port{padding:60px 0}
.filter-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:36px 0 40px}
.pill{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted);background:var(--glass);border:1px solid var(--border);border-radius:99px;padding:8px 16px;cursor:pointer;transition:all .2s}
.pill:hover{border-color:rgba(212,165,55,.45);color:var(--text)}
.pill.active{background:linear-gradient(135deg,var(--gold-hi),var(--gold));color:#10131c;border-color:transparent;font-weight:600}
.feat{position:relative;border:1px solid var(--border);border-radius:18px;overflow:hidden;margin-bottom:26px;background:linear-gradient(160deg,rgba(15,52,96,.3),rgba(10,18,36,.85))}
.feat-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:0;align-items:stretch}
.feat-shot{position:relative;background:var(--ink-2);min-height:340px;overflow:hidden}
.browser{position:absolute;inset:22px;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:#0b1426;box-shadow:0 20px 50px -20px rgba(0,0,0,.8);z-index:1;display:flex;flex-direction:column}
.browser-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:rgba(255,255,255,.04);border-bottom:1px solid var(--border);flex-shrink:0}
.browser-bar i{width:9px;height:9px;border-radius:50%;display:block}
.browser-bar i:nth-child(1){background:#f87171}.browser-bar i:nth-child(2){background:var(--gold-hi)}.browser-bar i:nth-child(3){background:var(--live)}
.browser-url{margin-left:10px;font-family:var(--font-mono);font-size:.62rem;color:var(--faint);background:rgba(0,0,0,.25);border-radius:5px;padding:3px 10px;flex:1}
/* Screenshot area inside the browser frame (previously occluded by the frame bg). */
.browser-screen{flex:1;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--faint);font-family:var(--font-mono);font-size:.7rem;background:repeating-linear-gradient(45deg,rgba(148,163,184,.04),rgba(148,163,184,.04) 12px,transparent 12px,transparent 24px)}
.browser-screen img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block}
.shot-ph{position:absolute;inset:0;top:34px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--faint);font-family:var(--font-mono);font-size:.7rem;padding:20px;background:repeating-linear-gradient(45deg,rgba(148,163,184,.03),rgba(148,163,184,.03) 12px,transparent 12px,transparent 24px)}
.feat-body{padding:40px 38px;display:flex;flex-direction:column;justify-content:center}
.feat-tag{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-hi);margin-bottom:12px}
.feat-body h3{font-size:1.6rem;margin-bottom:12px}
.feat-body p{color:var(--muted);font-size:.96rem;margin-bottom:18px}
.feat-result{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:.78rem;color:var(--live);background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.3);border-radius:8px;padding:9px 14px;margin-bottom:22px;width:fit-content}
@media(max-width:860px){.feat-grid{grid-template-columns:1fr}.feat-shot{min-height:260px}}
.port-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pcard2{position:relative;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--glass);transition:transform .25s,border-color .25s;text-decoration:none;display:block}
.pcard2:hover{transform:translateY(-6px);border-color:rgba(212,165,55,.45)}
.pcard2 .shot{position:relative;aspect-ratio:16/10;background:var(--ink-2);overflow:hidden}
.pcard2 .mini-bar{display:flex;align-items:center;gap:5px;padding:7px 10px;background:rgba(255,255,255,.04);border-bottom:1px solid var(--border);position:relative;z-index:1}
.pcard2 .mini-bar i{width:7px;height:7px;border-radius:50%;background:var(--faint);display:block}
.pcard2 .shot-ph2{position:absolute;inset:0;top:26px;display:flex;align-items:center;justify-content:center;color:var(--faint);font-family:var(--font-mono);font-size:.64rem;text-align:center;padding:14px;background:repeating-linear-gradient(45deg,rgba(148,163,184,.03),rgba(148,163,184,.03) 10px,transparent 10px,transparent 20px)}
.pcard2 .overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,11,22,.92),transparent 60%);opacity:0;display:flex;align-items:flex-end;padding:16px;transition:opacity .25s;z-index:2}
.pcard2:hover .overlay{opacity:1}
.pcard2 .overlay .view{font-family:var(--font-mono);font-size:.72rem;color:var(--gold-hi)}
.pcard2 .meta{padding:16px 18px}
.pcard2 .meta h4{font-family:var(--font-head);font-size:1.02rem;margin-bottom:5px}
.pcard2 .meta .tag2{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;color:var(--faint)}
.port-note{text-align:center;color:var(--faint);font-family:var(--font-mono);font-size:.7rem;margin-top:28px}
@media(max-width:980px){.port-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.port-grid{grid-template-columns:1fr}}