@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Archivo:wght@300..700&display=swap");

* {
box-sizing: border-box;
}

html,
body {
margin: 0;
min-height: 100%;
overflow-x: hidden;
}

body {
overflow-y: auto;
}

.page {
container-type: size;
position: relative;
width: 100%;
height: 100vh;
height: 100dvh;
overflow: hidden;
color: #071138;
font-family: 'Archivo', sans-serif;
background:
radial-gradient(
96.35% 107.69% at 88.65% 100%,
rgba(255, 232, 140, 0.55) 0%,
rgba(255, 241, 168, 0.32) 40%,
rgba(255, 241, 168, 0) 72%
),
linear-gradient(0deg, #FFFFFF, #FFFFFF);
}

.art {
position: absolute;
left: 50%;
top: 50%;
width: min(100cqw, 177.78cqh);
aspect-ratio: 16 / 9;
transform: translate(-50%, -50%);
container-type: inline-size;
pointer-events: none;
}

.bg {
position: absolute;
left: -50cqw;
right: -50cqw;
top: -50cqw;
bottom: -50cqw;
background:
radial-gradient(60cqw 26cqw at 70cqw 54cqw, rgba(255, 226, 120, .0), rgba(255, 226, 120, 0)),
linear-gradient(180deg, #FEFAEF 0%, #FEFAEF 100%);
}

@keyframes glow {
0%,
100% {
opacity: 1;
}

50% {
opacity: .4;
}
}

.tr {
position: absolute;
inset: 0;
overflow: visible;
transform: translateX(5cqw);
}

.tr i {
position: absolute;
display: block;
}

.t1 {
left: 34.69cqw;
top: 3.59cqw;
width: 59.81cqw;
height: 59.81cqw;
border-radius: 50%;
background: radial-gradient(circle, rgba(254, 240, 184, .5) 0%, rgba(254, 244, 200, .4) 68%, rgba(254, 248, 215, 0) 100%);
filter: blur(30px);
}

.t2 {
left: 37.80cqw;
top: 6.46cqw;
width: 53.83cqw;
height: 53.83cqw;
border-radius: 50%;
background: rgba(254, 243, 196, .62);
-webkit-mask: linear-gradient(to top right, transparent 16%, #000 62%);
mask: linear-gradient(to top right, transparent 16%, #000 62%);
filter: blur(1.5px);
}

.t3 {
left: 44.56cqw;
top: 13.16cqw;
width: 46.65cqw;
height: 38.88cqw;
border-radius: 50%;
background: radial-gradient(ellipse at 72% 40%, rgba(253, 229, 131, .96) 0%, rgba(254, 233, 158, .86) 38%, rgba(254, 238, 175, .56) 70%, rgba(254, 243, 195, 0) 100%);
-webkit-mask: linear-gradient(180deg, transparent 0%, #000 30%);
mask: linear-gradient(180deg, transparent 0%, #000 30%);
filter: blur(20px);
animation: glow 6s ease-in-out infinite;
}

.t4 {
left: 44.86cqw;
top: 41.57cqw;
width: 65.79cqw;
height: 17.94cqw;
border-radius: 50%;
background: radial-gradient(ellipse, rgba(254, 232, 150, .95) 0%, rgba(254, 236, 165, .6) 50%, rgba(254, 240, 180, 0) 72%);
filter: blur(22px);
animation: glow 6s ease-in-out -3s infinite;
}

/*
Right-bottom yellow circle intentionally hidden.
.t5 {
left: 85.83cqw;
top: 35.89cqw;
width: 26.32cqw;
height: 25.12cqw;
border-radius: 50%;
background: radial-gradient(circle, rgba(254, 229, 128, .95) 0%, rgba(254, 233, 150, .6) 50%, rgba(254, 238, 165, 0) 72%);
filter: blur(18px);
}
*/

.linem {
display: none;
}

.line {
position: absolute;
left: 50%;
top: 0;
width: 100vw;
height: 100%;
transform: translateX(-50%);
}

.line path {
fill: none;
stroke: #FFC21A;
stroke-width: 3.4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1 1;
stroke-dashoffset: 1;
transition: stroke-dashoffset .9s ease-in;
}

.page:has(.gt:hover) .line path,
.page:has(.gt:focus-visible) .line path {
stroke-dashoffset: 0;
transition: stroke-dashoffset 3.2s cubic-bezier(.4, .1, .35, 1);
}

.d1 {
position: absolute;
width: 40cqw;
max-width: 100%;
height: auto;
left: 72.1cqw;
top: 29.6cqw;
transform: translate(-50.7%, -50.7%);
filter: drop-shadow(0 26px 26px rgba(27, 43, 90, .2));
animation: bob 6s ease-in-out infinite;
}

@keyframes bob {
0%,
100% {
transform: translate(-50.7%, -50.7%) translateY(6px);
}

50% {
transform: translate(-50.7%, -50.7%) translateY(-10px);
}
}

.wrap {
--u: min(1cqw, 1.7778cqh, 24px);
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 0 0 8.7cqw;
}

 .logo {
position: absolute;
left: 8.7cqw;
top: calc(2.9 * var(--u));
width: calc(13.8 * var(--u) - 5px);
height: auto;
} 

/*.logo {*/
/*position: absolute;*/
/*left: auto;*/
/*right: 8.7cqw;*/
/*top: calc(2.9 * var(--u));*/
/*width: calc(13.8 * var(--u) - 5px);*/
/*height: auto;*/
/*}*/

.copy {
position: relative;
}

.pill {
position: relative;
display: inline-flex;
align-items: center;
gap: calc(.8 * var(--u));
padding: calc(.72 * var(--u)) calc(1.7 * var(--u)) calc(.72 * var(--u)) calc(1.3 * var(--u));
border-radius: 999px;
background: #FFF1A8;
font-family: 'Lora', serif;
font-size: calc(1.32 * var(--u));
color: #071138;
}

.pill .bk {
width: calc(1.5 * var(--u));
height: auto;
}

.pill .spark {
position: absolute;
left: 100%;
top: calc(-2.3 * var(--u));
width: calc(3.6 * var(--u));
height: auto;
margin-left: calc(.6 * var(--u));
}

h1 {
margin: calc(1.7 * var(--u)) 0 0;
font-family: 'Lora', serif;
font-weight: 600;
font-size: calc(4.65 * var(--u));
line-height: 1;
letter-spacing: -.04em;
color: #071138;
}

.rot {
position: relative;
display: inline-block;
isolation: isolate;
font-style: italic;
padding: 0 .12em 0 .05em;
margin-left: -.05em;
}

.rot::before {
content: "";
position: absolute;
left: -.2em;
right: -.06em;
top: 30%;
bottom: 6%;
background: #FFF1A8;
border-radius: 10px 26px 12px 30px;
transform: rotate(-.8deg);
z-index: -1;
}

.rot .a {
display: inline-block;
animation: fadeA .8s ease both;
}

.rot .b {
display: inline-block;
animation: fadeB .8s ease both;
}

@keyframes fadeA {
0% {
opacity: 0;
filter: blur(4px);
}

100% {
opacity: 1;
filter: none;
}
}

@keyframes fadeB {
0% {
opacity: 0;
filter: blur(4px);
}

100% {
opacity: 1;
filter: none;
}
}

.sub {
margin: calc(1.2 * var(--u)) 0 0;
font-family: 'Lora', serif;
font-style: italic;
font-weight: 500;
font-size: calc(2.7 * var(--u));
letter-spacing: -.02em;
color: #071138;
}

.lead {
margin: calc(1.2 * var(--u)) 0 0;
font-weight: 400;
font-size: calc(1.5 * var(--u));
line-height: 1.4;
letter-spacing: 1px;
color: #071138;
}

.gt {
display: inline-flex;
align-items: center;
gap: calc(1.1 * var(--u));
margin-top: calc(3.4 * var(--u));
min-height: 44px;
height: calc(4.05 * var(--u));
padding: 0 calc(2.4 * var(--u)) 0 calc(1.5 * var(--u));
border-radius: 999px;
background: #FFF1A8;
border: 2px solid #071138;
font-family: 'Lora', serif;
font-weight: 600;
font-size: calc(1.25 * var(--u));
color: #071138;
text-decoration: none;
transition: background .3s, color .3s, border-color .3s, transform .3s, box-shadow .3s;
}

.gt .in {
width: calc(2.1 * var(--u));
height: calc(2.1 * var(--u));
flex: 0 0 auto;
}

.gt .in rect {
fill: #111114;
transition: fill .3s;
}

.gt .in path {
fill: #FFF1A8;
transition: fill .3s;
}

.gt .arr {
width: calc(1.7 * var(--u));
margin-left: calc(1.2 * var(--u));
transition: transform .35s;
}

.gt:hover,
.gt:focus-visible {
background: #1B2B5A;
border-color: #1B2B5A;
color: #FFFDF6;
transform: translateY(-2px);
box-shadow: 0 12px 20px -12px rgba(27, 43, 90, .7);
outline: none;
}

.gt:hover .in rect,
.gt:focus-visible .in rect {
fill: #FFFDF6;
}

.gt:hover .in path,
.gt:focus-visible .in path {
fill: #1B2B5A;
}

.gt:hover .arr,
.gt:focus-visible .arr {
transform: translateX(6px);
}

.foot {
position: absolute;
left: 8.7cqw;
bottom: calc(4.1 * var(--u));
margin: 0;
font-family: 'Archivo', sans-serif;
font-size: calc(1 * var(--u));
color: #071138;
letter-spacing: .5px;
}

.stage {
display: none;
}

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation: none !important;
transition: none !important;
}
}

@container (max-width: 900px) {
.art {
left: 0;
top: 0;
width: 100%;
height: 100%;
aspect-ratio: auto;
transform: none;
}

.d1,
.line,
.pill .spark {
display: none;
}

.tr {
inset: auto 0 0 0;
height: 177.7cqw;
transform: none;
}

.wrap {
--m: min(1cqw, .462cqh, 16px);
height: 100%;
padding: 0 7cqw;
justify-content: flex-start;
}

 .logo {
position: relative;
left: auto;
top: auto;
margin: calc(5 * var(--m)) 0 0;
width: max(115px, calc(26 * var(--m) - 5px));
} 
/*.logo {*/
/*position: relative;*/
/*left: auto;*/
/*right: auto;*/
/*top: auto;*/
/*align-self: flex-start;*/
/*margin: calc(5 * var(--m)) 0 0;*/
/*width: max(115px, calc(26 * var(--m) - 5px));*/
/*}*/

.copy {
padding-top: calc(10 * var(--m)); /* pehle 3 * var(--m) */
}

.pill {
font-size: max(13px, calc(2.6 * var(--m)));
padding: calc(1.5 * var(--m)) calc(3 * var(--m));
}

.pill .bk {
width: max(16px, calc(3.2 * var(--m)));
}

h1 {
font-size: max(30px, calc(9.6 * var(--m)));
margin-top: calc(3 * var(--m));
}

.sub {
margin: calc(3 * var(--m)) 0 0; /* pehle 2.2 * var(--m) */
font-size: max(18px, calc(5 * var(--m)));
}

.lead {
margin: calc(3 * var(--m)) 0 0; /* pehle 2.2 * var(--m) */
font-size: max(14px, calc(3.2 * var(--m)));
}

.gt {
height: max(44px, calc(8 * var(--m)));
font-size: max(13px, calc(3 * var(--m)));
padding: 0 calc(3.4 * var(--m)) 0 calc(3.6 * var(--m));
gap: calc(1.6 * var(--m));
margin-top: calc(4 * var(--m)); /* pehle 3.5 * var(--m) */
border-width: 1.5px;
}

.gt .in {
width: max(20px, calc(4.4 * var(--m)));
height: max(20px, calc(4.4 * var(--m)));
}

.gt .arr {
width: max(15px, calc(3.2 * var(--m)));
margin-left: calc(.8 * var(--m));
}

.linem {
display: block;
position: absolute;
inset: auto 0 0 0;
width: 100%;
height: 177.7cqw;
}

.linem path {
fill: none;
stroke: #FFC21A;
stroke-width: 7;
stroke-linecap: round;
stroke-linejoin: round;
}

.stage {
display: flex;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 115cqw; /* pehle 103cqw; book ko upar laayega */
justify-content: center;
align-items: center;
z-index: 2;
}

.d2 {
width: min(58cqw, 40cqh);
max-width: 100%;
height: auto;
filter: drop-shadow(0 20px 22px rgba(27, 43, 90, .2));
animation: bob2 6s ease-in-out infinite;
}

@keyframes bob2 {
0%,
100% {
transform: translateY(5px);
}

50% {
transform: translateY(-8px);
}
}

.foot {
position: absolute;
left: 0;
right: 0;
bottom: calc(6 * var(--m) + env(safe-area-inset-bottom));
margin: 0;
text-align: center;
font-size: max(12px, calc(2.6 * var(--m)));
z-index: 3;
}

.t1 {
left: 5.31cqw;
top: 79.70cqw;
width: 93.52cqw;
height: 93.52cqw;
}

.t2 {
left: 12.22cqw;
top: 86.61cqw;
width: 79.70cqw;
height: 79.70cqw;
}

.t3 {
left: 20.19cqw;
top: 96.17cqw;
width: 68.01cqw;
height: 59.51cqw;
}

.t4 {
left: 9.56cqw;
top: 147.72cqw;
width: 95.64cqw;
height: 25.50cqw;
}
}

@container (max-width: 900px) and (max-height: 700px) {
.page {
height: auto;
min-height: 100vh;
min-height: 100dvh;
overflow: visible;
}

.art {
position: fixed;
inset: 0;
width: 100%;
height: 100dvh;
aspect-ratio: auto;
transform: none;
}

.wrap {
height: auto;
min-height: 100vh;
min-height: 100dvh;
padding-bottom: 4cqw;
}

.stage {
position: relative;
left: auto;
right: auto;
bottom: auto;
height: 88cqw;
margin-top: 1cqw;
}

.foot {
position: relative;
left: auto;
right: auto;
bottom: auto;
margin-top: 1.5cqw;
padding-bottom: 3cqw;
}
}