.hero{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:80px 0 100px;color:#fff;text-align:center}
.hero h1{font-size:2.8rem;font-weight:800;margin-bottom:12px}
.hero p{font-size:1.15rem;opacity:.9;margin-bottom:32px}
.shorten-card{background:#fff;border-radius:16px;padding:32px;max-width:680px;margin:-60px auto 40px;box-shadow:0 8px 32px rgba(0,0,0,.1)}
.shorten-card .input-group{border:2px solid #e2e8f0;border-radius:12px;overflow:hidden;transition:border-color .2s}
.shorten-card .input-group:focus-within{border-color:#667eea}
.shorten-card .form-control{border:none;padding:14px 18px;font-size:1rem;box-shadow:none}
.shorten-card .btn-primary{border-radius:0 10px 10px 0;padding:14px 28px;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);border:none}
.shorten-card .btn-primary:hover{opacity:.9}
.result-box{display:flex;gap:8px;margin-top:12px}
.result-box input{flex:1;padding:10px;border:1px solid #a7f3d0;border-radius:8px;background:#ecfdf5;font-size:.95rem}
.result-box .btn-copy{background:#10b981;color:#fff;border:none;border-radius:8px;padding:10px 20px;font-weight:600;cursor:pointer}
.result-box .btn-copy:hover{background:#059669}
.how-it-works{padding:40px 0}
.how-it-works h2{text-align:center;font-weight:700;margin-bottom:32px}
.step-icon{width:56px;height:56px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:700;margin:0 auto 12px}
.blog-section{background:#f8fafc;padding:60px 0}
.blog-section h2{text-align:center;font-weight:700;margin-bottom:32px}
.blog-card{border:none;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:transform .2s,box-shadow .2s;height:100%}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.1)}
.blog-card img{width:100%;height:200px;object-fit:cover}
.blog-card .card-body{padding:20px}
.blog-card .card-title{font-size:1.1rem;font-weight:700}
.blog-card .card-title a{text-decoration:none;color:#1e293b}
.blog-card .card-title a:hover{color:#667eea}
.blog-card .text-muted{font-size:.85rem}
.ad-slot{max-width:728px;margin:24px auto;padding:20px;background:#fff;border-radius:12px;text-align:center;border:1px solid #e2e8f0}
.footer{background:#1e293b;color:#94a3b8;padding:24px 0;text-align:center;font-size:.9rem}
.alert-dismissible .btn-close{position:absolute;right:12px;top:50%;transform:translateY(-50%)}
#adblockDetector{display:none;position:fixed;top:0;left:0;width:100%;z-index:9999}
#adblockDetector.show{display:block}
.adblock-warning{background:#dc2626;color:#fff;padding:12px 20px;text-align:center;font-weight:600;font-size:.95rem}
.adblock-warning .btn-close{filter:brightness(10)}