/* The home page (pages/home.html.twig). */

.t-hero { font: 800 56px/58px var(--font-display); letter-spacing: -0.02em; }
.panel-glass { background: rgba(15,18,22,.72); border: 1px solid var(--ld-line-strong); border-radius: var(--ld-radius-lg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--ld-shadow-pop); }

/* The glass sheen runs from the first paint until the full picture is in (or failed: the medium stays). */
.g1 { background: linear-gradient(135deg, #1f2a33, #0f1418); } .g2 { background: linear-gradient(135deg, #2a2236, #121018); }
.g5 { background: linear-gradient(135deg, #1e2638, #0d1018); }

/* Hero art layers */
.hero-art { position: absolute; inset: 0; pointer-events: none; }
.hero-art img, .hero-art svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.hero-art.layer, .hero-art .layer { transition: transform .4s ease-out; }
.hero-fade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--ld-surface-0) 0%, rgba(5,6,8,.85) 38%, rgba(5,6,8,0) 62%), linear-gradient(0deg, var(--ld-surface-1) 0%, transparent 22%); }
.hero-media { position: absolute; inset: 0; }
.hero-body { position: relative; z-index: 1; width: 100%; }
/* Two columns on computers so the second row's points sit under the first row's; one column on phones. */
.hero-ticks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, max-content); gap: 14px 28px; }

/* The hero's product card: three files upload, then a check; loops every 8 s */
.upcard { position: absolute; z-index: 2; width: 280px; padding: 16px; }
.upcard .thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.upcard .thumbs span { aspect-ratio: 1; border-radius: var(--ld-radius-sm); animation: ld-thumb-in 8s ease-out infinite; }
.upcard .thumbs span:nth-child(2) { animation-delay: .15s; } .upcard .thumbs span:nth-child(3) { animation-delay: .3s; }
.upcard .track { height: 6px; border-radius: 3px; background: var(--ld-surface-4); overflow: hidden; margin-top: 14px; }
.upcard .track span { display: block; height: 100%; background: var(--ld-green); border-radius: 3px; animation: ld-upbar 8s ease-in-out infinite; }
.upcard .state { position: relative; height: 20px; margin-top: 10px; }
.upcard .state > span { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; font: 600 12px/16px var(--font-sans); }
.upcard .state .b { animation: ld-up-b 8s linear infinite; color: var(--ld-green); }
@keyframes ld-thumb-in { 0% { opacity: 0; transform: translateY(6px); } 6%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ld-upbar { 0%, 8% { width: 0; } 45% { width: 100%; } 100% { width: 100%; } }
@keyframes ld-up-b { 0%, 47% { opacity: 0; transform: translateY(4px); } 50%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.upcard-lg { position: relative; width: 100%; padding: 24px; border-radius: var(--ld-radius-xl); }
.upcard-lg .thumbs { gap: 12px; }
.upcard-lg .thumbs span { border-radius: var(--ld-radius-md); }
.upcard-lg .track { height: 8px; margin-top: 20px; }
.upcard-lg .state { margin-top: 14px; }
.opt .oi { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ld-radius-md); background: var(--ld-surface-4); color: var(--ld-text-muted); transition: color var(--ld-ease-enter), background-color var(--ld-ease-enter); }
.opt.is-on .oi { color: var(--ld-green); background: var(--ld-green-soft); }

/* Phone */
@media (max-width: 760px) {
  .t-hero { font-size: 36px; line-height: 40px; }
  .stack-phone { flex-direction: column !important; align-items: stretch !important; }
  .hero-media { position: relative; inset: auto; height: 300px; }
  .hero-fade { background: linear-gradient(0deg, var(--ld-surface-0) 0%, transparent 40%); }
  .hero-body { padding: 8px 0 8px; }
  .hero-ticks { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* How it works: a full-width band with three steps and dividers */
.how-band { margin-top: 0; padding: 64px 0 72px; background: linear-gradient(180deg, var(--ld-surface-2), var(--ld-surface-1)); border-top: 1px solid var(--ld-line); border-bottom: 1px solid var(--ld-line); }
.how-band h2 { margin-bottom: 36px; }
.how-ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.how-ol li { display: flex; flex-direction: column; gap: 24px; padding: 0 40px; border-left: 1px solid var(--ld-line); }
.how-ol li:first-child { padding-left: 0; border-left: 0; }
.how-ol li:last-child { padding-right: 0; }
.how-step { position: relative; z-index: 1; align-self: flex-start; height: 30px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: var(--ld-radius-full); background: var(--ld-surface-2); border: 1px solid var(--ld-green-line); color: var(--ld-green); font: 700 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; transition: background-color var(--ld-ease), color var(--ld-ease); }
.how-ol li:hover .how-step { background: var(--ld-green); color: var(--ld-on-green); }
.how-body { display: flex; gap: 16px; align-items: flex-start; }
.how-ico { width: 48px; height: 48px; flex: none; border-radius: var(--ld-radius-lg); background: var(--ld-surface-3); box-shadow: inset 0 0 0 1px var(--ld-line-strong); display: inline-flex; align-items: center; justify-content: center; color: var(--ld-green); transition: transform var(--ld-ease-enter), box-shadow var(--ld-ease-enter); }
.how-ol li:hover .how-ico { transform: translateY(-3px) rotate(-4deg); box-shadow: inset 0 0 0 1px var(--ld-green-line), 0 10px 24px rgba(14,229,155,.12); }
@media (max-width: 760px) {
  .how-band { margin-top: 0; padding: 40px 0 44px; }
  .how-band h2 { margin-bottom: 24px; }
  .how-ol { grid-template-columns: minmax(0, 1fr); }
  .how-ol li, .how-ol li:first-child, .how-ol li:last-child { padding: 24px 0; border-left: 0; gap: 16px; }
  .how-ol li + li { border-top: 1px solid var(--ld-line); }
  .how-ol li:first-child { padding-top: 0; }
  .how-ol li:last-child { padding-bottom: 0; }
  }
@media (max-width: 760px) {
  /* Feature sections read text first, then the demo */
  .feat-demo { order: 2 !important; }
  .hero-acts { width: 100%; align-self: stretch; flex-wrap: wrap; }
}
@media (min-width: 761px) {
  .how-band { padding: 32px 0 36px; }
}

/* Home */
.home-feature { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; }
.home-feature-text { display: flex; flex-direction: column; gap: 14px; }
.tick-ico { color: var(--ld-green); }
.home-plans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.plans-title { white-space: nowrap; }
.plans-title-short { display: none; }
.plan-card { position: relative; overflow: hidden; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 22px 20px 20px; border-radius: var(--ld-radius-lg); color: inherit; text-decoration: none; }
.plan-card-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--tier); }
.plan-card-em { display: flex; }
.plan-card-name { color: var(--ld-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-card-meta { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.plan-card-price { margin-top: auto; padding-top: 4px; color: var(--ld-text-strong); white-space: nowrap; }
.plan-card-price .big { font: 800 24px/28px var(--font-display); }
.plan-card-per { margin-top: -10px; }
.promo-bar { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 8px 16px; background: color-mix(in srgb, var(--ld-green) 14%, var(--ld-surface-2)); border-bottom: 1px solid var(--ld-green-line); color: var(--ld-text-strong); text-decoration: none; font: 500 14px/20px var(--font-sans); flex-wrap: wrap; }
.promo-bar strong { color: var(--ld-green); }
.promo-bar-time { color: var(--ld-text-secondary); }
.promo-count { display: flex; gap: 8px; }
.promo-count > span { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 8px 10px; border-radius: var(--ld-radius-md); border: 1px solid var(--ld-line); background: var(--ld-surface-2); font: 500 11px/14px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ld-text-muted); }
.promo-count b { font: 800 24px/30px var(--font-display); letter-spacing: 0; color: var(--ld-text-strong); }
.promo-sticky b { color: var(--ld-text-strong); }
@media (max-width: 1100px) { .home-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } .plans-title { white-space: normal; } }
@media (max-width: 760px) {
  .home-feature { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .page-home:has(.promo-sticky) .foot { padding-bottom: 72px; }
  /* Each plan a compact row: emblem, name and price on the first line, what it holds under both. */
  .home-plans { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* Out of sight but still read: the short line is aria-hidden, so screen readers and crawlers get the heading once. */
  .plans-title-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .plans-title-short { display: inline; }
  .plan-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; row-gap: 2px; align-items: center; padding: 14px 16px 14px 18px; border-radius: var(--ld-radius-md); }
  .plan-card-bar { top: 0; bottom: 0; left: 0; right: auto; width: 3px; height: auto; }
  .plan-card-em { grid-column: 1; grid-row: 1 / 3; }
  .plan-card-name { grid-column: 2; grid-row: 1; align-self: baseline; }
  .plan-card-price { grid-column: 3; grid-row: 1; margin: 0; padding: 0; text-align: right; align-self: baseline; }
  .plan-card-price .big { font-size: 18px; line-height: 24px; }
  .plan-card-meta { grid-column: 2 / 4; grid-row: 2; flex-direction: row; flex-wrap: wrap; gap: 0; white-space: normal; }
  .plan-card-meta span { white-space: nowrap; }
  .plan-card-meta span + span::before { content: " · "; white-space: pre; }
  .plan-card-per { grid-column: 2 / 4; grid-row: 3; margin: 0; }
}

/* Community: a post as it shows in a follower's feed, and a repost's note popping in beside it */
.soc-points { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.soc-points li { display: flex; align-items: flex-start; gap: 10px; }
.soc-points li > svg { flex: none; color: var(--ld-green); margin-top: 2px; }
.soc-points b { display: block; font: 600 14px/20px var(--font-sans); color: var(--ld-text-strong); }
.soc-points span { font: 400 13px/18px var(--font-sans); color: var(--ld-text-secondary); }
.soc-demo { position: relative; justify-self: center; width: 100%; max-width: 440px; }
.soc-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.soc-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.soc-head .btn { min-height: 36px; }
.soc-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.soc-who b { font: 600 14px/18px var(--font-sans); color: var(--ld-text-strong); }
.soc-who small { font: 400 12px/16px var(--font-sans); color: var(--ld-text-dim); }
.soc-media { position: relative; aspect-ratio: 4 / 3; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; }
.soc-media span:first-child { grid-row: 1 / 3; }
.soc-count { position: absolute; right: 10px; top: 10px; padding: 2px 8px; border-radius: 999px; background: rgba(5,6,8,.72); color: #fff; font: 600 12px/18px var(--font-sans); }
.soc-acts { display: flex; align-items: center; gap: 4px; padding: 4px 8px 0; }
.soc-act { display: inline-flex; align-items: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 10px; color: var(--ld-text); font: 600 14px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.soc-act > svg { width: 22px; height: 22px; stroke-width: 2; }
/* Room under the text for the note hanging over the card's bottom edge */
.soc-text { padding: 2px 16px 34px; display: flex; flex-direction: column; gap: 4px; font: 400 14px/20px var(--font-sans); }
.soc-text p { margin: 0; }
.soc-text b { color: var(--ld-text-strong); font-weight: 600; margin-right: 6px; }
.soc-note { position: absolute; left: -24px; bottom: -22px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--ld-line-strong); border-radius: var(--ld-radius-md); background: var(--ld-surface-4); box-shadow: var(--ld-shadow-pop); font: 400 13px/18px var(--font-sans); color: var(--ld-text); animation: ld-pop-in 300ms 600ms ease-out both; }
.soc-note b { color: var(--ld-text-strong); }
.soc-note .ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ld-green-surface); color: var(--ld-green); flex: none; }
@media (max-width: 760px) {
  .soc-points { grid-template-columns: minmax(0, 1fr); }
  .soc-text { padding-bottom: 16px; }
  .soc-note { position: static; margin: 10px 12px 0; }
}
@media (prefers-reduced-motion: reduce) { .soc-note { animation: none; } }
@media (prefers-reduced-motion: reduce) { .upcard .state .a { display: none; } .upcard .thumbs span, .upcard .state .b { opacity: 1; } }