/* DesignMyCV home page. Professional and calm: deep indigo, white, one violet accent.
   Attraction comes from motion and graphics: the live score demo, a scan beam, card tilt,
   a scrolling roles strip, scroll reveals, a fan-out of templates and an animated converter. */
.lp { background: var(--paper); overflow-x: hidden; font-size: 16px; }
.lp-wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }
.when-in, .lp-cta .mob { display: none; }
.signed-in .when-in { display: inline; }
.signed-in .when-out, .signed-in .lp-login { display: none; }
.lp h1, .lp h2, .lp h3, .lp h4 { font-family: var(--display); }
.lp .btn { border-radius: 999px; font-weight: 700; }

/* ---------- nav ---------- */
.lp-nav { position: sticky; top: 0; z-index: 30; background: rgba(250, 250, 253, .82); backdrop-filter: saturate(1.5) blur(14px); -webkit-backdrop-filter: saturate(1.5) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.lp-nav.scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px -12px rgba(38, 36, 59, .12); }
.lp-nav-in { display: flex; align-items: center; gap: 14px; height: 70px; }
.lp-nav .logo { margin-right: auto; color: var(--ink); font-weight: 800; font-size: 19px; letter-spacing: -0.03em; }
.lp-nav .logo-mark .pg, .lp-foot .logo-mark .pg { fill: var(--brand); }
.lp-nav .logo-mark .ln, .lp-foot .logo-mark .ln { fill: #fff; opacity: .7; }
.lp-links { display: flex; gap: 2px; margin-right: 6px; }
.lp-links a { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 12px; border-radius: 999px; transition: color .15s, background .15s; }
.lp-links a:hover { color: var(--ink); background: var(--brand-tint); }
.lp-login, .lp-cta { padding-inline: 18px; }

/* ---------- hero (light) ---------- */
.lp-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #F3F1FF 0%, #F7F6FF 45%, var(--paper) 100%); color: var(--ink-2); padding: 80px 0 104px; isolation: isolate; border-bottom: 1px solid var(--line); }
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-bg i { position: absolute; border-radius: 50%; filter: blur(80px); }
.hero-bg .b1 { width: 620px; height: 620px; right: -160px; top: -220px; background: rgba(140, 120, 255, .28); animation: drift 18s ease-in-out infinite alternate; }
.hero-bg .b2 { width: 480px; height: 480px; left: -200px; bottom: -280px; background: rgba(110, 190, 255, .22); animation: drift 22s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(-60px, 50px) scale(1.08); } }
.hero-bg .grid { position: absolute; inset: 0;
  background-image: linear-gradient(rgba(91, 61, 245, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 61, 245, .06) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 60% at 60% 30%, #000, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 30%, #000, transparent 75%); }
.lp-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 72px; align-items: center; }
.lp-hero h1 { text-wrap: balance; font-size: clamp(44px, 6vw, 80px); line-height: .98; letter-spacing: -0.05em; font-weight: 800; color: var(--ink); margin: 0 0 26px; }
.lp-hero h1 span { display: block; text-wrap: balance; }
.lp-hero h1 span + span { background: linear-gradient(95deg, #5B3DF5 0%, #7A5CFA 50%, #3D8BFD 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.lp-lead { font-size: clamp(17px, 1.45vw, 19.5px); color: var(--ink-2); max-width: 31em; margin: 0 0 34px; line-height: 1.65; }
.lp-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.lp-big { min-height: 56px; padding: 14px 28px; font-size: 16.5px; gap: 10px; }
.lp-big svg { width: 19px; height: 19px; transition: transform .2s; }
.lp-big:hover svg { transform: translateX(4px); }
.lp .btn.lp-big:not(.ghost) { box-shadow: 0 12px 28px -10px rgba(91, 61, 245, .55); }
.lp .btn.ghost { background: #fff; }
.lp-proof { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--ink-2); font-size: 14.5px; font-weight: 500; }
.lp-proof > span { display: inline-flex; align-items: center; gap: 6px; }
.lp-proof svg { width: 16px; height: 16px; color: var(--good); }
.lp-proof-rating { font-weight: 700; color: var(--ink) !important; }
.lp-proof-rating .mini svg { width: 15px; height: 15px; fill: #FFB020; }

/* page-load entrance: one orchestrated sequence */
.motion .lp-hero h1 span, .motion .lp-lead, .motion .lp-ctas, .motion .lp-proof, .motion .demo-wrap { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.motion .lp-hero h1 span + span { animation-delay: .08s; } .motion .lp-lead { animation-delay: .16s; } .motion .lp-ctas { animation-delay: .24s; } .motion .lp-proof { animation-delay: .3s; } .motion .demo-wrap { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }

/* the live demo (light card) */
.demo-wrap { position: relative; cursor: pointer; }
.demo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 20px; align-items: center; padding: 28px; border-radius: 26px;
  background: rgba(255, 255, 255, .78); border: 1px solid #E4E0FA; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 40px 80px -36px rgba(70, 50, 180, .35), 0 2px 6px rgba(38, 36, 59, .04); transition: transform .25s ease-out; transform-style: preserve-3d; }
.demo-sheet { position: relative; overflow: hidden; aspect-ratio: 210 / 270; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 18px; display: grid; grid-template-columns: 34% 1fr; gap: 14px;
  box-shadow: 0 18px 40px -16px rgba(38, 36, 59, .25); transform: rotate(-2deg); transition: grid-template-columns .6s cubic-bezier(.3, .7, .2, 1), transform .6s; }
.demo-sheet b { display: block; height: 6px; border-radius: 3px; background: #ECEBF3; margin: 0 0 7px; transition: background .5s; }
.demo-sheet b.short { width: 62%; }
.scan { position: absolute; left: 0; right: 0; top: -30%; height: 30%; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(91, 61, 245, .08) 70%, rgba(91, 61, 245, .3) 98%, transparent); }
.scan::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brand); box-shadow: 0 0 10px 1px rgba(91, 61, 245, .45); }
.scanning .scan { opacity: 1; animation: scan 1.4s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes scan { to { top: 100%; } }
.ds-side { background: #F3F2F9; border-radius: 4px; padding: 12px 10px; transition: opacity .4s, padding .6s; overflow: hidden; }
.ds-photo { display: block; width: 46px; height: 46px; border-radius: 50%; background: #DDDAEA; margin: 0 auto 14px; }
.ds-name { font-weight: 800; font-size: clamp(14px, 1.5vw, 19px); letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; }
.ds-role { font-size: 10.5px; color: var(--ink-2); margin: 2px 0 12px; white-space: nowrap; }
.ds-h { height: 7px; width: 40%; border-radius: 3px; background: var(--ink); margin: 12px 0 8px; opacity: .8; }
.ds-bul { display: flex; gap: 6px; align-items: center; margin: 0 0 4px; }
.ds-bul i { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); flex: none; margin-bottom: 7px; }
.ds-bul b { flex: 1; }
.demo-sheet.s1, .demo-sheet.s2, .demo-sheet.s3 { grid-template-columns: 0% 1fr; gap: 0; transform: rotate(0); }
.demo-sheet:not(.s0) .ds-side { opacity: 0; padding-inline: 0; }
.demo-sheet.s2 .ds-bul b, .demo-sheet.s3 .ds-bul b { background: linear-gradient(90deg, #ECEBF3 68%, #B4A6FF 68%); }
.demo-sheet.s3 .ds-main > b:nth-of-type(1), .demo-sheet.s3 .ds-main > b:nth-of-type(4) { background: linear-gradient(90deg, var(--mark) 0 30%, #ECEBF3 30% 55%, var(--mark) 55% 80%, #ECEBF3 80%); }
.demo-panel { position: relative; color: var(--ink); transform: translateZ(30px); }
.dial { position: relative; width: 148px; height: 148px; margin: 0 auto 18px; }
.dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dial circle { fill: none; stroke: #EEECF6; stroke-width: 9; }
.dial .arc { stroke: #F5A524; stroke-linecap: round; stroke-dasharray: calc(var(--p) * 100) 100; transition: stroke .4s; }
.dial.done .arc { stroke: #22B57A; }
.dial-num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dial-num b { font-size: 46px; font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.dial-num small { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.fixes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fixes li { position: relative; padding: 10px 12px 10px 36px; border-radius: 12px; background: #F6F5FB; border: 1px solid #ECEBF3; font-size: 13.5px; line-height: 1.35; font-weight: 600; color: var(--ink-2); min-height: 40px; display: flex; align-items: center; transition: background .35s, border-color .35s, color .35s; }
.fixes li::before { content: "!"; position: absolute; left: 10px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: #FBE3C0; color: #8A5300; transition: background .35s; }
.fixes .now { display: none; }
.fixes li.fixed { background: #ECF8F2; border-color: #CBEEDC; color: var(--ink); animation: pop-in .4s cubic-bezier(.2, .8, .3, 1.3); }
@keyframes pop-in { from { transform: scale(.96); } }
.fixes li.fixed::before { content: "✓"; background: #22B57A; color: #fff; }
.fixes li.fixed .was { display: none; } .fixes li.fixed .now { display: inline; }
.demo-again { color: var(--brand); margin-top: 12px; font-size: 13.5px; }
.chip-f { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; padding: 8px 14px; border-radius: 999px; color: var(--ink);
  background: #fff; border: 1px solid #E4E0FA; box-shadow: 0 10px 24px -10px rgba(70, 50, 180, .3);
  /* follows the mouse at its own depth (--d) and spreads out a little while the card is hovered (--s) */
  --s: 0; translate: calc(var(--mx, 0) * var(--d) * 1px + var(--sx, 0) * var(--s) * 1px) calc(var(--my, 0) * var(--d) * 1px + var(--sy, 0) * var(--s) * 1px);
  transition: translate .35s cubic-bezier(.2, .7, .2, 1), border-color .3s, background .3s, color .3s; animation: bob 6s ease-in-out infinite; cursor: default; user-select: none; }
.chip-f i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 6px rgba(91, 61, 245, .5); transition: background .3s, box-shadow .3s; }
.c1 { top: -20px; left: 10%; --sx: -14; --sy: -14; }
.c2 { bottom: -18px; left: 30%; animation-delay: -2s; --sx: -6; --sy: 16; }
.c3 { top: 36%; right: -34px; animation-delay: -4s; --sx: 18; --sy: -6; }
.c4 { top: -16px; right: 18%; animation-delay: -1s; --sx: 12; --sy: -16; }
.c5 { bottom: 16%; left: -34px; animation-delay: -3s; --sx: -18; --sy: 6; }
/* hovered: keywords "match" (turn mint), blink with a glow pulse, and spread out */
.demo-wrap.hot .chip-f { --s: 1; border-color: #9FE2C2; background: #EFFAF4; color: #10603F; animation: bob 6s ease-in-out infinite, blink 1.2s ease-in-out infinite; }
.demo-wrap.hot .chip-f i { background: #22B57A; box-shadow: 0 0 8px rgba(34, 181, 122, .7); animation: dot 0.6s steps(2, jump-none) infinite; }
.demo-wrap.hot .c2 { animation-delay: -2s, .15s; } .demo-wrap.hot .c3 { animation-delay: -4s, .3s; } .demo-wrap.hot .c4 { animation-delay: -1s, .45s; } .demo-wrap.hot .c5 { animation-delay: -3s, .6s; }
@keyframes blink { 0%, 100% { box-shadow: 0 10px 24px -10px rgba(70, 50, 180, .3), 0 0 0 0 rgba(34, 181, 122, 0); } 50% { box-shadow: 0 10px 24px -10px rgba(70, 50, 180, .3), 0 0 0 6px rgba(34, 181, 122, .15), 0 0 20px rgba(34, 181, 122, .3); } }
@keyframes dot { 50% { opacity: .25; } }
@keyframes bob { 50% { transform: translateY(-8px); } }

/* ---------- roles marquee ---------- */
.lp-roles { background: var(--paper); border-bottom: 1px solid var(--line); padding: 22px 0; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.lp-roles:hover .marquee { animation-play-state: paused; }
.marquee-row { display: flex; gap: 12px; padding-right: 12px; }
@keyframes marquee { to { transform: translateX(-50%); } }
.role { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: 14.5px; color: var(--ink-2); white-space: nowrap; }

/* ---------- section scaffolding ---------- */
.lp-sec { padding: 120px 0; }
.lp-sec.alt { background: var(--surface); border-block: 1px solid var(--line); }
.lp-head { max-width: 760px; margin: 0 0 56px; }
.lp-h2 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 800; margin: 0 0 16px; color: var(--ink); }
.lp-sub { color: var(--ink-2); font-size: 18px; margin: 0; max-width: 40em; }
.lp-tag { display: inline-block; padding: 5px 12px; border-radius: 99px; font-size: 13px; font-weight: 700; background: var(--brand-tint); color: var(--brand); }

/* scroll reveal */
.motion .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
.motion .reveal.in { opacity: 1; transform: none; }
.motion .bento.reveal > *, .motion .extras.reveal > *, .motion .lp-steps.reveal > li { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s cubic-bezier(.2, .7, .2, 1); }
.motion .bento.reveal.in > *, .motion .extras.reveal.in > *, .motion .lp-steps.reveal.in > li { opacity: 1; transform: none; }
.motion .reveal.in > :nth-child(2) { transition-delay: .1s; } .motion .reveal.in > :nth-child(3) { transition-delay: .2s; }
.motion .reveal.in > :nth-child(4) { transition-delay: .3s; } .motion .reveal.in > :nth-child(5) { transition-delay: .4s; }

/* ---------- bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.tile { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 30px;
  box-shadow: 0 1px 2px rgba(21, 19, 43, .04), 0 12px 32px -18px rgba(21, 19, 43, .18); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.tile:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(21, 19, 43, .04), 0 24px 48px -20px rgba(21, 19, 43, .28); }
.tile h3 { font-size: clamp(20px, 1.8vw, 25px); line-height: 1.14; letter-spacing: -0.03em; font-weight: 800; margin: 14px 0 10px; color: var(--ink); }
.tile p { color: var(--ink-2); margin: 0 0 18px; }
.tile img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.tile:hover img { transform: scale(1.02); }
.t-ats { grid-column: 1 / 5; grid-row: 1 / 3; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 40px;
  background: linear-gradient(150deg, #F3F0FF 0%, #EEF4FF 100%); border-color: #E4E0FA; isolation: isolate; }
.t-ats h3 { font-size: clamp(26px, 2.6vw, 36px); }
.t-ats .lp-tag { background: #fff; }
.t-ats img { border: 1px solid #E4E0FA; box-shadow: 0 30px 60px -28px rgba(70, 50, 180, .4); transform: rotate(1.5deg); }
.t-ats:hover img { transform: rotate(0) scale(1.02); }
.t-build { grid-column: 5 / 7; }
.t-build img { margin: 6px -30px -30px 0; width: calc(100% + 30px); border-radius: 12px 0 0 0; border-right: 0; border-bottom: 0; }
.t-convert { grid-column: 5 / 7; display: flex; flex-direction: column; }
.t-convert .lp-tag { align-self: flex-start; }
.conv-art { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 18px 0 4px; }
.conv-art .doc { position: relative; width: 88px; aspect-ratio: 3 / 4; background: var(--paper); border: 1px solid var(--line-2); border-radius: 10px; padding: 34px 12px 0; box-shadow: 0 10px 24px -12px rgba(21, 19, 43, .3); }
.conv-art .doc b { position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 5px; color: #fff; background: #E5484D; }
.conv-art .word b { background: #2F6BD1; }
.conv-art .doc i { display: block; height: 5px; border-radius: 3px; background: var(--line-2); margin-bottom: 7px; }
.conv-art .doc i.s { width: 60%; }
.motion .conv-art .word { animation: doc-in 3.2s ease-in-out infinite; }
@keyframes doc-in { 0%, 15% { transform: translateX(-10px); opacity: .35; } 45%, 85% { transform: none; opacity: 1; } 100% { transform: none; opacity: .35; } }
.flow { display: flex; gap: 6px; }
.flow span { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); opacity: .2; }
.motion .flow span { animation: flow 1.2s ease-in-out infinite; }
.flow span:nth-child(2) { animation-delay: .2s; } .flow span:nth-child(3) { animation-delay: .4s; }
@keyframes flow { 40% { opacity: 1; transform: scale(1.25); } }
.t-letter { grid-column: 1 / 4; } .t-letter img { margin-top: 6px; }
.t-jobs { grid-column: 4 / 7; }
.off-letter .t-jobs { grid-column: 1 / 7; display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: 32px; align-items: center; }
.off-jobs .t-letter { grid-column: 1 / 7; }
.lp-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lp-list li { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.lp-list svg { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--good-bg); color: var(--good); margin-top: 1px; }
.extras { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 40px; }
.extras li { position: relative; padding-left: 56px; }
.extras li::before { content: ""; position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B3DF5' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 18px no-repeat; }
.extras h4 { margin: 0 0 6px; font-size: 17px; letter-spacing: -0.02em; font-weight: 800; }
.extras p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* ---------- templates band (dark) ---------- */
.lp-band { position: relative; background: linear-gradient(180deg, #F2EFFF 0%, #F7F6FF 100%); padding: 120px 0 128px; overflow: hidden; isolation: isolate; border-block: 1px solid #E8E4FB; }
.lp-band::before { content: ""; position: absolute; z-index: -1; width: 900px; height: 460px; left: 50%; bottom: -260px; translate: -50% 0; border-radius: 50%; background: rgba(140, 120, 255, .22); filter: blur(100px); }
.lp-tpls { display: flex; justify-content: center; margin-top: 12px; padding: 24px 0 8px; }
.lp-tpls figure { margin: 0 -18px; width: 22%; text-align: center; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.lp-tpls figure:nth-child(1) { transform: rotate(-9deg) translateY(40px); }
.lp-tpls figure:nth-child(2) { transform: rotate(-4.5deg) translateY(12px); z-index: 1; }
.lp-tpls figure:nth-child(3) { z-index: 2; }
.lp-tpls figure:nth-child(4) { transform: rotate(4.5deg) translateY(12px); z-index: 1; }
.lp-tpls figure:nth-child(5) { transform: rotate(9deg) translateY(40px); }
.motion .lp-tpls.reveal { opacity: 1; transform: none; }
.motion .lp-tpls.reveal:not(.in) figure { transform: translateY(60px) rotate(0); }
.lp-tpls figure:nth-child(2), .lp-tpls figure:nth-child(4) { transition-delay: .08s; } .lp-tpls figure:nth-child(1), .lp-tpls figure:nth-child(5) { transition-delay: .16s; }
.lp-tpls figure:hover { transform: translateY(-16px) rotate(0); z-index: 3; transition-delay: 0s; transition-duration: .35s; }
.lp-tpls img { width: 100%; height: auto; display: block; border-radius: 6px; border: 1px solid #E4E0FA; box-shadow: 0 34px 60px -28px rgba(70, 50, 180, .45); }
.lp-tpls figcaption { margin-top: 18px; font-weight: 700; color: var(--ink); }

/* ---------- steps (a real sequence, joined by a line that draws in) ---------- */
.lp-steps { position: relative; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.lp-steps::before { content: ""; position: absolute; top: 28px; left: 28px; right: calc(33.3% - 28px); height: 2px; background: linear-gradient(90deg, var(--brand), #A796FF); transform-origin: left; }
.motion .lp-steps.reveal::before { transform: scaleX(0); transition: transform 1.4s cubic-bezier(.6, .1, .2, 1) .3s; }
.motion .lp-steps.reveal.in::before { transform: scaleX(1); }
.lp-steps li { position: relative; display: flex; flex-direction: column; gap: 18px; }
.lp-steps .n { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font-size: 22px; font-weight: 800; background: var(--brand); color: #fff; box-shadow: 0 0 0 8px var(--paper), 0 0 0 9px var(--line); }
.lp-steps li:nth-child(2) .n { background: #3D8BFD; }
.lp-steps li:nth-child(3) .n { background: #22B57A; }
.lp-steps h4 { margin: 0 0 6px; font-size: 20px; letter-spacing: -0.025em; font-weight: 800; }
.lp-steps p { margin: 0; color: var(--ink-2); max-width: 26em; }

/* ---------- ratings ---------- */
.lp-rating { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: start; }
.lp-avg { background: var(--paper); border: 1px solid var(--line); border-radius: 24px; padding: 28px; text-align: center; position: sticky; top: 96px; }
.lp-avg .big { font-size: 68px; font-weight: 800; line-height: 1; letter-spacing: -0.05em; }
.stars { position: relative; display: inline-flex; margin: 10px 0 6px; }
.stars svg { width: 26px; height: 26px; fill: #DEDCEA; }
.stars .fill { position: absolute; inset: 0; display: flex; overflow: hidden; width: calc(var(--v) * 100%); }
.stars .fill svg { fill: #FFB020; flex: none; }
.lp-avg .cnt { color: var(--ink-2); font-size: 14px; margin-bottom: 16px; }
.rbars { display: grid; gap: 7px; text-align: left; }
.rbar { display: grid; grid-template-columns: 30px 1fr 28px; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-2); }
.rbar i { height: 8px; border-radius: 8px; background: var(--track); overflow: hidden; }
.rbar b { display: block; height: 100%; background: #FFB020; border-radius: 8px; }
.rbar span:last-child { text-align: right; }
.lp-reviews { columns: 2 300px; column-gap: 18px; }
.rv { break-inside: avoid; margin: 0 0 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 22px; box-shadow: 0 12px 30px -20px rgba(21, 19, 43, .2); }
.rv-stars svg { width: 17px; height: 17px; fill: #FFB020; }
.rv-stars .dim svg { fill: #DEDCEA; }
.rv blockquote { margin: 12px 0 16px; font-size: 16px; line-height: 1.6; }
.rv figcaption { display: flex; gap: 10px; align-items: center; }
.rv .av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); font-weight: 800; }
.rv figcaption b { display: block; font-size: 14.5px; } .rv figcaption small { color: var(--ink-3); }
.rv-empty { column-span: all; border: 1.5px dashed var(--line-2); border-radius: 24px; padding: 44px 28px; text-align: center; background: var(--paper); }
.rv-empty h4 { font-size: 22px; margin: 0 0 8px; letter-spacing: -0.02em; }
.rv-empty p { color: var(--ink-2); margin: 0 auto 20px; max-width: 30em; }
.rv-empty .btn { border-radius: 999px; }

/* ---------- FAQ ---------- */
.lp-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.lp-faq-head { position: sticky; top: 104px; }
.lp-faq-list details { border-bottom: 1px solid var(--line-2); }
.lp-faq-list details:first-child { border-top: 1px solid var(--line-2); }
.lp-faq-list summary { cursor: pointer; list-style: none; padding: 22px 0; font-weight: 700; font-size: 18px; display: flex; justify-content: space-between; gap: 16px; letter-spacing: -0.01em; transition: color .15s; }
.lp-faq-list summary:hover { color: var(--brand); }
.lp-faq-list summary::-webkit-details-marker { display: none; }
.lp-faq-list summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B3DF5' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .25s; }
.lp-faq-list details[open] summary::after { transform: rotate(45deg); }
.lp-faq-list details p { margin: 0 0 22px; color: var(--ink-2); max-width: 60ch; }
.motion .lp-faq-list details[open] p { animation: rise .45s ease-out; }

/* ---------- final call to action ---------- */
.lp-final { padding: 0 0 120px; }
.lp-final-card { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, #F1EEFF 0%, #EAF3FF 100%); border: 1px solid #E4E0FA; border-radius: 32px; padding: clamp(56px, 7vw, 96px) clamp(24px, 6vw, 80px); color: var(--ink-2); text-align: center; }
.lp-final-card::before { content: ""; position: absolute; z-index: -1; width: 700px; height: 420px; left: 50%; top: -260px; translate: -50% 0; border-radius: 50%; background: rgba(140, 120, 255, .3); filter: blur(90px); animation: glow 7s ease-in-out infinite alternate; }
@keyframes glow { to { opacity: .55; transform: scale(1.15); } }
.lp-final-card h2 { color: var(--ink); font-size: clamp(34px, 5vw, 62px); line-height: 1; letter-spacing: -0.05em; font-weight: 800; margin: 0 auto 16px; max-width: 15ch; text-wrap: balance; }
.lp-final-card p { font-size: 19px; margin: 0 0 32px; }
.btn.lp-mint { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.lp-mint:hover { background: var(--brand-2); border-color: var(--brand-2); }

.lp-foot { padding: 36px 0; background: #fff; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 14px; }
.lp-foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }
.lp-foot .logo { color: var(--ink); font-size: 18px; font-weight: 800; }
.lp-foot a { color: var(--ink-2); }
.lp-foot p { margin: 0; } .lp-foot .small { margin-left: auto; }
.terms a { color: inherit; text-decoration: underline; }

/* sign-in window */
.auth-modal { z-index: 60; }
.auth-modal .auth-card { position: relative; width: 100%; max-width: 430px; background: var(--surface); border-radius: 24px; padding: 34px 30px 26px; box-shadow: 0 40px 90px rgba(38, 36, 59, .25); animation: pop .3s cubic-bezier(.2, .8, .3, 1.2); }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.auth-x { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; font-size: 26px; line-height: 1; color: var(--ink-3); cursor: pointer; }
.auth-x:hover { background: var(--paper); color: var(--ink); }

/* features switched off in the admin panel */
.off-checker .need-checker, .off-letter .need-letter, .off-jobs .need-jobs, .off-import .need-import, .off-convert .need-convert, .off-share .need-share, .off-reviews .need-reviews { display: none !important; }
.off-checker .t-build, .off-checker .t-convert { grid-column: span 3; grid-row: auto; }

/* RTL */
[dir="rtl"] .lp-big svg { transform: scaleX(-1); }
[dir="rtl"] .t-build img { margin: 6px 0 -30px -30px; border-radius: 0 12px 0 0; border-left: 0; border-right: 1px solid var(--line); }
[dir="rtl"] .fixes li { padding: 10px 36px 10px 12px; } [dir="rtl"] .fixes li::before { left: auto; right: 10px; }
[dir="rtl"] .extras li { padding-left: 0; padding-right: 56px; } [dir="rtl"] .extras li::before { left: auto; right: 0; }
[dir="rtl"] .marquee { animation-direction: reverse; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .lp-hero-in { grid-template-columns: minmax(0, 1fr); gap: 72px; }
  .demo-wrap { max-width: 680px; }
  .t-ats { grid-column: 1 / 7; grid-row: auto; }
  .t-build, .t-convert, .t-letter, .t-jobs { grid-column: span 3 !important; }
  .lp-rating { grid-template-columns: 1fr; } .lp-avg { position: static; max-width: 420px; width: 100%; }
  .lp-faq { grid-template-columns: 1fr; gap: 24px; } .lp-faq-head { position: static; }
}
@media (max-width: 860px) {
  .lp-links, .lp-login { display: none; }
  .t-ats { grid-template-columns: 1fr; }
  .extras { grid-template-columns: repeat(2, 1fr); }
  .lp-steps { grid-template-columns: 1fr; gap: 30px; }
  .lp-steps::before { top: 28px; bottom: 28px; left: 27px; right: auto; width: 2px; height: auto; transform-origin: top; background: linear-gradient(var(--brand), #A796FF); }
  .motion .lp-steps.reveal::before { transform: scaleY(0); } .motion .lp-steps.reveal.in::before { transform: scaleY(1); }
  .lp-steps li { flex-direction: row; gap: 20px; }
  .lp-tpls figure { width: 30%; } .lp-tpls figure:nth-child(1), .lp-tpls figure:nth-child(5) { display: none; }
  .c3 { right: -6px; } .c5 { left: -8px; }
}
@media (max-width: 600px) {
  .lp-nav-in { gap: 8px; height: 62px; }
  .lp-lang svg { display: none; } .lp-lang select { max-width: 116px; }
  .lp-cta { padding-inline: 14px; font-size: 13.5px; white-space: nowrap; }
  .lp-cta .when-out { display: none; } .lp-cta .mob { display: inline; } .signed-in .lp-cta .mob { display: none; }
  .lp-hero { padding: 44px 0 80px; }
  .lp-big { width: 100%; white-space: normal; }
  .demo { grid-template-columns: 1fr 1fr; padding: 18px; gap: 14px; border-radius: 22px; }
  .demo-panel { display: contents; }
  .demo-sheet { grid-row: 1; grid-column: 1; padding: 10px; }
  .dial { grid-row: 1; grid-column: 2; width: 118px; height: 118px; margin: auto; }
  .dial-num b { font-size: 34px; }
  .fixes, .demo-again { grid-column: 1 / 3; }
  .ds-role { display: none; }
  .c3, .c4, .c5 { display: none; }
  .lp-sec, .lp-band { padding: 80px 0; }
  .bento { grid-template-columns: 1fr; gap: 18px; }
  .t-ats, .t-build, .t-convert, .t-letter, .t-jobs { grid-column: 1 !important; padding: 24px; }
  .t-build img { margin: 6px -24px -24px 0; width: calc(100% + 24px); }
  .t-ats img { transform: none; }
  .extras { grid-template-columns: 1fr; gap: 24px; }
  .lp-tpls figure { width: 46%; margin: 0 -10px; } .lp-tpls figure:nth-child(4) { display: none; }
  .lp-final { padding-bottom: 80px; } .lp-final-card { border-radius: 24px; }
  .lp-foot .small { margin-left: 0; }
}
@media (max-width: 440px) { .lp-logo-txt { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-bg i, .chip-f, .chip-f i, .marquee, .lp-final-card::before, .scan { animation: none !important; }
  .chip-f { translate: none !important; }
  .marquee { flex-wrap: wrap; width: auto; justify-content: center; } .marquee-row[aria-hidden] { display: none; }
  .demo, .demo-sheet, .tile, .tile img, .lp-tpls figure, .lp-big svg { transition: none; }
}

/* "Free" badge above the headline */
.lp-free { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; margin: 0 0 18px; border-radius: 999px; background: #E8F8F0; color: #137A4B; font-weight: 700; font-size: 14px; letter-spacing: -0.01em; border: 1px solid #BFEBD5; }
.lp-free i { width: 8px; height: 8px; border-radius: 50%; background: #1FB573; box-shadow: 0 0 0 3px rgba(31,181,115,.22); }

/* live counter under the hero buttons */
.lp-live { display: inline-flex; align-items: center; gap: 9px; margin: 14px 0 0; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line, #e6e4f2); color: var(--ink-2, #4a4863); font-weight: 600; font-size: 14px; box-shadow: 0 2px 10px rgba(38,36,59,.05); }
.lp-live[hidden] { display: none; }
.lp-live i { width: 9px; height: 9px; border-radius: 50%; background: #1FB573; animation: lpPulse 1.8s ease-out infinite; }
@keyframes lpPulse { 0% { box-shadow: 0 0 0 0 rgba(31,181,115,.5); } 70% { box-shadow: 0 0 0 9px rgba(31,181,115,0); } 100% { box-shadow: 0 0 0 0 rgba(31,181,115,0); } }
@media (prefers-reduced-motion: reduce) { .lp-live i { animation: none; } }
.off-live_count .lp-live { display: none !important; }
/* social icons in the footer */
.lp-social { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 6px; }
.lp-social[hidden] { display: none; }
.lp-social a { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--ink-2, #4a4863); background: #fff; border: 1px solid var(--line, #e6e4f2); transition: transform .15s, color .15s, border-color .15s; }
.lp-social a:hover { color: var(--brand, #5B3DF5); border-color: var(--brand, #5B3DF5); transform: translateY(-2px); }
.lp-social svg { width: 20px; height: 20px; }
.off-social .lp-social { display: none !important; }

.demo-note { margin: 10px 0 0; font-size: 12px; color: var(--ink-3, #8a88a3); }