:root {
--orange: #d88a18;
--orange-deep: #b96f0e;
--orange-soft: #f1bf5f;
--cream: #fff1cc;
--blue: #1d2d8d;
--blue-deep: #121f68;
--blue-soft: #384db6;
--text-dark: #1e1e1e;
--line: rgba(18, 31, 104, 0.4);
--glow: rgba(255, 240, 182, 0.8);
}

* {
box-sizing: border-box;
}

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

body {
font-family: "Inter", sans-serif;
color: var(--cream);
background:
linear-gradient(
to bottom,
#d78917 0%,
#e4a83d 18%,
#f0de9e 42%,
#7b72aa 56%,
#2b318d 66%,
#19266f 100%
);
}

.hero {
position: relative;
min-height: 100vh;
overflow: hidden;
isolation: isolate;
}

.hero__grain {
position: absolute;
inset: 0;
opacity: 0.12;
pointer-events: none;
background-image:
radial-gradient(circle at 20% 20%, rgba(255,255,255,0.6) 0.5px, transparent 0.6px),
radial-gradient(circle at 80% 30%, rgba(255,255,255,0.5) 0.5px, transparent 0.6px),
radial-gradient(circle at 40% 70%, rgba(0,0,0,0.35) 0.5px, transparent 0.6px),
radial-gradient(circle at 70% 80%, rgba(0,0,0,0.25) 0.5px, transparent 0.6px);
background-size: 12px 12px, 14px 14px, 16px 16px, 18px 18px;
}

.hero__content {
position: relative;
z-index: 1;
width: min(1100px, calc(100% - 2rem));
margin: 0 auto;
padding: 3rem 0 4rem;
text-align: center;
}

.eyebrow {
margin: 0 0 0.5rem;
font-size: 0.9rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 241, 204, 0.85);
}

h1,
h2 {
font-family: "Cormorant Garamond", serif;
font-weight: 600;
line-height: 0.95;
margin: 0;
}

h1 {
font-size: clamp(3rem, 8vw, 5.6rem);
color: var(--blue-deep);
text-shadow: 0 0 24px rgba(255, 236, 184, 0.16);
}

.intro {
width: min(700px, 100%);
margin: 1rem auto 0;
font-size: clamp(1rem, 2vw, 1.15rem);
line-height: 1.6;
color: rgba(255, 241, 204, 0.95);
}

.chandelier {
position: relative;
width: min(760px, 100%);
height: 520px;
margin: 2.5rem auto 2rem;
}

.line {
position: absolute;
height: 2px;
background: linear-gradient(
to right,
rgba(29, 45, 141, 0.08),
rgba(29, 45, 141, 0.55),
rgba(29, 45, 141, 0.08)
);
transform-origin: left center;
filter: blur(0.2px);
}

.line--top-left {
width: 170px;
top: 110px;
left: 205px;
transform: rotate(-17deg);
}

.line--top-right {
width: 170px;
top: 110px;
right: 205px;
transform: rotate(17deg);
}

.line--left-top-center {
width: 155px;
top: 190px;
left: 175px;
transform: rotate(19deg);
}

.line--right-top-center {
width: 155px;
top: 190px;
right: 175px;
transform: rotate(-19deg);
}

.line--left-bottom-center {
width: 160px;
top: 300px;
left: 177px;
transform: rotate(-19deg);
}

.line--right-bottom-center {
width: 160px;
top: 300px;
right: 177px;
transform: rotate(19deg);
}

.line--left-vertical {
width: 82px;
top: 245px;
left: 162px;
transform: rotate(90deg);
}

.line--right-vertical {
width: 82px;
top: 245px;
right: 162px;
transform: rotate(90deg);
}

.line--top-vertical {
width: 76px;
top: 150px;
left: 50%;
transform: translateX(-50%) rotate(90deg);
}

.line--bottom-vertical {
width: 92px;
top: 335px;
left: 50%;
transform: translateX(-50%) rotate(90deg);
}

.lamp {
position: absolute;
display: grid;
place-items: center;
border-radius: 999px 999px 42px 42px / 120px 120px 72px 72px;
color: var(--text-dark);
text-align: center;
padding: 0.7rem;
border: 1.5px solid rgba(18, 31, 104, 0.22);
box-shadow:
inset 0 14px 20px rgba(255,255,255,0.08),
inset 0 -18px 24px rgba(0,0,0,0.12);
}

.lamp::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 52%;
border-radius: 999px 999px 30px 30px;
background:
radial-gradient(circle at 50% 28%, var(--blue-soft) 0%, var(--blue) 45%, var(--blue-deep) 100%);
z-index: 0;
}

.lamp::after {
content: "";
position: absolute;
left: 50%;
bottom: -14px;
width: 70%;
height: 36%;
transform: translateX(-50%);
border-radius: 50%;
background:
radial-gradient(circle at 50% 35%, rgba(255, 245, 190, 0.95) 0%, rgba(248, 220, 116, 0.75) 38%, rgba(255, 202, 81, 0.25) 68%, rgba(255, 202, 81, 0) 100%);
filter: blur(10px);
z-index: -1;
}

.lamp span {
position: relative;
z-index: 1;
display: block;
max-width: 90%;
line-height: 1.05;
font-family: "Cormorant Garamond", serif;
font-weight: 700;
}

.lamp--center span {
color: var(--cream);
}

.lamp--top,
.lamp--left-top,
.lamp--right-top,
.lamp--left-bottom,
.lamp--right-bottom,
.lamp--bottom-center {
background:
radial-gradient(circle at 50% 92%, rgba(255, 243, 184, 0.95) 0%, rgba(241, 191, 95, 0.92) 38%, rgba(210, 135, 24, 0.98) 100%);
}

.lamp--center {
background:
radial-gradient(circle at 50% 92%, rgba(255, 247, 201, 0.98) 0%, rgba(243, 191, 80, 0.95) 35%, rgba(214, 138, 24, 1) 100%);
}

.lamp--top {
width: 120px;
height: 120px;
top: 40px;
left: 50%;
transform: translateX(-50%);
}

.lamp--left-top {
width: 130px;
height: 130px;
top: 132px;
left: 90px;
}

.lamp--right-top {
width: 130px;
height: 130px;
top: 132px;
right: 90px;
}

.lamp--center {
width: 200px;
height: 200px;
top: 175px;
left: 50%;
transform: translateX(-50%);
}

.lamp--left-bottom {
width: 120px;
height: 120px;
top: 310px;
left: 92px;
}

.lamp--right-bottom {
width: 120px;
height: 120px;
top: 310px;
right: 92px;
}

.lamp--bottom-center {
width: 132px;
height: 132px;
top: 390px;
left: 50%;
transform: translateX(-50%);
}

.lamp--top span,
.lamp--left-top span,
.lamp--right-top span,
.lamp--left-bottom span,
.lamp--right-bottom span {
margin-top: 1.25rem;
font-size: 1.05rem;
}

.lamp--center span {
margin-top: 0.4rem;
font-size: 2.1rem;
}

.lamp--bottom-center span {
margin-top: 1.1rem;
font-size: 1rem;
}

.hero__textblock {
width: min(720px, 100%);
margin: 0 auto 2rem;
}

.hero__textblock h2 {
font-size: clamp(2.6rem, 7vw, 5rem);
color: var(--cream);
text-shadow:
0 0 14px rgba(255, 223, 144, 0.22),
0 0 40px rgba(255, 223, 144, 0.15);
}

.hero__textblock p {
width: min(620px, 100%);
margin: 0.9rem auto 0;
font-size: clamp(1rem, 1.8vw, 1.15rem);
line-height: 1.65;
color: rgba(255, 241, 204, 0.96);
}

.hero__actions {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}

.button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 180px;
padding: 0.95rem 1.4rem;
border-radius: 999px;
text-decoration: none;
font-weight: 600;
transition: transform 160ms ease, opacity 160ms ease, background 160ms ease;
}

.button:hover {
transform: translateY(-2px);
}

.button--primary {
background: var(--cream);
color: var(--blue-deep);
}

.button--secondary {
border: 1px solid rgba(255, 241, 204, 0.4);
color: var(--cream);
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
}

@media (max-width: 820px) {
.hero__content {
padding-top: 2.25rem;
}

.chandelier {
height: 470px;
transform: scale(0.88);
transform-origin: top center;
margin-bottom: 0.5rem;
}

.hero__textblock {
margin-top: -0.75rem;
}
}

@media (max-width: 620px) {
h1 {
font-size: 2.6rem;
}

.intro {
font-size: 0.98rem;
}

.chandelier {
width: 100%;
height: 390px;
transform: scale(0.64);
margin-top: 1.5rem;
margin-bottom: -1.2rem;
}

.hero__textblock h2 {
font-size: 2.5rem;
}

.hero__textblock p {
font-size: 1rem;
}

.button {
width: 100%;
max-width: 320px;
}
}