/* ScreenForge — Forge UI System */
:root{--bg:#0d0e0f;--bg2:#141618;--bg3:#1c1f22;--line:rgba(255,255,255,.08);--text:#e8e4dc;--text2:#9a9590;--accent:#c8a96e;--accent2:#e8c98e;--radius:10px;--mono:'IBM Plex Mono',monospace;--syne:'Syne',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(circle at top,#181a1d 0,#0d0e0f 48%,#090a0b 100%);color:var(--text);font-family:var(--mono);line-height:1.6}.site-header{height:60px;padding:0 28px;border-bottom:1px solid var(--line);background:rgba(13,14,15,.94);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50}.logo{font-family:var(--syne);font-weight:800;font-size:18px;letter-spacing:.02em}.header-nav{display:flex;gap:20px}.header-nav a{font-family:var(--syne);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text2);text-decoration:none;transition:.2s}.header-nav a:hover{color:var(--accent)}.hero{max-width:1440px;margin:0 auto;padding:44px 28px 14px}.eyebrow{font-family:var(--syne);font-size:10px;text-transform:uppercase;letter-spacing:.17em;color:var(--accent);font-weight:800;margin-bottom:10px}.hero h1{font-family:var(--syne);font-size:clamp(36px,5vw,62px);line-height:1.03;max-width:950px;margin:0 0 14px}.hero h1 em{font-family:'Instrument Serif',serif;color:var(--accent);font-weight:400}.hero p{max-width:820px;color:var(--text2);margin:0}.main-container{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:380px 1fr;gap:22px;padding:24px 28px}.sidebar{position:sticky;top:82px;align-self:start}.panel{background:rgba(20,22,24,.86);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 18px 55px rgba(0,0,0,.25);backdrop-filter:blur(10px)}.panel-head{padding:15px 18px;border-bottom:1px solid var(--line)}.panel-title{font-family:var(--syne);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text2)}.panel-body{padding:18px;display:grid;gap:13px}.field label{display:block;margin-bottom:5px;font-family:var(--syne);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text2)}.field select,.field input{width:100%;appearance:none;background:#1b1e21;border:1px solid rgba(255,255,255,.09);color:var(--text);border-radius:7px;padding:10px 36px 10px 12px;font-family:var(--mono);font-size:12px;outline:none;transition:.2s}.recorder-panel{display:flex;flex-direction:column;align-items:center;gap:14px}.preview-wrapper{position:relative;width:100%;max-width:1000px;display:flex;justify-content:center}.preview-stage{width:100%;max-width:1000px;aspect-ratio:16/9;background:linear-gradient(145deg,#070809,#121416);border:1px solid var(--line);border-radius:16px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.48)}.preview-stage[data-format='portrait']{aspect-ratio:9/16;max-width:470px}.preview-stage[data-format='square']{aspect-ratio:1/1;max-width:700px}.preview-stage.has-preview .empty-preview{display:none}#screenPreview{width:100%;height:100%;object-fit:cover;display:none}.empty-preview{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:rgba(255,255,255,.58)}.webcam-float{position:absolute;right:18px;bottom:18px;width:220px;aspect-ratio:16/10;border:2px solid rgba(200,169,110,.9);border-radius:16px;overflow:hidden;display:none;z-index:10;box-shadow:0 12px 38px rgba(0,0,0,.6)}#webcamPreview{width:100%;height:100%;object-fit:cover}.recording-pill{position:absolute;left:14px;top:14px;display:none;align-items:center;gap:7px;background:rgba(13,14,15,.86);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:7px 11px;font-family:var(--syne);font-size:10px;font-weight:800;letter-spacing:.08em;z-index:15}.recording-pill.visible{display:flex}.controls{display:flex;justify-content:center;gap:10px}.btn{padding:11px 20px;border-radius:8px;cursor:pointer;font-family:var(--syne);font-weight:800;font-size:11px;text-transform:uppercase;border:none;transition:.22s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.btn-primary{background:var(--accent);color:#0d0e0f!important}.btn-primary:hover{background:var(--accent2);transform:translateY(-1px)}.btn-secondary{background:#1c1f22;color:var(--text);border:1px solid rgba(255,255,255,.09)}#waveformCanvas{width:100%;max-width:1000px;height:70px;background:rgba(20,22,24,.65);border:1px solid var(--line);border-radius:10px}.recordings-list{width:100%;max-width:1000px;display:grid;gap:14px;margin-top:12px}.recording-item{display:grid;grid-template-columns:120px 1fr auto;gap:18px;align-items:center;background:linear-gradient(145deg,rgba(26,29,32,.96),rgba(20,22,24,.92));border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px;transition:.24s}.recording-item:hover{transform:translateY(-2px);border-color:rgba(200,169,110,.32);box-shadow:0 16px 45px rgba(0,0,0,.32)}.recording-thumb{height:72px;border-radius:10px;background:linear-gradient(135deg,#1f2327,#111315);border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-family:var(--syne);font-size:11px;font-weight:800;color:rgba(255,255,255,.38);position:relative;overflow:hidden}.recording-thumb::after{content:'REC';position:absolute;top:8px;left:8px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:4px 7px;font-size:8px;color:var(--accent)}.recording-meta{display:flex;flex-direction:column;gap:6px}.recording-title{font-family:var(--syne);font-size:14px;font-weight:700;color:var(--text)}.recording-details{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--text2)}.recording-badge{background:rgba(200,169,110,.12);border:1px solid rgba(200,169,110,.22);padding:4px 8px;border-radius:999px;color:var(--accent)}.download-btn{min-width:120px}.preview-modal,.trim-controls,#previewPlayer,.preview-close{display:none!important}.empty-state{text-align:center;color:var(--text2);padding:20px;border:1px dashed rgba(255,255,255,.08);border-radius:12px;background:rgba(20,22,24,.55)}@media(max-width:900px){.main-container{grid-template-columns:1fr}.sidebar{position:static}.recording-item{grid-template-columns:1fr}.download-btn{width:100%}}

/* ScreenForge SEO Article Enhancements */
.article-layout{grid-template-columns:1fr!important;max-width:1180px!important}
.article-panel{margin-bottom:28px}
.article-body{gap:24px!important}
.article-body h2{font-family:var(--syne);font-size:28px;line-height:1.15;margin:0 0 8px}
.article-body p,.article-body li{color:var(--text2);font-size:15px}
.article-body a{color:var(--accent);text-decoration:none}
.article-body a:hover{text-decoration:underline}
.affiliate-note{border:1px solid rgba(200,169,110,.22);background:rgba(200,169,110,.06);border-radius:12px;padding:18px}
.faq-card a{color:var(--text);text-decoration:none}.faq-card a:hover{color:var(--accent)}

/* Blog Listing Layout Improvements */
.blog-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:24px;
margin-top:26px;
}

.blog-card{
background:linear-gradient(145deg,rgba(26,29,32,.96),rgba(20,22,24,.92));
border:1px solid rgba(255,255,255,.08);
border-radius:16px;
padding:24px;
display:flex;
flex-direction:column;
gap:16px;
transition:.24s;
height:100%;
}

.blog-card:hover{
transform:translateY(-4px);
border-color:rgba(200,169,110,.34);
box-shadow:0 18px 44px rgba(0,0,0,.35);
}

.blog-card h2,
.blog-card h3{
font-family:var(--syne);
font-size:24px;
line-height:1.15;
margin:0;
}

.blog-card p{
color:var(--text2);
font-size:14px;
margin:0;
flex:1;
}

.blog-card .btn,
.article-body .btn,
.article-panel .btn{
width:fit-content;
min-width:190px;
color:#0d0e0f!important;
font-weight:800;
}

.blog-meta{
display:flex;
gap:10px;
flex-wrap:wrap;
font-size:11px;
color:var(--text2);
}

.blog-tag{
background:rgba(200,169,110,.12);
border:1px solid rgba(200,169,110,.22);
padding:4px 8px;
border-radius:999px;
color:var(--accent);
}

@media(max-width:768px){
.blog-grid{
grid-template-columns:1fr;
}

.blog-card{
padding:20px;
}
}