:root {
	--cream: #fff8e9;
	--paper: #fffdf8;
	--yellow: #f2bd28;
	--yellow-soft: #ffe18a;
	--blue: #428bc3;
	--blue-light: #9fd6ef;
	--blue-dark: #1f5f96;
	--red: #c93f45;
	--green-soft: #f2bd28;
	--ink: #27394b;
	--shadow: 0 22px 50px rgba(39, 57, 75, .18);
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth
}

body {
	margin: 0;
	font-family: "DM Sans", sans-serif;
	color: var(--ink);
	background: var(--cream);
	line-height: 1.6
}

p {
    font-size: 1.20rem;
    text-align: justify;
}

img {
	max-width: 100%;
	display: block
}

a {
	text-decoration: none;
	color: inherit
}

.container {
	width: min(1120px, calc(100% - 40px));
	margin: auto
}

.topbar {
	height: 72px;
	padding: 0 max(24px, calc((100vw - 1120px)/2));
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--paper);
	color: var(--blue-dark);
	position: relative;
	z-index: 20;
	border-bottom: 1px solid rgba(31, 95, 150, .12)
}

.brand {
	line-height: .8;
	letter-spacing: .04em;
	display: inline-flex;
	flex-direction: column;
	font-weight: 700
}

.brand span {
	font-size: .75rem
}

.brand strong {
	font-size: 1.15rem
}

.social {
    background: var(--yellow-soft);
    color: var(--blue-dark);
    padding: 8px 15px;
    border-radius: 999px;
    font-weight: 800;
    font-size: .8rem;
	border-radius: 999px
}

.hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(90deg,rgba(94, 201, 255, 1) 0%, rgba(242, 189, 40, 1) 100%);
	min-height: 560px;
	display: grid;
	align-items: center
}

.hero-inner {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: 72px;
	align-items: center;
	position: relative;
	z-index: 2;
	padding: 54px 0
}

.book-stage {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 420px
}

.cover {
	width: 285px;
	height: auto;
	aspect-ratio: 294/422;
	object-fit: cover;
	border-radius: 2px;
	box-shadow: var(--shadow);
	transform: rotate(-2deg);
	position: relative;
	z-index: 2
}

.book-shadow {
	position: absolute;
	width: 270px;
	height: 360px;
	background: rgba(39, 57, 75, .18);
	filter: blur(24px);
	transform: translate(20px, 28px) rotate(-2deg)
}

.floating-chip {
	position: absolute;
	background: rgba(255, 255, 255, .9);
	padding: 7px 13px;
	border-radius: 999px;
	font-size: .76rem;
	font-weight: 700;
	box-shadow: 0 8px 22px rgba(39, 57, 75, .12);
	z-index: 3;
	color: var(--blue-dark)
}

.chip-one {
	left: 5%;
	top: 22%
}

.chip-two {
	right: 4%;
	bottom: 19%
}

.origami-heart {
	position: absolute;
	width: 250px;
	aspect-ratio: 1;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: .34;
	filter: saturate(1.15)
}

.origami-heart::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 260'%3E%3Cpath d='M150 245 24 124C-30 72 45-25 111 35l39 36 39-36c66-60 141 37 87 89Z' fill='%23f2bd28' fill-opacity='.18' stroke='%23c93f45' stroke-width='3'/%3E%3Cg fill='none' stroke='%23428bc3' stroke-width='3'%3E%3Cpath d='M24 124 111 35l39 36 39-36 87 89-126 121Z'/%3E%3Cpath d='m24 124 126-53 126 53M24 124l126 121 126-121M111 35l39 210 39-210M24 124l87-89m165 89-87-89'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat
}

.heart-left {
	left: -90px;
	bottom: -35px;
	transform: rotate(-13deg)
}

.heart-right {
	right: -62px;
	top: 8px;
	transform: rotate(13deg) scale(.9)
}

.eyebrow,
.section-kicker {
	text-transform: uppercase;
	letter-spacing: .16em;
	font-weight: 800;
	font-size: .76rem;
	color: var(--red);
	margin: 0 0 12px
}

.hero h1,
.section-dark h2,
.feature-copy h2,
.author-copy h2,
.cta h2 {
	font-family: "Bree Serif", serif;
	font-weight: 400;
	line-height: 1.08;
	margin: 0
}

.hero h1 {
	font-size: clamp(2.55rem, 4.7vw, 4.35rem);
	color: var(--blue-dark)
}

.hero h1 em {
	font-style: normal;
	color: var(--red)
}

.lead {
	font-size: 1.20rem;
	max-width: 560px;
	margin: 22px 0 28px
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--red);
	color: #fff;
	padding: 14px 24px;
	border-radius: 8px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .07em;
	font-size: .8rem;
	box-shadow: 5px 6px 0 #27394b;
	transition: .2s
}

.button:hover {
	transform: translate(-2px, -2px);
	box-shadow: 8px 9px 0 #428bc3
}

.section-dark {
	background: var(--blue-dark);
	color: #fff;
	padding: 94px 0
}

.section-dark .section-kicker {
	color: var(--yellow-soft)
}

.section-dark h2 {
	font-size: clamp(2.05rem, 4vw, 3.45rem);
}

.copy-columns {
	display: block;
	margin-top: 36px;
	color: #edf7fd
}

.copy-columns p {
	margin-bottom: 20px;
    text-align: justify;
}

.feature-grid,
.author,
.cta {
	display: grid;
	grid-template-columns: 1fr 1fr
}

.feature-copy {
	background: var(--green-soft);
	padding: clamp(55px, 8vw, 100px) max(30px, calc((100vw - 1120px)/2));
	padding-right: 7vw
}

.section-kicker.blue {
	color: var(--blue-dark)
}

.feature-copy h2,
.author-copy h2,
.cta h2 {
	font-size: clamp(2rem, 3.5vw, 3.25rem)
}

.feature-copy ul {
	padding-left: 20px;
	margin: 28px 0 34px
}

.feature-copy li {
	margin: 10px 0
	font-size: 1.20rem;
	text-align: justify;
}

.button-light {
	background: #fff;
	color: var(--blue-dark)
}

.mockup-panel {
	background: linear-gradient(145deg, var(--blue-light), var(--blue));
	display: grid;
	place-items: center;
	min-height: 590px;
	position: relative;
	overflow: hidden
}

.open-book{
    width:min(465px,85%);
    height:320px;
    display:grid;
    grid-template-columns:1fr 1fr;

    perspective:1200px;
    transform:rotate(-4deg);

    filter:drop-shadow(0 22px 25px rgba(12,43,69,.22));
}

.page{
    background:#fffdf6;
    padding:22px;
    overflow:hidden;
    position:relative;
}

.page-left{
    transform-origin:right center;
    transform:perspective(1200px) rotateY(12deg);
    border-radius:8px 0 0 8px;
}

.page-left img {
	height: 100%;
	width: auto;
	margin: auto;
	object-fit: contain
}

.page-right{
    transform-origin:left center;
    transform:perspective(1200px) rotateY(-12deg);

    border-radius:0 8px 8px 0;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;

    color:var(--blue-dark);
    font-family:"Bree Serif",serif;
    font-size:1.18rem;
}

.star {
	position: absolute;
	color: var(--yellow);
	font-size: 2rem
}

.mockup-panel-2 {
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  align-self: stretch;
}

.mockup-panel-2 img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.s1 {
	left: 12%;
	top: 18%
}

.s2 {
	right: 13%;
	top: 22%
}

.s3 {
	right: 22%;
	bottom: 14%
}

.author-photo {
	background: var(--paper);
	display: grid;
	place-items: center;
	padding: 70px 30px;
	min-height: 560px
}

.portrait-placeholder {
	width: min(340px, 88%);
	aspect-ratio: 4/5;
	border-radius: 30px;
	background: linear-gradient(160deg, #f8d7cc, #fff7ef 55%, #c8e2f4);
	box-shadow: var(--shadow);
	display: grid;
	place-items: center;
	color: var(--blue-dark);
	font-weight: 800;
	letter-spacing: .15em;
	text-align: center;
}

.portrait-placeholder img {
    border-radius: 15px;
}

.author-copy {
	background: var(--red);
	color: #fff;
	padding: clamp(60px, 8vw, 100px) max(30px, calc((100vw - 1120px)/2));
	padding-left: 7vw
}

.author-copy .section-kicker {
	color: var(--yellow-soft)
}

.author-copy p {
	max-width: 560px;
	color: #fff8f0;
    text-align: justify;
}

.cta {
	background: var(--blue-light)
}

.cta-copy {
	padding: clamp(60px, 8vw, 100px) max(30px, calc((100vw - 1120px)/2));
	padding-right: 7vw
}

.stacked-books {
	min-height: 530px;
	overflow: hidden
}

.stacked-books img {
	position: absolute;
	width: 220px;
	height: auto;
	aspect-ratio: 294/422;
	object-fit: cover;
	box-shadow: 0 25px 35px rgba(39, 57, 75, .22);
	left: 50%;
	top: 50%
}

.stacked-books img:nth-child(1) {
	transform: translate(-92%, -45%) rotate(-16deg)
}

.stacked-books img:nth-child(2) {
	transform: translate(-30%, -55%) rotate(6deg)
}

.stacked-books img:nth-child(3) {
	transform: translate(-10%, -20%) rotate(18deg)
}

footer {
	background: var(--blue-dark);
	color: #fff;
	min-height: 150px;
	padding: 30px max(24px, calc((100vw - 1120px)/2));
	display: grid;
	grid-template-columns: 1fr auto 1fr auto 1fr;
	align-items: center;
	gap: 34px
}

.footer-col {
	display: flex;
	flex-direction: column;
	gap: 8px
}

.footer-identity {
	align-items: flex-start
}

.footer-social {
	align-items: center;
	text-align: center
}

.footer-credit {
	align-items: flex-end;
	text-align: right
}

.footer-col>span {
	font-size: .76rem;
	opacity: .8
}

.footer-col p {
	margin: 0;
	opacity: .72;
	font-size: .78rem
}

.footer-divider {
	width: 1px;
	height: 58px;
	background: rgba(255, 255, 255, .35)
}

.social-pill {
	background: var(--yellow-soft);
	color: var(--blue-dark);
	padding: 8px 15px;
	border-radius: 999px;
	font-weight: 800;
	font-size: .8rem
}

.footer-credit strong {
	font-size: 1rem;
	letter-spacing: .06em
}

.footer-brand {
	color: #fff
}

.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s ease, transform .7s ease
}

.reveal.visible {
	opacity: 1;
	transform: none
}

.delay-1 {
	transition-delay: .12s
}

.back-to-top{
    position: fixed;
    right: 15px;
    bottom: 50px;
    width: 45px;
    height: 45px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#2B5FA7;
    color:#fff;

    border-radius:50%;
    text-decoration:none;
    font-size:22px;
    font-weight:600;

    box-shadow:0 10px 25px rgba(0,0,0,.18);

    opacity:0;
    visibility:hidden;
    transform:translateY(15px);

    transition:.35s ease;

    z-index:9999;
}

.back-to-top:hover{
    background:#C53A4A;
    transform:translateY(-4px);
}

.back-to-top.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

@media(max-width:768px){
    .back-to-top{
        width:46px;
        height:46px;
        right:20px;
        bottom:20px;
        font-size:20px;
    }
}

@media (max-width:820px) {
	.topbar {
		height: 62px
	}

	.social {
		font-size: .75rem;
		padding: 7px 11px
	}

	.hero {
		min-height: auto
	}

	.hero-inner {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 38px 0 55px;
		text-align: center
	}

	.book-stage {
		min-height: 340px
	}

	.cover {
		width: 210px
	}

	.book-shadow {
		width: 200px;
		height: 280px
	}

	.chip-one {
		left: 2%
	}

	.chip-two {
		right: 0
	}

	.hero-copy {
		display: flex;
		flex-direction: column;
		align-items: center
	}

	.hero h1 {
		font-size: 2.75rem
	}

	.lead {
		font-size: .98rem
	}

	.origami-heart {
		width: 165px
	}

	.heart-left {
		left: -70px;
		bottom: 10px
	}

	.heart-right {
		right: -65px;
		top: 24px
	}

	.section-dark {
		padding: 70px 0
	}

	.copy-columns {
		grid-template-columns: 1fr;
		gap: 10px
	}

	.section-dark h2 {
		font-size: 2.35rem
	}

	.feature-grid,
	.author,
	.cta {
		grid-template-columns: 1fr
	}

	.feature-copy,
	.author-copy,
	.cta-copy {
		padding: 64px 28px
	}

	.mockup-panel,
	.author-photo,
	.stacked-books {
		min-height: 430px
	}

	.author-photo {
		order: 1
	}

	.author-copy {
		order: 2
	}

	.cta-copy {
		order: 1
	}

	.stacked-books {
		order: 2
	}

	.open-book {
		height: 220px
	}

	.page-right {
		font-size: .95rem
	}

	.stacked-books img {
		width: 165px
	}

	footer {
		grid-template-columns: 1fr;
		gap: 22px;
		text-align: center;
		padding: 36px 24px
	}

	.footer-divider {
		width: 70px;
		height: 1px;
		margin: auto
	}

	.footer-identity,
	.footer-social,
	.footer-credit {
		align-items: center;
		text-align: center
	}
}

@media (prefers-reduced-motion:reduce) {
	html {
		scroll-behavior: auto
	}

	.reveal {
		opacity: 1;
		transform: none;
		transition: none
	}

	.button {
		transition: none
	}
}