/* Nukreipimo puslapis. Telefonas pirmiausia, kompiuteriui tinklelis nuo 900 px. */
.lead { font-size: 19px; color: var(--ink-soft); max-width: 34em; }
.center { text-align: center; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Pirmas ekranas ---------- */
.hero { padding: 22px 0 40px; position: relative; overflow: hidden; }
.hero-grid { display: grid; gap: 18px; }
.hero-text h1 { margin-bottom: 14px; }
.hero-cta { margin-top: 22px; }
.trust-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 6px; font-weight: 700; font-size: 15px; color: var(--ink-soft); }
.trust-list li { display: flex; gap: 8px; align-items: center; }
.trust-list li::before { content: '✓'; flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--grass); color: #fff; font-size: 13px; font-weight: 900; border: 2px solid var(--ink); }

.hero-books { position: relative; width: min(84vw, 360px); margin: 70px auto 10px; cursor: pointer; }
.hb-stack { position: relative; aspect-ratio: 1; }
.hb-cover { position: absolute; inset: 0; margin: 0; transition: transform .9s cubic-bezier(.3, .1, .2, 1), opacity .7s ease; opacity: 0; transform: translate(40%, 8%) rotate(14deg) scale(.86); will-change: transform; }
.hb-cover .book3d { width: 100%; }
.hb-cover figcaption { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); font-family: var(--display); font-weight: 700; font-size: 14px; background: #FFFAF0; border: 2px solid var(--ink); border-radius: var(--wobble); padding: 3px 12px; white-space: nowrap; opacity: 0; transition: opacity .4s; }
.hero-books.ready .hb-cover[data-pos="0"] { opacity: 1; transform: rotate(-2.5deg); z-index: 3; }
.hero-books.ready .hb-cover[data-pos="0"] figcaption { opacity: 1; transition-delay: .5s; }
.hero-books.ready .hb-cover[data-pos="1"] { opacity: 1; transform: translate(9%, -5%) rotate(6deg) scale(.93); z-index: 2; }
.hero-books.ready .hb-cover[data-pos="2"] { opacity: 1; transform: translate(-9%, -7%) rotate(-9deg) scale(.88); z-index: 1; }
.hero-books.ready .hb-cover[data-pos="out"] { opacity: 0; transform: translate(-70%, 14%) rotate(-20deg) scale(.9); z-index: 4; }
.name-note { position: absolute; z-index: 6; pointer-events: none; opacity: 0; transition: opacity .35s; }
.name-note.on { opacity: 1; }
.name-note span { position: absolute; bottom: 58px; left: 0; transform: translateX(-28%) rotate(-3deg); white-space: nowrap; font-family: var(--display); font-weight: 700; font-size: 15px; background: #FFFAF0; border: 2.5px solid var(--ink); padding: 5px 12px; border-radius: var(--wobble); box-shadow: 2px 3px 0 var(--ink); }
.name-note .doodle-arrow { position: absolute; width: 44px; height: 60px; left: -13px; top: -58px; color: var(--ink); }

@media (min-width: 900px) {
  .hero { padding: 56px 0 84px; }
  .hero-grid { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 64px; }
  .hero-books { width: min(100%, 470px); margin: 60px auto 30px; }
  .hero-text h1 { font-size: clamp(48px, 5vw, 66px); }
}

/* ---------- Kaip tai veikia ---------- */
.process { background: #FFFAF0; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.proc-list { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 18px; counter-reset: s; }
.proc-list li { display: grid; grid-template-columns: 84px 1fr; gap: 0 16px; align-items: start; }
.proc-ic { position: relative; grid-row: span 2; width: 84px; height: 84px; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink); display: grid; place-items: center; box-shadow: 3px 4px 0 var(--ink); }
.proc-ic img { width: 58px; height: 58px; }
.proc-n { position: absolute; top: -6px; right: -6px; width: 30px; height: 30px; border-radius: 50%; background: var(--tomato); color: #fff; font-family: var(--display); font-weight: 800; display: grid; place-items: center; border: 2.5px solid var(--ink); font-size: 16px; }
.proc-list h3 { font-size: 20px; margin: 6px 0 4px; }
.proc-list p { margin: 0; color: var(--ink-soft); font-size: 16px; }
@media (min-width: 700px) { .proc-list { grid-template-columns: 1fr 1fr; gap: 28px 36px; } }
@media (min-width: 1024px) {
  .proc-list { grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .proc-list li { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .proc-ic { width: 110px; height: 110px; margin-bottom: 14px; grid-row: auto; }
  .proc-ic img { width: 76px; height: 76px; }
  .proc-list h3 { margin-top: 0; }
}

/* ---------- Pavyzdinė knyga ---------- */
.sample-sec { overflow: hidden; }
.fb-hint { margin-top: 12px; }

/* ---------- Galerija ---------- */
.gallery { background: color-mix(in srgb, var(--sky) 28%, var(--paper)); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.gal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 16px; margin-bottom: 36px; }
.gal-item { appearance: none; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; display: flex; flex-direction: column; gap: 10px; }
.gal-item .book3d { transition: transform .25s ease; }
.gal-item:hover .book3d, .gal-item:focus-visible .book3d { transform: translateY(-6px) rotate(-1.5deg); }
.gal-item:focus-visible { outline: 3px solid var(--tomato); outline-offset: 6px; border-radius: 8px; }
.gal-meta { display: flex; flex-direction: column; line-height: 1.25; }
.gal-meta b { font-family: var(--display); font-size: 17px; }
.gal-meta small { color: var(--ink-soft); font-size: 14px; }
.gal-spreads { display: none; }
@media (min-width: 900px) {
  .gal-grid { grid-template-columns: repeat(4, 1fr); gap: 44px 32px; }
  .gal-item { display: grid; grid-template-columns: 1fr; }
  .gal-spreads { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .gal-spreads img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; border: 2px solid var(--ink); }
  .gal-meta b { font-size: 19px; }
}
.gal-modal { width: min(1100px, 96vw); max-height: 94vh; border: 3px solid var(--ink); border-radius: 22px; padding: 22px 18px 18px; background: var(--paper); background-image: var(--grain); box-shadow: 6px 8px 0 var(--ink); overflow: auto; }
.gal-modal::backdrop { background: rgba(43, 35, 64, .55); backdrop-filter: blur(3px); }
.gal-close { position: absolute; top: 10px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--ink); background: #FFFAF0; font-size: 26px; font-weight: 800; cursor: pointer; line-height: 1; z-index: 5; }
.gal-title { text-align: center; font-size: clamp(22px, 3vw, 32px); margin: 4px 48px 14px; }
.gal-loading { height: 50vh; display: grid; place-items: center; }
.gal-loading::after { content: ''; width: 48px; height: 48px; border: 6px solid var(--paper-3); border-top-color: var(--tomato); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Istorija, kurios neturi niekas kitas ---------- */
.unique { background: var(--night); color: #FFFAF0; }
.unique .sec-head p { color: #E6E0F5; }
.unique h2 { color: #FFFAF0; }
.un-grid { display: grid; gap: 20px; align-items: center; }
.un-grid .card { color: var(--ink); }
.un-tag { position: absolute; top: -16px; left: 18px; font-family: var(--display); font-weight: 800; font-size: 15px; background: #FFFAF0; border: 2.5px solid var(--ink); padding: 3px 12px; border-radius: var(--wobble); transform: rotate(-2deg); }
.un-tag.sun { background: var(--sun); }
.un-you ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.un-you b { display: block; font-size: 13px; color: var(--tomato-dk); text-transform: uppercase; letter-spacing: .04em; }
.un-arrow { text-align: center; font-size: 34px; font-weight: 800; color: var(--sun); line-height: 1; transform: rotate(90deg); }
.un-arrow small { display: block; font-size: 13px; color: #E6E0F5; font-weight: 700; }
.un-pic { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; border: 2.5px solid var(--ink); margin: 6px 0 12px; }
.un-pic img { width: 100%; height: 100%; object-fit: cover; }
.un-we p { margin: 0; font-family: var(--display); font-weight: 500; font-size: 17px; line-height: 1.45; }
@media (min-width: 900px) {
  .un-grid { grid-template-columns: 1fr 90px 1.3fr; gap: 24px; }
  .un-arrow { transform: none; font-size: 46px; }
}

/* ---------- Kainos ---------- */
.price-grid { display: grid; gap: 22px; margin-bottom: 26px; }
.price { display: flex; flex-direction: column; padding: 26px 24px; }
.price h3 { font-size: 22px; margin-bottom: 10px; }
.price ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 9px; font-size: 16px; }
.price li { display: flex; gap: 9px; }
.price li::before { content: '✓'; flex: none; color: var(--grass); font-weight: 900; }
.price.featured { background: #FFF1C9; transform: none; }
.price-note { max-width: 680px; margin: 0 auto 10px; }
.guarantee { font-weight: 700; max-width: 640px; margin: 0 auto 24px; }
.badge-free { display: block; height: 26px; }
@media (min-width: 900px) {
  .price-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
  .price.featured { transform: translateY(-10px); box-shadow: 7px 9px 0 var(--ink); }
}

/* ---------- D.U.K. ---------- */
.faq-item { border: 3px solid var(--ink); border-radius: 16px 20px 14px 18px; background: #FFFAF0; margin-bottom: 12px; padding: 0 18px; }
.faq-item summary { cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 18px; padding: 16px 28px 16px 0; list-style: none; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 0; top: 12px; font-size: 26px; color: var(--tomato); }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { margin: 0 0 16px; color: var(--ink-soft); }
@media (min-width: 1024px) {
  .faq-wrap { display: grid; grid-template-columns: 340px 1fr; gap: 64px; align-items: start; }
  .faq-wrap .sec-head { position: sticky; top: 100px; }
}

/* ---------- Pabaiga ---------- */
.final { background: var(--tomato); color: #fff; border-top: 3px solid var(--ink); }
.final h2 { color: #fff; }
.final .lead { color: #FFE9E2; margin: 0 auto 24px; }

/* ===== 3 rato kompiuterio vaizdo tvarka ===== */
.proc-list li { align-items: start; }
@media (min-width: 1024px) { .proc-list h3 { min-height: 2.3em; display: flex; align-items: flex-start; justify-content: center; } }
.un-grid { align-items: start; }
.un-arrow { align-self: center; }
.un-arrow small { font-size: 15px; }
@media (max-width: 899px) { .un-arrow { transform: none; } .un-arrow::before { content: ''; } .un-arrow { font-size: 0; } .un-arrow::after { content: '↓'; font-size: 34px; } .un-arrow small { font-size: 15px; } }
.un-pic { background: #EFE6D3; }
.un-we p { font-family: var(--body); font-weight: 600; }
.price.featured { transform: none !important; }
.gal-spreads img { background: #EFE6D3; }
.gal-item .pg-cover .cover-title { font-size: 7.2cqi; }
.gal-item .pg-cover .cover-brand { font-size: 3.6cqi; }
.hb-cover .pg-cover .cover-title { font-size: 7.2cqi; }
.faq-wrap .sec-head p { margin-top: 10px; }
@media (min-width: 900px) and (max-width: 1100px) { .hero-books { width: min(90%, 400px); } }
@media (max-width: 899px) {
  .hero-grid { display: flex; flex-direction: column; }
  .hero-text { display: contents; }
  .hero-text .kicker { order: 1; align-self: flex-start; }
  .hero-text h1 { order: 2; }
  .hero-books { order: 3; width: min(66vw, 270px); margin: 58px auto 34px; }
  .hero-text .lead { order: 4; }
  .hero-cta { order: 5; margin-top: 4px; }
  .trust-list { order: 6; }
}
.gal-sub { margin: -8px 0 12px; }
/* ===== 2 kritikos ratas ===== */
.proc-list li { display: flex; flex-direction: column; }
@media (min-width: 1024px) { .proc-list li { align-items: center; } .proc-list h3 { min-height: 2.4em; } }
@media (min-width: 900px) {
  .price h3 { min-height: 2.4em; }
  .price .price-n { min-height: 50px; }
}
.gal-spreads img { transform: scale(1.14); clip-path: inset(6%); }
.hero-books { max-width: calc(100% - 40px); }
/* 4 ratas: galerijoje tik viršeliai ir mygtukas „Atversti knygą" */
.gal-open { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-weight: 800; font-size: 15px; padding: 8px 14px; border: 2px solid var(--ink); border-radius: 999px; background: #FFFAF0; min-height: 40px; }
.gal-item:hover .gal-open, .gal-item:focus-visible .gal-open { background: var(--sun); }
/* 4 ratas: telefone mygtukas pirmame ekrane kartu su antrašte ir viršeliu */
@media (max-width: 899px) {
  .hero { padding-top: 14px; }
  .hero-text h1 { font-size: clamp(32px, 9vw, 44px); margin-bottom: 0; }
  .hero-books { order: 3; width: min(56vw, 230px); margin: 50px auto 30px; }
  .hero-cta { order: 4; margin-top: 0; }
  .hero-cta .btn { width: 100%; }
  .hero-text .lead { order: 5; margin-top: 8px; }
}

/* 5 ratas, išdėstymo tikrintojas */
.gal-item { gap: 16px; }
.gal-modal { padding-bottom: 30px; }
.sample-sec, #knyga, #pavyzdziai, #kaip, #klausimai { scroll-margin-top: 90px; }
@media (min-width: 1000px) { .un-grid { align-items: stretch; } .un-grid .un-arrow { align-self: center; } }
.proc-list h3 { line-height: 1.2; }
.final + .footer, .final ~ .footer { margin-top: 0; }
.proc-ic { margin-bottom: 12px; }
.gallery .btn, .final .btn, .sh-cta .btn { text-wrap: balance; line-height: 1.2; }
body:has(.final) .footer { margin-top: 0; border-top: 0; }
.un-you { display: flex; flex-direction: column; justify-content: center; }
.hb-cover:not([data-pos="0"]) .cover-label { visibility: hidden; }
.sample-sec .fb { max-width: none; }