/* =====================================================
   LESSLOADING — HOMEPAGE TEMPLATE CSS
   Add this at the bottom of assets/css/main.css
   or @import from main.css
   ===================================================== */

/* ---- HERO ---- */
.ll-hero {
  min-height: 100vh;
  position: relative; overflow: hidden;
  display: flex; align-items: center;
}
.ll-hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(#1e1e1e 1px, transparent 1px),
                    linear-gradient(90deg, #1e1e1e 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .35;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 100%);
}
.ll-blob { position: absolute; border-radius: 50%; filter: blur(130px); opacity: .08; pointer-events: none; }
.ll-blob-1 { width:700px;height:700px;background:#b8ff00;top:-300px;right:-200px;animation:blobf 10s ease-in-out infinite; }
.ll-blob-2 { width:400px;height:400px;background:#ff5c35;bottom:-100px;left:5%;animation:blobf 13s ease-in-out infinite reverse; }
@keyframes blobf { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-24px,24px) scale(1.06)} }

.ll-hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: 80px; max-width: 1280px; margin: 0 auto; padding: 120px 48px 80px; width: 100%;
}

.ll-hero-left {}

.ll-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(184,255,0,.08); border: 1px solid rgba(184,255,0,.18);
  padding: 6px 14px; border-radius: 100px;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #b8ff00;
  margin-bottom: 28px; font-family: 'Syne', sans-serif; font-weight: 700;
  animation: fadeUp .6s ease both .1s;
}
.ll-badge-dot { width:6px;height:6px;background:#b8ff00;border-radius:50%;animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.6)} }

.ll-hero-title {
  font-family: 'Syne', sans-serif !important; font-weight: 800 !important;
  font-size: clamp(3rem, 5.5vw, 5.5rem) !important;
  line-height: .95 !important; margin-bottom: 24px !important;
  color: #efefef !important; letter-spacing: -.03em !important;
  animation: fadeUp .7s ease both .25s;
}
.ll-outline { color: transparent !important; -webkit-text-stroke: 1.5px #2a2a2a; }
.ll-hl { color: #b8ff00 !important; position: relative; display: inline-block; }
.ll-hl::after {
  content:''; position:absolute; bottom:4px; left:0; right:0; height:3px;
  background:#b8ff00; border-radius:2px;
  transform:scaleX(0); transform-origin:left; animation:lineGrow 1s ease both .9s;
}
@keyframes lineGrow { to { transform: scaleX(1); } }

.ll-hero-sub {
  color: #777 !important; font-size: 1.02rem !important; line-height: 1.8 !important;
  max-width: 420px; margin-bottom: 40px !important;
  animation: fadeUp .7s ease both .4s;
}

.ll-hero-actions {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  animation: fadeUp .7s ease both .55s;
}
.ll-btn-primary {
  background: #b8ff00; color: #000; padding: 14px 32px; border-radius: 100px;
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: .88rem;
  letter-spacing: .02em; transition: transform .2s, box-shadow .2s;
  display: inline-flex; align-items: center; gap: 8px;
}
.ll-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(184,255,0,.28); color: #000 !important; }
.ll-btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  color: #777; font-size: .88rem; transition: color .2s, gap .2s;
}
.ll-btn-ghost:hover { color: #efefef !important; gap: 16px; }
.ll-btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid #2a2a2a; color: #777; padding: 12px 28px; border-radius: 100px;
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: .82rem;
  transition: border-color .2s, color .2s, background .2s;
}
.ll-btn-outline:hover { border-color: #b8ff00; color: #b8ff00 !important; }

.ll-hero-stats {
  display: flex; gap: 36px; margin-top: 52px;
  padding-top: 36px; border-top: 1px solid #1e1e1e;
  animation: fadeUp .7s ease both .7s;
}
.ll-stat-num { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.7rem; color: #b8ff00; letter-spacing: -.03em; }
.ll-stat-label { font-size: .75rem; color: #555; margin-top: 2px; }

/* Hero terminal */
.ll-hero-right { position: relative; }
.ll-float-card {
  position: absolute; background: #0f0f0f; border: 1px solid #2a2a2a;
  border-radius: 10px; padding: 12px 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5); z-index: 3;
  font-size: .75rem;
}
.ll-float-card-1 { top: -18px; right: -24px; animation: floatCard 5s ease-in-out infinite; }
.ll-float-card-2 { bottom: 40px; left: -32px; animation: floatCard 7s ease-in-out infinite reverse; }
@keyframes floatCard { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.ll-float-label { font-size: .62rem; color: #555; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; }
.ll-float-val { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1rem; color: #b8ff00; }
.ll-float-sub { font-size: .65rem; color: #555; margin-top: 2px; }

.ll-terminal {
  background: #141414; border: 1px solid #2a2a2a; border-radius: 12px;
  overflow: hidden; position: relative; z-index: 2;
}
.ll-terminal-bar {
  background: #0f0f0f; border-bottom: 1px solid #1e1e1e;
  padding: 12px 16px; display: flex; align-items: center; gap: 7px;
}
.dot { width:10px;height:10px;border-radius:50%; }
.dot.r{background:#ff5f57}.dot.y{background:#febc2e}.dot.g{background:#28c840}
.ll-terminal-url {
  margin-left: 8px; flex:1; background:#080808; border:1px solid #1e1e1e;
  border-radius:100px; padding:4px 14px; font-size:.7rem; color:#555;
}
.ll-terminal-body {
  padding: 24px;
  background: linear-gradient(160deg, #141414 0%, #0d0d0d 100%);
}
.ll-line {
  font-family: 'Courier New', monospace; font-size: .82rem;
  color: #666; line-height: 2;
}
.c-kw { color: #b8ff00; }
.c-str { color: #ff9580; }
.c-num { color: #79d4ff; }
.c-comment { color: #333; }
.ll-cursor {
  display: inline-block; width:8px;height:15px; background:#b8ff00;
  vertical-align: middle; animation: blink .8s step-end infinite;
}
@keyframes blink { 50%{opacity:0} }
.ll-terminal-footer {
  border-top: 1px solid #1e1e1e; padding: 12px 18px;
  display: flex; align-items: center; gap: 8px;
}
.ll-status-dot { width:7px;height:7px;background:#28c840;border-radius:50%;animation:pulse 2s infinite; }
.ll-status-text { font-size:.73rem;color:#555; }
.ll-status-badge {
  margin-left:auto; background:rgba(40,200,64,.1); border:1px solid rgba(40,200,64,.2);
  color:#28c840; font-size:.65rem; padding:3px 10px; border-radius:100px;
  font-family:'Syne',sans-serif; font-weight:700; letter-spacing:.06em;
}

/* ---- MARQUEE ---- */
.ll-marquee {
  border-top: 1px solid #1e1e1e; border-bottom: 1px solid #1e1e1e;
  padding: 14px 0; overflow: hidden; background: #0f0f0f;
}
.ll-marquee-track { display:flex; width:max-content; animation: marquee 26s linear infinite; }
.ll-marquee-item {
  display:flex; align-items:center; gap:10px; padding:0 28px;
  white-space:nowrap; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:#444; font-family:'Syne',sans-serif;
}
.ll-marquee-dot { width:4px;height:4px;background:#b8ff00;border-radius:50%; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---- SECTIONS ---- */
.ll-featured-section, .ll-blog-section, .ll-tools-section { padding: 96px 0; }
.ll-featured-section { background: #080808; }
.ll-blog-section { background: #0f0f0f; }
.ll-tools-section { background: #080808; }

.ll-section-inner { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.ll-s-label {
  display:inline-flex;align-items:center;gap:10px;
  font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:#b8ff00;margin-bottom:14px;font-family:'Syne',sans-serif;font-weight:700;
}
.ll-s-label::before { content:'';width:18px;height:1px;background:#b8ff00; }
.ll-s-title { font-size:clamp(1.8rem,3vw,2.8rem)!important;max-width:600px;margin-bottom:10px!important; }
.ll-s-sub { color:#666!important;font-size:.93rem!important;max-width:480px;line-height:1.75!important;margin-bottom:0!important; }

/* ---- FEATURED GRID ---- */
.ll-featured-grid {
  display:grid; grid-template-columns:1.6fr 1fr; grid-template-rows:auto auto;
  gap:2px; background:#1e1e1e; margin-top:52px;
  border:1px solid #1e1e1e; border-radius:12px; overflow:hidden;
}
.ll-post-card {
  background:#141414; display:flex; flex-direction:column;
  text-decoration:none; color:#efefef; transition:background .3s; position:relative; overflow:hidden;
}
.ll-post-card:hover { background:#1a1a1a; }
.ll-post-card::after {
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:#b8ff00;
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.ll-post-card:hover::after { transform:scaleX(1); }
.ll-post-card.featured { grid-row:span 2; }

.ll-post-img { overflow:hidden; }
.ll-post-img img { width:100%;object-fit:cover;transition:transform .5s ease; }
.ll-post-card:hover .ll-post-img img { transform:scale(1.04); }
.ll-post-img-placeholder {
  display:flex;align-items:center;justify-content:center;
  font-size:3.5rem;height:260px;
  background:linear-gradient(135deg,#0d1f0d,#141414);
}
.ll-post-card.small .ll-post-img-placeholder { height:180px;font-size:2.5rem; }

.ll-post-body { padding:28px;flex:1;display:flex;flex-direction:column;gap:10px; }
.ll-post-tag { font-family:'Syne',sans-serif;font-weight:700;font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;color:#b8ff00; }
.ll-post-title { font-family:'Syne',sans-serif;font-weight:700;line-height:1.2;color:#efefef;transition:color .2s; }
.ll-post-card.featured .ll-post-title { font-size:1.45rem; }
.ll-post-card.small .ll-post-title { font-size:.98rem; }
.ll-post-card:hover .ll-post-title { color:#b8ff00; }
.ll-post-excerpt { color:#666;font-size:.88rem;line-height:1.7;flex:1; }
.ll-post-meta { display:flex;align-items:center;gap:8px;font-size:.7rem;color:#555;margin-top:8px; }
.ll-meta-dot { width:3px;height:3px;background:#444;border-radius:50%; }
.ll-post-arrow {
  width:30px;height:30px;border:1px solid #2a2a2a;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;
  margin-top:12px;align-self:flex-start;transition:background .2s,border-color .2s,color .2s;
}
.ll-post-card:hover .ll-post-arrow { background:#b8ff00;border-color:#b8ff00;color:#000; }

/* ---- BLOG GRID ---- */
.ll-filter-wrap { display:flex;gap:8px;flex-wrap:wrap;margin:36px 0 44px; }
.ll-filter-btn {
  background:transparent;border:1px solid #2a2a2a;color:#666;
  padding:8px 18px;border-radius:100px;font-size:.75rem;font-family:'Syne',sans-serif;
  font-weight:700;letter-spacing:.05em;cursor:pointer;transition:all .2s;
}
.ll-filter-btn:hover,.ll-filter-btn.active { background:#b8ff00;border-color:#b8ff00;color:#000; }

.ll-blog-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:18px; }
.ll-blog-card {
  background:#141414;border:1px solid #1e1e1e;border-radius:8px;overflow:hidden;
  text-decoration:none;color:#efefef;display:flex;flex-direction:column;
  transition:border-color .3s,transform .3s;
}
.ll-blog-card:hover { border-color:#b8ff00;transform:translateY(-4px); }
.ll-blog-card-img { height:196px;overflow:hidden;position:relative; }
.ll-blog-card-img img { width:100%;height:100%;object-fit:cover;transition:transform .5s; }
.ll-blog-card:hover .ll-blog-card-img img { transform:scale(1.05); }
.ll-blog-placeholder {
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:2.5rem;background:linear-gradient(135deg,#0d1f0d,#141414);
  transition:transform .5s;
}
.ll-blog-card:hover .ll-blog-placeholder { transform:scale(1.05); }
.ll-blog-card:nth-child(2) .ll-blog-placeholder { background:linear-gradient(135deg,#1a0e0a,#2d1810); }
.ll-blog-card:nth-child(3) .ll-blog-placeholder { background:linear-gradient(135deg,#0a0d1a,#12163a); }
.ll-blog-card:nth-child(4) .ll-blog-placeholder { background:linear-gradient(135deg,#1a0d1a,#2a0d2a); }
.ll-blog-card:nth-child(5) .ll-blog-placeholder { background:linear-gradient(135deg,#0d1a1a,#0d2a2a); }
.ll-blog-card:nth-child(6) .ll-blog-placeholder { background:linear-gradient(135deg,#1a1a0d,#2a2a0d); }

.ll-blog-card-body { padding:22px;flex:1;display:flex;flex-direction:column;gap:8px; }
.ll-blog-tag { font-size:.63rem;font-family:'Syne',sans-serif;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#b8ff00; }
.ll-blog-title { font-family:'Syne',sans-serif;font-weight:700;font-size:.98rem;line-height:1.3;color:#efefef;transition:color .2s;flex:1; }
.ll-blog-card:hover .ll-blog-title { color:#b8ff00; }
.ll-blog-meta { display:flex;align-items:center;gap:7px;font-size:.7rem;color:#555;margin-top:4px; }
.ll-read-more { display:inline-flex;align-items:center;gap:6px;font-size:.75rem;color:#b8ff00;font-family:'Syne',sans-serif;font-weight:700;margin-top:8px;transition:gap .2s; }
.ll-blog-card:hover .ll-read-more { gap:12px; }

/* ---- TOOLS ---- */
.ll-tools-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px; }
.ll-tool-card {
  border:1px solid #1e1e1e;border-radius:8px;padding:26px;
  transition:border-color .3s,transform .3s;cursor:pointer;position:relative;overflow:hidden;
}
.ll-tool-card::before {
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:#b8ff00;transform:scaleX(0);transform-origin:left;transition:transform .3s;
}
.ll-tool-card:hover { border-color:#2a2a2a;transform:translateY(-3px); }
.ll-tool-card:hover::before { transform:scaleX(1); }
.ll-tool-icon { font-size:1.8rem;margin-bottom:14px; }
.ll-tool-name { font-family:'Syne',sans-serif;font-weight:700;font-size:.93rem;color:#efefef;margin-bottom:7px; }
.ll-tool-desc { color:#666;font-size:.83rem;line-height:1.6; }
.ll-tool-earn { margin-top:14px;font-size:.68rem;font-family:'Syne',sans-serif;font-weight:700;color:#b8ff00;letter-spacing:.07em;text-transform:uppercase; }

/* ---- NEWSLETTER ---- */
.ll-newsletter-section {
  background:#b8ff00;padding:96px 48px;position:relative;overflow:hidden;
}
.ll-newsletter-section::before {
  content:'';position:absolute;width:600px;height:600px;
  background:rgba(0,0,0,.06);border-radius:50%;top:-300px;right:-200px;
}
.ll-nl-inner { max-width:540px;margin:0 auto;text-align:center;position:relative; }
.ll-nl-label { font-size:.67rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(0,0,0,.45);font-family:'Syne',sans-serif;font-weight:700;display:block;margin-bottom:14px; }
.ll-nl-title { font-size:clamp(1.8rem,3vw,2.6rem)!important;color:#000!important;margin-bottom:10px!important; }
.ll-nl-sub { color:rgba(0,0,0,.55)!important;margin-bottom:32px!important;font-size:.93rem!important; }
.ll-nl-form { display:flex;gap:0;border:2px solid rgba(0,0,0,.15);border-radius:100px;background:rgba(255,255,255,.28);overflow:hidden; }
.ll-nl-input { flex:1;background:transparent;border:none;outline:none;padding:14px 20px;font-family:'DM Sans',sans-serif;font-size:.9rem;color:#000; }
.ll-nl-input::placeholder { color:rgba(0,0,0,.38); }
.ll-nl-btn { background:#000;color:#b8ff00;border:none;padding:14px 26px;border-radius:0 100px 100px 0;font-family:'Syne',sans-serif;font-weight:700;font-size:.8rem;cursor:pointer;transition:background .2s;white-space:nowrap; }
.ll-nl-btn:hover { background:#111; }

/* ---- RESPONSIVE ---- */
@media (max-width:1024px) {
  .ll-hero-inner { grid-template-columns:1fr;gap:48px;text-align:center;padding:100px 24px 60px; }
  .ll-hero-sub { margin:0 auto 40px!important; }
  .ll-hero-actions { justify-content:center; }
  .ll-hero-stats { justify-content:center; }
  .ll-hero-right { max-width:480px;margin:0 auto; }
  .ll-featured-grid { grid-template-columns:1fr; }
  .ll-post-card.featured { grid-row:span 1; }
  .ll-blog-grid { grid-template-columns:repeat(2,1fr); }
  .ll-tools-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .ll-section-inner { padding:0 20px; }
  .ll-featured-section,.ll-blog-section,.ll-tools-section { padding:64px 0; }
  .ll-blog-grid { grid-template-columns:1fr; }
  .ll-tools-grid { grid-template-columns:1fr; }
  .ll-newsletter-section { padding:64px 24px; }
}