/* ══════════════════════════════════════════════════════
   DigiMartrix — Unlock Resource · styles.css
   Brand: slate-900 bg · #ea4532 red · #3895d2 blue
══════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────── */
:root{
  --bg:       #111827;
  --bg-card:  #1e293b;
  --bg-card2: #0f172a;
  --bg-sub:   rgba(255,255,255,0.03);
  --border:   #334155;
  --border2:  rgba(255,255,255,0.07);
  --red:      #ea4532;
  --red2:     #d63b2a;
  --blue:     #3895d2;
  --green:    #10b981;
  --text1:    #f8fafc;
  --text2:    #cbd5e1;
  --text3:    #94a3b8;
  --text4:    #64748b;
  --wa:       #25D366;
  --li:       #0A66C2;
  --gh:       #e2e8f0;
  --ig:       #E1306C;
  --yt:       #FF0000;
  --r4:       8px;
  --r8:       12px;
  --r12:      16px;
  --r16:      20px;
  --tr:       0.25s cubic-bezier(.4,0,.2,1);
  --shadow-card: 0 4px 24px rgba(0,0,0,.35);
}

/* ── RESET ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  background:var(--bg);
  color:var(--text1);
  font-family:'Inter',system-ui,sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* Rich mesh background: dot grid + deep radial atmosphere */
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(56,149,210,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 90%, rgba(234,69,50,0.08) 0%, transparent 55%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.035) 1px, transparent 0);
  background-size: auto, auto, 28px 28px;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}

/* ── GRADIENT TEXT ───────────────────────────────────── */
.brand-gradient{
  background:linear-gradient(135deg,var(--blue) 0%,var(--red) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ══════════════════════════════════════════════════════
   PROMO BANNER
══════════════════════════════════════════════════════ */
.promo-banner{
  position:sticky;top:0;z-index:70;
  background:linear-gradient(to right,var(--red),var(--red2));
  color:#fff;
  height:44px;
  display:flex;align-items:center;justify-content:center;
  font-size:.82rem;font-weight:500;
  gap:6px;padding:0 16px;text-align:center;
}
.promo-banner strong{font-weight:800}
.promo-banner a{
  color:#fff;font-weight:700;
  text-decoration:underline;
  white-space:nowrap;
  margin-left:4px;
}

/* ══════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════ */
.navbar{
  position:sticky;top:44px;z-index:60;
  background:rgba(17,24,39,.97);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:1280px;margin:0 auto;
  padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
}
.nav-brand{
  display:flex;align-items:center;gap:10px;
  font-size:1.4rem;font-weight:900;letter-spacing:-.01em;
  white-space:nowrap;
}
/* keep DIGIM and ARTRIX joined — no gap between them */
.nav-brand-text{line-height:1;letter-spacing:-.01em}
.nav-logo{
  width:44px;height:44px;
  object-fit:contain;border-radius:50%;flex-shrink:0;
}
.brand-digim{color:var(--blue)}
.brand-artrix{color:var(--red)}
.nav-tag{
  font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(234,69,50,.18);
  border:1px solid rgba(234,69,50,.35);
  padding:4px 12px;border-radius:99px;
  white-space:nowrap;
}

/* ══════════════════════════════════════════════════════
   HERO — 2-column layout
══════════════════════════════════════════════════════ */
.hero{
  position:relative;overflow:hidden;
  /* tight padding — no vertical centering so no gap above content */
  padding:56px 20px 64px;
  /* subtle tinted stripe only, body handles the mesh */
  background:linear-gradient(180deg,rgba(56,149,210,.06) 0%,transparent 55%);
}

/* floating orbs */
.orb{
  position:absolute;border-radius:50%;
  pointer-events:none;filter:blur(80px);
}
.orb-1{
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(56,149,210,.09) 0%,transparent 70%);
  top:-180px;right:-180px;
  animation:orbFloat 14s ease-in-out infinite;
}
.orb-2{
  width:500px;height:480px;
  background:radial-gradient(circle,rgba(234,69,50,.07) 0%,transparent 70%);
  bottom:-120px;left:-120px;
  animation:orbFloat 18s ease-in-out infinite reverse;
}

@keyframes orbFloat{
  0%,100%{transform:translate(0,0)}
  33%{transform:translate(-18px,12px)}
  66%{transform:translate(12px,-18px)}
}

/* ── hero inner (2 cols) ─────────────── */
.hero-inner{
  position:relative;z-index:1;
  max-width:1280px;margin:0 auto;width:100%;
  display:grid;
  grid-template-columns:1fr 420px;
  gap:56px;
  align-items:center;
}

/* ── hero text ───────────────────────── */
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text3);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  padding:5px 12px;border-radius:var(--r8);
  margin-bottom:20px;
}
.badge-pulse{
  width:7px;height:7px;border-radius:50%;
  background:var(--red);
  box-shadow:0 0 6px var(--red);
  animation:blink 2s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

.hero-title{
  font-size:clamp(2rem,4.5vw,3.6rem);
  font-weight:900;line-height:1.1;
  letter-spacing:-.03em;
  margin-bottom:18px;
  animation:fadeUp .7s ease both;
}
.hero-sub{
  font-size:clamp(.9rem,1.8vw,1.1rem);
  color:var(--text2);line-height:1.75;
  margin-bottom:32px;
  max-width:500px;
  animation:fadeUp .8s ease both .1s;
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

/* stats-row removed from hero — keeping selector for backward compat */
.stats-row{display:none}

/* CTA button */
.btn-hero{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(to right,var(--red),var(--red2));
  color:#fff;font-size:1rem;font-weight:700;
  padding:14px 32px;border-radius:99px;
  box-shadow:0 4px 20px rgba(234,69,50,.35);
  transition:var(--tr);position:relative;overflow:hidden;
  animation:fadeUp 1s ease both .3s;
}
.btn-hero:hover{transform:translateY(-2px);box-shadow:0 6px 28px rgba(234,69,50,.5)}
.btn-hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);
  opacity:0;transition:var(--tr);
}
.btn-hero:hover::after{opacity:1}

/* scroll hint */
.scroll-hint{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  margin-top:48px;color:var(--text4);font-size:.72rem;
  letter-spacing:.1em;text-transform:lowercase;
  animation:fadeUp 1.2s ease both .5s;
}
.scroll-dot{
  width:6px;height:32px;border-radius:99px;
  background:linear-gradient(to bottom,var(--red),transparent);
  animation:scrollAnim 2s ease-in-out infinite;
}
@keyframes scrollAnim{0%,100%{opacity:1}50%{opacity:.2}}

/* ── hero card (right column) ────────── */
.hero-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r16);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  animation:fadeUp .9s ease both .15s;
  flex-shrink:0;
}
/* eyebrow label replacing the fake macOS dot header */
.hcard-eyebrow{
  font-size:.7rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text4);
  padding:16px 18px 0;
  margin-bottom:2px;
}

.hcard-steps{
  list-style:none;
  padding:12px 18px 18px;display:flex;flex-direction:column;gap:14px;
}
.hcard-step{
  display:flex;align-items:flex-start;gap:12px;
}

.step-num{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  background:rgba(234,69,50,.12);
  border:1px solid rgba(234,69,50,.25);
  color:var(--red);
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:800;
}
.step-body strong{display:block;font-size:.88rem;font-weight:700;color:var(--text1)}
.step-body span{font-size:.76rem;color:var(--text3);line-height:1.4}

.hcard-footer{
  padding:12px 18px 16px;
  border-top:1px solid var(--border);
  background:rgba(0,0,0,.1);
}
.mini-bar{
  height:5px;background:rgba(255,255,255,.06);
  border-radius:99px;overflow:hidden;margin-bottom:7px;
}
.mini-fill{
  height:100%;
  background:linear-gradient(to right,var(--blue),var(--red));
  border-radius:99px;
  transition:width .6s cubic-bezier(.4,0,.2,1);
}
.mini-label{
  font-size:.72rem;color:var(--text3);font-weight:600;
}

/* ══════════════════════════════════════════════════════
   PROGRESS BAR (sticky)
══════════════════════════════════════════════════════ */
.progress-bar-wrap{
  position:sticky;top:88px;z-index:50;
  background:rgba(17,24,39,.97);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:10px 20px;
}
.progress-bar-inner{
  max-width:1280px;margin:0 auto;
  display:flex;align-items:center;gap:14px;
}
.pb-label{
  display:flex;align-items:center;gap:5px;
  font-size:.75rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text3);
  white-space:nowrap;flex-shrink:0;
}
.pb-track{
  flex:1;height:6px;
  background:rgba(255,255,255,.06);
  border-radius:99px;overflow:hidden;
  position:relative;
}
.pb-fill{
  position:absolute;inset-block:0;left:0;
  background:linear-gradient(to right,var(--blue),var(--red));
  border-radius:99px;
  transition:width .5s cubic-bezier(.4,0,.2,1);
}
.pb-count{
  font-size:.82rem;font-weight:800;color:var(--red);
  white-space:nowrap;flex-shrink:0;
  font-variant-numeric:tabular-nums;
}

/* ══════════════════════════════════════════════════════
   TASKS SECTION
══════════════════════════════════════════════════════ */
.tasks-sec{
  max-width:1280px;margin:0 auto;
  padding:72px 20px 100px;
}
.sec-header{margin-bottom:40px;text-align:center}
.sec-title{
  font-size:clamp(1.6rem,3.5vw,2.4rem);
  font-weight:900;letter-spacing:-.02em;
  margin-bottom:10px;
}
.sec-sub{font-size:.9rem;color:var(--text3)}

/* ── task list ───────────────────────────────────────── */
.tasks-list{
  display:flex;flex-direction:column;gap:16px;
  margin-bottom:36px;
}

/* ── task card ───────────────────────────────────────── */
.task-card{
  position:relative;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r16);
  padding:22px 24px;
  display:flex;
  align-items:flex-start;
  gap:20px;
  transition:border-color var(--tr),box-shadow var(--tr),transform var(--tr);
  overflow:hidden;
}
.task-card::before{
  content:'';position:absolute;
  top:0;left:0;right:0;height:2px;
  background:linear-gradient(to right,var(--blue),var(--red));
  opacity:0;transition:opacity var(--tr);
}
.task-card:hover{
  border-color:rgba(234,69,50,.35);
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(234,69,50,.1);
}
.task-card:hover::before{opacity:1}
.task-card.done{
  border-color:rgba(16,185,129,.4);
  background:linear-gradient(135deg,rgba(16,185,129,.04),var(--bg-card));
}
.task-card.done::before{
  background:linear-gradient(to right,var(--green),#059669);
  opacity:1;
}

/* left */
.tc-left{display:flex;align-items:flex-start;gap:14px;flex-shrink:0}
.tc-icon{
  width:48px;height:48px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.tc-icon svg{width:24px;height:24px}
.ic-wa{background:rgba(37,211,102,.12);color:var(--wa);border:1px solid rgba(37,211,102,.2)}
.ic-li{background:rgba(10,102,194,.12);color:var(--li);border:1px solid rgba(10,102,194,.2)}
.ic-gh{background:rgba(226,232,240,.06);color:var(--gh);border:1px solid rgba(226,232,240,.1)}
.ic-ig{background:rgba(225,48,108,.1);color:var(--ig);border:1px solid rgba(225,48,108,.18)}
.ic-yt{background:rgba(255,0,0,.1);color:var(--yt);border:1px solid rgba(255,0,0,.15)}
.task-card.done .tc-icon{background:rgba(16,185,129,.12);color:var(--green);border-color:rgba(16,185,129,.25)}

.tc-info{min-width:140px}
.tc-info h3{font-size:1rem;font-weight:700;color:var(--text1);line-height:1.3;margin-bottom:4px}
.tc-info p{font-size:.8rem;color:var(--text3);line-height:1.45}
.multi-tag{
  background:rgba(234,69,50,.15);color:var(--red);
  font-size:.65rem;font-weight:800;letter-spacing:.06em;
  padding:2px 7px;border-radius:99px;
  vertical-align:middle;margin-left:4px;
}

/* right */
.tc-right{flex:1;display:flex;flex-direction:column;gap:10px}
.tc-status{
  align-self:flex-start;
  font-size:.68rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;
  padding:3px 10px;border-radius:99px;
  background:rgba(255,255,255,.05);
  color:var(--text4);
  border:1px solid rgba(255,255,255,.07);
  transition:all var(--tr);
}
.tc-status.done-st{
  background:rgba(16,185,129,.12);
  color:var(--green);
  border-color:rgba(16,185,129,.3);
}

/* sub-links */
.sub-links{display:flex;flex-direction:column;gap:7px}
.sub-row{
  display:flex;align-items:center;gap:10px;
  background:var(--bg-sub);
  border:1px solid var(--border2);
  border-radius:var(--r8);padding:8px 12px;
  transition:border-color var(--tr);
}
.sub-row:hover{border-color:rgba(234,69,50,.25)}
.sub-lbl{flex:1;font-size:.8rem;color:var(--text3);font-weight:500}
.btn-sub{
  font-size:.75rem;font-weight:700;
  padding:5px 12px;border-radius:6px;
  border:1px solid;
  transition:all var(--tr);
  white-space:nowrap;cursor:pointer;
}
.btn-sub.li{color:var(--li);background:rgba(10,102,194,.1);border-color:rgba(10,102,194,.25)}
.btn-sub.li:hover{background:rgba(10,102,194,.2)}
.btn-sub.gh{color:var(--gh);background:rgba(226,232,240,.06);border-color:rgba(226,232,240,.15)}
.btn-sub.gh:hover{background:rgba(226,232,240,.12)}
.btn-sub.clicked{color:var(--green)!important;background:rgba(16,185,129,.1)!important;border-color:rgba(16,185,129,.3)!important}
.sub-chk{font-size:.85rem;flex-shrink:0;transition:var(--tr)}

/* action buttons */
.tc-actions{display:flex;gap:8px;flex-wrap:wrap}

.btn-link{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.85rem;font-weight:700;
  padding:10px 18px;border-radius:var(--r8);
  color:#fff;border:none;
  box-shadow:0 2px 10px rgba(0,0,0,.2);
  transition:all var(--tr);cursor:pointer;
  position:relative;overflow:hidden;
}
.btn-link::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);opacity:0;transition:var(--tr)}
.btn-link:hover{transform:translateY(-1px);opacity:.93}
.btn-link:hover::after{opacity:1}

.btn-link.wa{background:linear-gradient(135deg,#25D366,#1ebe57)}
.btn-link.ig{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.btn-link.yt{background:linear-gradient(135deg,#FF0000,#cc0000)}
.btn-link.clicked{background:linear-gradient(135deg,#1d9b6c,#158a5c)!important}

.btn-done{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.85rem;font-weight:700;
  padding:10px 18px;border-radius:var(--r8);
  background:rgba(255,255,255,.04);
  color:var(--text4);
  border:1px solid rgba(255,255,255,.09);
  cursor:not-allowed;
  transition:all var(--tr);
}
.btn-done:not(:disabled){
  cursor:pointer;color:var(--green);
  background:rgba(16,185,129,.1);
  border-color:rgba(16,185,129,.35);
  animation:popIn .4s ease;
}
.btn-done:not(:disabled):hover{background:rgba(16,185,129,.18);transform:translateY(-1px);box-shadow:0 4px 16px rgba(16,185,129,.2)}
@keyframes popIn{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}

/* hint text */
.tc-hint{font-size:.75rem;color:var(--text4);transition:opacity var(--tr)}
.tc-hint.hidden{opacity:0;pointer-events:none}

/* done badge (top-right corner ribbon) */
.tc-done-badge{
  position:absolute;top:14px;right:14px;
  font-size:.68rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--green);
  background:rgba(16,185,129,.12);
  border:1px solid rgba(16,185,129,.3);
  padding:4px 10px;border-radius:99px;
  opacity:0;transform:scale(.8);
  transition:all .35s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
.tc-done-badge.show{opacity:1;transform:scale(1)}

/* ══════════════════════════════════════════════════════
   VERIFICATION NOTE
══════════════════════════════════════════════════════ */
.verify-note{
  display:flex;align-items:flex-start;gap:14px;
  background:rgba(56,149,210,.07);
  border:1px solid rgba(56,149,210,.2);
  border-left:3px solid var(--blue);
  border-radius:var(--r12);
  padding:16px 20px;
  margin-bottom:48px;
  color:var(--text2);
}
.verify-note svg{flex-shrink:0;color:var(--blue);margin-top:2px}
.verify-note strong{display:block;font-size:.9rem;font-weight:700;color:var(--text1);margin-bottom:4px}
.verify-note p{font-size:.8rem;color:var(--text3);line-height:1.55}
.verify-note em{color:var(--blue);font-style:normal;font-weight:600}

/* ══════════════════════════════════════════════════════
   UNLOCK ZONE
══════════════════════════════════════════════════════ */
.unlock-zone{display:flex;justify-content:center;padding-bottom:20px}
.unlock-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r16);
  padding:44px 40px;
  text-align:center;max-width:520px;width:100%;
  position:relative;overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:border-color var(--tr),box-shadow var(--tr);
}
.unlock-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(234,69,50,.07),transparent 60%);
  pointer-events:none;
}
.unlock-card.ready{
  border-color:rgba(16,185,129,.45);
  box-shadow:0 0 50px rgba(16,185,129,.12);
}
.unlock-icon{color:var(--text4);margin-bottom:18px;transition:color .5s ease}
.unlock-icon.open{color:var(--green)}
.unlock-title{
  font-size:1.35rem;font-weight:800;
  letter-spacing:-.01em;margin-bottom:8px;
}
.unlock-sub{font-size:.88rem;color:var(--text3);margin-bottom:24px}

/* mini checklist */
.mini-checklist{
  text-align:left;
  display:flex;flex-direction:column;gap:8px;
  margin-bottom:28px;
}
.mc-item{
  display:flex;align-items:center;gap:10px;
  font-size:.82rem;color:var(--text3);font-weight:500;
  padding:6px 10px;border-radius:var(--r4);
  background:var(--bg-sub);
  border:1px solid var(--border2);
  transition:all .35s ease;
}
.mc-item.done-mc{
  color:var(--green);
  background:rgba(16,185,129,.08);
  border-color:rgba(16,185,129,.25);
}
.mc-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--border);flex-shrink:0;
  transition:background .35s ease,box-shadow .35s ease;
}
.mc-item.done-mc .mc-dot{
  background:var(--green);
  box-shadow:0 0 6px var(--green);
}

/* unlock button */
.btn-unlock{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:10px;
  font-size:.95rem;font-weight:800;
  padding:15px 36px;border-radius:99px;
  background:rgba(255,255,255,.05);
  color:var(--text4);
  border:1px solid rgba(255,255,255,.09);
  cursor:not-allowed;
  transition:all .4s ease;
  width:100%;justify-content:center;
}
.btn-unlock:not(:disabled){
  cursor:pointer;
  background:linear-gradient(to right,var(--red),var(--red2));
  color:#fff;border:none;
  box-shadow:0 4px 24px rgba(234,69,50,.35);
  animation:unlockPulse 2s ease-in-out infinite;
}
@keyframes unlockPulse{
  0%,100%{box-shadow:0 4px 24px rgba(234,69,50,.35)}
  50%{box-shadow:0 4px 44px rgba(234,69,50,.6)}
}
.btn-unlock:not(:disabled):hover{transform:scale(1.03)}
.unlock-icon-emoji{font-size:1.1rem}
.btn-shimmer{
  position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.25) 50%,transparent 60%);
  transform:translateX(-100%);
}
.btn-unlock:not(:disabled) .btn-shimmer{
  animation:shimmer 2.5s ease-in-out infinite 1.5s;
}
@keyframes shimmer{
  0%{transform:translateX(-100%)}
  50%{transform:translateX(100%)}
  100%{transform:translateX(100%)}
}

/* ══════════════════════════════════════════════════════
   RESOURCE OVERLAY
══════════════════════════════════════════════════════ */
.resource-overlay{
  position:fixed;inset:0;z-index:500;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  animation:revealPage .5s ease both;
}
@keyframes revealPage{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}

.resource-card{
  background:var(--bg-card);
  border:1px solid rgba(16,185,129,.35);
  border-radius:var(--r16);
  padding:52px 44px;text-align:center;
  max-width:580px;width:100%;
  position:relative;overflow:hidden;
  animation:fadeUp .6s ease both;
  box-shadow:0 0 60px rgba(16,185,129,.1);
}
.resource-card::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 30% 20%,rgba(16,185,129,.07) 0%,transparent 50%),
    radial-gradient(ellipse at 70% 80%,rgba(56,149,210,.07) 0%,transparent 50%);
  pointer-events:none;
}
.res-emoji{font-size:4rem;display:block;margin-bottom:20px;animation:bounce .8s ease .3s both}
@keyframes bounce{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.res-title{
  font-size:clamp(1.6rem,4vw,2.2rem);font-weight:900;
  letter-spacing:-.02em;margin-bottom:12px;
}
.res-sub{font-size:.92rem;color:var(--text2);line-height:1.7;margin-bottom:32px}

.res-download-box{
  background:var(--bg-sub);border:1px solid var(--border);
  border-radius:var(--r12);padding:20px;margin-bottom:20px;
}
.res-file-row{display:flex;align-items:center;gap:14px;margin-bottom:16px;text-align:left}
.res-file-ico{
  width:46px;height:46px;border-radius:10px;
  background:rgba(56,149,210,.1);border:1px solid rgba(56,149,210,.2);
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;
}
.res-file-name{font-size:.9rem;font-weight:700;color:var(--text1)}
.res-file-desc{font-size:.75rem;color:var(--text3)}
.btn-download{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;font-size:.95rem;font-weight:700;
  padding:14px;border-radius:var(--r8);
  background:linear-gradient(to right,var(--red),var(--red2));
  color:#fff;border:none;cursor:pointer;
  font-family:inherit;text-decoration:none;
  box-shadow:0 4px 18px rgba(234,69,50,.3);
  transition:var(--tr);
}
.btn-download:hover{transform:scale(1.02);box-shadow:0 6px 28px rgba(234,69,50,.45)}
.res-back{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.8rem;color:var(--text4);cursor:pointer;
  background:none;border:none;font-family:inherit;margin-top:8px;
  transition:color var(--tr);
}
.res-back:hover{color:var(--text2)}

/* ══════════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════════ */
.toast{
  position:fixed;bottom:24px;right:20px;
  display:flex;align-items:center;gap:10px;
  background:rgba(30,41,59,.97);
  border:1px solid rgba(255,255,255,.08);
  border-left:3px solid var(--green);
  backdrop-filter:blur(16px);
  color:var(--text1);font-size:.85rem;font-weight:600;
  padding:13px 18px;border-radius:var(--r12);
  z-index:300;pointer-events:none;
  min-width:240px;max-width:90vw;
  opacity:0;transform:translateX(110%);
  transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s ease;
  box-shadow:0 8px 28px rgba(0,0,0,.4);
}
.toast.show{transform:translateX(0);opacity:1}
.toast-ico{font-size:1rem}

/* ══════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════ */
.site-footer{
  background:var(--bg-card2);
  border-top:1px solid var(--border);
  padding:24px 20px;
}
.footer-inner{
  max-width:1280px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;
}
.footer-brand{font-size:1.1rem;font-weight:900;letter-spacing:-.01em}
.site-footer p{font-size:.78rem;color:var(--text4)}
.site-footer a{font-size:.78rem;font-weight:700;color:var(--blue);transition:color var(--tr)}
.site-footer a:hover{color:var(--red)}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */

/* Tablet ≤ 1024px */
@media(max-width:1024px){
  .hero-inner{
    grid-template-columns:1fr;
    gap:40px;
  }
  .hero-card{max-width:520px}
  .hero-text{text-align:center}
  .hero-sub{max-width:100%;margin-inline:auto}
  .stats-row{justify-content:center}
  .scroll-hint{display:none}

  .tc-left{flex-direction:column;align-items:flex-start}
  .tc-info{min-width:unset}
}

/* Mobile ≤ 768px */
@media(max-width:768px){
  .promo-banner{font-size:.72rem;height:40px;padding:0 12px}
  .navbar{top:40px}
  .progress-bar-wrap{top:84px}

  .nav-brand{font-size:1.15rem}
  .nav-logo{width:36px;height:36px}
  .nav-tag{font-size:.6rem;padding:3px 10px}

  .hero{padding:52px 16px 48px;min-height:auto}
  .hero-inner{gap:28px}

  .hero-card{display:none} /* hide card on small screens to save space */

  .task-card{
    flex-direction:column;
    gap:14px;
  }
  .tc-left{flex-direction:row;align-items:flex-start;gap:12px;width:100%}
  .tc-right{width:100%}
  .tc-actions{flex-direction:column}
  .btn-link,.btn-done{width:100%;justify-content:center}

  .unlock-card{padding:32px 20px}
  .resource-card{padding:36px 20px}
  .res-file-row{flex-direction:column;align-items:flex-start}

  .footer-inner{flex-direction:column;text-align:center}

  .toast{left:12px;right:12px;bottom:16px;min-width:unset;transform:translateY(80px)}
  .toast.show{transform:translateY(0)}
}

/* Small mobile ≤ 480px */
@media(max-width:480px){
  html{font-size:14px}
  .hero-title{font-size:1.9rem;letter-spacing:-.02em}
  .stats-row{flex-direction:column;gap:12px;align-items:stretch}
  .stat{display:flex;align-items:center;justify-content:space-between}
  .stat-sep{width:100%;height:1px}
  .stat-num{font-size:1.5rem}
  .stat-lbl{margin-top:0}
  .btn-hero{width:100%;justify-content:center}

  .sec-title{font-size:1.5rem}
  .tasks-sec{padding:48px 14px 80px}

  .tc-icon{width:40px;height:40px}
  .tc-icon svg{width:20px;height:20px}
  .tc-info h3{font-size:.9rem}
}