/* HERO */

.hero {
position: relative;
padding: 160px 24px 100px;
overflow: hidden;
height: 85vh;
max-height: 860px;
min-height: 680px;
min-width: 360px;
display: flex;
align-items: center;
justify-content: center;
background-image: url('../images/postadmin-hero-backdrop-2.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-bottom: 10px solid var(--color_gray_500);
}

.hero_gradient {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
opacity: 0.6;
transition: opacity 0.5s ease-in-out;
}
.hero:has(.hero_sign_panel:hover) .hero_gradient {
	opacity: 1;
}
.hero_gradient canvas {
width: 100%;
height: 100%;
}

/* Fallback gradient if canvas doesn't render */
.hero_gradient_fallback {
position: absolute;
inset: 0;
background: linear-gradient(160deg,
	var(--color_gray_50) 0%,
	var(--color_blue_50) 30%,
	var(--color_white) 60%,
	var(--color_gray_50) 100%
);
}
.hero_sign {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
padding: 0 20px;
width: 100%;
height: 100%;
}
.hero_sign_complete {
inset: 0;
z-index: 0;
height: calc(100% - 200px);
width: 100%;
min-height: 560px;
max-width: 960px;
top: calc(50% + 38px);
left: 50%;
transform: translate3d(-50%, -50%, 0);
position: relative;
will-change: transform;
}

.hero_sign_panel {
position: relative;
background-color: white;
width: 100%;
height: 100%;
/* background: linear-gradient(to bottom, white, var(--color_blue_50)); */
box-shadow: 0 12px 12px -12px rgba(0,0,0,0.24);
transition: box-shadow 200ms ease;
}
.hero_sign_panel_effects {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
background: linear-gradient(
to bottom,
rgba(255,255,255,0.95) 0%,
rgba(255,255,255,0.67) 12%,
rgba(255,255,255,0.24) 30%,
rgba(0,0,0,0.42) 100%
);
opacity: 0.18;
pointer-events: none;
/* animation: signTextureOpacity 300ms ease-in-out forwards;
animation-delay: 2s; */
}
.hero_sign_panel_effects:after {
content: "";
background-color: transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 182px;
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}
.hero_sign_panel_screws {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
padding-top: 10px;
}
.hero_sign_panel_screws_left,
.hero_sign_panel_screws_right {
	position: absolute;
	left: 20px;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	width: 60px;
	height: 100%;
}
.hero_sign_panel_screws_right {
	left: unset;
	right: 20px;
}
.sign_screws_left,
.sign_screws_right {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	pointer-events: none;
}
.sign_screws_left {
	left: 0;
}
.sign_screws_right {
	right: 0;
}
.sign_screw {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background:
		radial-gradient(
		circle at 30% 30%,
		rgba(255,255,255,0.6) 0%,
		rgba(200,200,200,0.9) 35%,
		rgba(120,120,120,1) 65%,
		rgba(60,60,60,1) 100%
		);
	box-shadow:
		inset 0 1px 1px rgba(255,255,255,0.5),
		inset 0 -1px 2px rgba(0,0,0,0.6);
	opacity: 0;
}

@keyframes signTextureOpacity {
0%   { opacity: 0; }
100% { opacity: 0.2; }
}   
@keyframes screwOpacity {
0%   { opacity: 0; }
100% { opacity: 0.2; }
}

.hero_sign_panel_screws .sign_screw {
	animation: screwOpacity 30ms ease-in-out forwards;
}
.hero_sign_panel_screws .sign_screw:nth-child(1)  { animation-delay: 2s; }
.hero_sign_panel_screws .sign_screw:nth-child(2)  { animation-delay: 2.25s; }
.hero_sign_panel_screws .sign_screw:nth-child(3)  { animation-delay: 2.5s; }
.hero_sign_panel_screws .sign_screw:nth-child(4)  { animation-delay: 2s; }
.hero_sign_panel_screws .sign_screw:nth-child(5)  { animation-delay: 2.25s; }
.hero_sign_panel_screws .sign_screw:nth-child(6)  { animation-delay: 2.5s; }

.hero_sign_panel:hover {
	box-shadow: 0 0 24px -12px rgba(0,0,0,0.24);
}
.hero_sign_panel:hover .hero_sign_post_left, 
.hero_sign_panel:hover .hero_sign_post_right {
	box-shadow: 0 0 24px -12px rgba(0,0,0,0.24);
}
.hero_sign_post_left,
.hero_sign_post_right {
position: absolute;
background-color: #3fc;
left: 20px;
height: 100%;
width: 60px;
top: 100%;
overflow: hidden;
background-image: url('../images/postadmin-wood-post-white.png');
background-size: cover;
background-repeat: no-repeat;
box-shadow: inset 0 10px 10px -10px rgba(0, 0, 0, 0.15);
}
.hero_sign_post_right {
left: unset;
right: 20px;
background-color: #33f;
}

.hero_sign_post_left,
.hero_sign_post_right {
overflow: visible; /* key: allow the inner face to “stick out” */
background-image: url('../images/postadmin-wood-post-white.png');
background-size: cover;
background-repeat: no-repeat;
box-shadow:
0 18px 35px rgba(0,0,0,.10),
inset 0 10px 10px -10px rgba(0,0,0,.15);
}

.hero_sign_post_right {
left: unset;
right: 20px;
}

.hero_sign_post_left,
.hero_sign_post_right,
.hero_sign_panel {
	will-change: transform;
}

/* POSTS: start above, drop in one after the other */
.hero_sign_post_left,
.hero_sign_post_right {
/* remove top: 100% if you want transforms to drive the motion */
top: 22%; /* keep them anchored */
transform: translateY(-140%); /* start above container */
opacity: 1;

animation: heroPostDrop 800ms cubic-bezier(.2,.9,.2,1) forwards;
}

/* Stagger: left first, then right */
.hero_sign_post_left  { animation-delay: 100ms; }
.hero_sign_post_right { animation-delay: 240ms; }

/* PANEL: start below, slide up after posts */
.hero_sign_panel {
transform: translateY(120%); /* start below */
opacity: 1;

animation: heroPanelUp 800ms cubic-bezier(.2,.9,.2,1) forwards;
animation-delay: 400ms; /* after both posts */
}

/* Keyframes */
@keyframes heroPostDrop {
0%   { transform: translateY(-140%); opacity: 1; }
70%  { transform: translateY(6%);    opacity: 1; } /* slight overshoot */
100% { transform: translateY(0%);    opacity: 1; }
}

@keyframes heroPanelUp {
0%   { transform: translateY(120%); opacity: 1; }
70%  { transform: translateY(-2%);  opacity: 1; } /* tiny overshoot */
100% { transform: translateY(0%);   opacity: 1; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
.hero_sign_post_left,
.hero_sign_post_right,
.hero_sign_panel {
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
}

.css-selector {
background: linear-gradient(182deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.25), #d8f3ff);
background-size: 400% 400%;

-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;
}

@-webkit-keyframes AnimationName {
0%{background-position:50% 0%}
50%{background-position:51% 100%}
100%{background-position:50% 0%}
}
@-moz-keyframes AnimationName {
0%{background-position:50% 0%}
50%{background-position:51% 100%}
100%{background-position:50% 0%}
}
@keyframes AnimationName {
0%{background-position:50% 0%}
50%{background-position:51% 100%}
100%{background-position:50% 0%}
}


/* the inner face (the “turned” side of the post) */
.post_inner {
position: absolute;
top: 0;
bottom: 4px;
width: 12px;              /* thickness of the “side” */
background-image: url('../images/postadmin-wood-post-white.png');
background-size: cover;
background-repeat: no-repeat;
filter: brightness(.92) saturate(.95);
box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

/* left post: inner face is on the inside RIGHT */
.post_inner--right{
right: 0;             /* pushes it out toward the panel */
transform: skewY(-2deg);
transform-origin: left;
}

/* right post: inner face is on the inside LEFT */
.post_inner--left{
left: -0;
transform: skewY(2deg);
transform-origin: right;
}

/* add a subtle lighting gradient overlay so it reads 3D */
.hero_sign_post_left::after,
.hero_sign_post_right::after{
content:"";
position:absolute;
inset:0;
border-radius: 10px;
pointer-events:none;
background: linear-gradient(
to right,
rgba(0,0,0,.10),
rgba(255,255,255,.10) 35%,
rgba(0,0,0,.05)
);
mix-blend-mode: multiply;
opacity: .35;
}

/* inner face gets its own shading */
.post_inner::after{
content:"";
position:absolute;
inset:0;
border-radius: 8px;
pointer-events:none;
background: linear-gradient(
to right,
rgba(0,0,0,.18),
rgba(255,255,255,.10)
);
opacity: .45;
}

.hero_sign_panel_content {
position: relative;
z-index: 1;
width: 100%;
height: calc(100% - 220px);
text-align: center;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.hero_sign_panel_header {
opacity: 0.9;
padding: 0 20px;
}
.hero_sign_panel_header,
.hero_sign_panel_footer {
display: flex;
align-items: center;
justify-content: center;
background: var(--color_gray_550);
/* background: linear-gradient(to bottom left, var(--color_gray_500), var(--color_gray_550)); */
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
line-height: normal;
color: var(--color_gray_100);
top: 0;
left: 0;
width: 100%;
font-size: 28px;
font-weight: 600;
position: relative;
height: 120px;
margin: 0;
}
.hero_sign_panel_header_text {
display: block;
font-size: clamp(1.8rem, 5vw, 3.4rem);
}
.hero_sign_panel_header .hero_sign_panel_header_text,
.hero_sign_panel_content {
transition: opacity 500ms ease;
opacity: 0;
}
.hero_sign_panel_header.active .hero_sign_panel_header_text,
.hero_sign_panel_content.active {
opacity :1;
}
.hero_sign_panel_content:not(.active) .hero_cta_group {
display: none !important;
}

.hero_sign_panel_header_dot {
width: 8px;
height: 8px;
background: var(--color_blue_500);
border-radius: 50%;
animation: pulse_dot 2s ease infinite;
display: none;
}

.hero_sign_panel_header,
.hero_sign_panel_content {
opacity: 0;
/* display: none; */
visibility: hidden;
position: absolute;
}
.hero_sign_panel_header.active,
.hero_sign_panel_content.active {
opacity: 1;
display: flex;
visibility: visible;
position: relative;
}

.hero_sign_panel_footer {
height: 100px;
display: grid;
grid-template-columns: repeat(14, 1fr);
align-items: center;
align-content: center;
justify-items: center;
gap: 0;
padding: 0 40px;
}
.hero_sign_panel_footer .icon {
display: flex;              /* center SVG cleanly */
align-items: center;
justify-content: center;
width: 100%;
height: 32px;
cursor: pointer;
/* animation: iconWave 600ms ease-in-out forwards; */
transition: opacity 200ms ease;
opacity: 0.8;
position: relative;
transition: transform 180ms ease, filter 180ms ease;
}
.hero_sign_panel_footer:not(:hover) .icon {
animation: iconWave 600ms ease-in-out forwards;
}
.hero_sign_panel_footer:not(:hover) .icon:nth-child(1)  { animation-delay: 6s; }
.hero_sign_panel_footer:not(:hover) .icon:nth-child(2)  { animation-delay: 6.08s; }
.hero_sign_panel_footer:not(:hover) .icon:nth-child(3)  { animation-delay: 6.16s; }
.hero_sign_panel_footer:not(:hover) .icon:nth-child(4)  { animation-delay: 6.24s; }
.hero_sign_panel_footer:not(:hover) .icon:nth-child(5)  { animation-delay: 6.32s; }
.hero_sign_panel_footer:not(:hover) .icon:nth-child(6)  { animation-delay: 6.40s; }
.hero_sign_panel_footer:not(:hover) .icon:nth-child(7)  { animation-delay: 6.48s; }
.hero_sign_panel_footer:not(:hover) .icon:nth-child(8)  { animation-delay: 6.56s; }
.hero_sign_panel_footer:not(:hover) .icon:nth-child(9)  { animation-delay: 6.64s; }
.hero_sign_panel_footer:not(:hover) .icon:nth-child(10) { animation-delay: 6.72s; }
.hero_sign_panel_footer:not(:hover) .icon:nth-child(11) { animation-delay: 6.80s; }
.hero_sign_panel_footer:not(:hover) .icon:nth-child(12) { animation-delay: 6.88s; }
.hero_sign_panel_footer:not(:hover) .icon:nth-child(13) { animation-delay: 6.96s; }
.hero_sign_panel_footer:not(:hover) .icon:nth-child(14) { animation-delay: 7.04s; }


.hero_sign_panel_footer .icon:hover {
opacity: 0.95 !important;
}
.hero_sign_panel_footer .icon svg {
width: 100%;
height: 100%;
fill: var(--color_gray_50);
}
.hero_sign_panel_footer .icon svg.mobile {
position: relative !important;
transform: scale(1.2);
}
.hero_sign_panel_footer .icon.installer_app {
width: 26px;
height: 32px;
border-radius: 4px;
border: 3px solid var(--color_gray_50);
background-color: transparent;
}
.hero_sign_panel_footer .icon:hover {
transform: translateY(-2px);
filter: drop-shadow(0 0 6px rgba(255,255,255,0.35));
filter: drop-shadow(0 0 6px var(--color_gray_700));
fill: white;
}
@keyframes iconWave {
0%   { transform: translateY(0);opacity: 0.8; }
40%  { transform: translateY(-4px);opacity: 1; }
100% { transform: translateY(0);opacity: 0.8; }
}

@media (max-width: 900px) {
.hero_sign_panel_footer {
	grid-template-columns: repeat(7, 1fr);
	padding: 15px 40px;
}
.hero_sign_panel_footer .icon {
	height: 28px;
}
.hero_sign_panel_footer .icon:nth-last-child(-n+7) {
	margin-top: 15px;
}
}
@media (max-width: 720px) {
.hero_sign_panel_header {
	height: 100px;
}
.hero_sign_panel_content {
	height: calc(100% - 200px);
}
}
@media (max-width: 520px) {
.hero_sign_panel_header {
	padding: 10px;
}
.hero_sign_panel_content[data-feature="routes"] .hero_h1 br {
	display: none;
}
.hero_sign_panel_footer {
	padding: 15px;
}
.hero_sign_panel_footer .icon {
	height: 26px;
}
}
@media (max-width: 520px) {
.hero_sign_post_left {
	left: calc(50% - 30px);
}
.hero_sign_post_right {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.hero_sign_panel_screws {
	opacity: 0 !important;
}
}
#hero_backdrop_video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
display: none;
}

@keyframes pulse_dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.8); }
}

@keyframes fade_in {
from {
	opacity: 0;
}
to {
	opacity: 1;
}
}

.hero_h1 {
font-family: var(--font_display);
font-size: clamp(38px, 5.5vw, 56px);
font-weight: 800;
line-height: 1.2;
color: var(--color_gray_900);
letter-spacing: -1.5px;
margin-bottom: 20px;
}
.hero.animate .hero_h1 {
animation: fade_in_up 0.6s var(--ease_out) 0.2s both;
}

.hero_h1 .text_gradient {
background: linear-gradient(135deg, var(--color_blue_600), var(--color_blue_400));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.hero_sub {
font-size: clamp(17px, 2vw, 19px);
color: var(--color_gray_500);
line-height: 1.65;
max-width: 800px;
margin: 0 auto 40px;
}
.hero_sub .low_underscore {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--color_blue_600);
	text-decoration-skip-ink: none;
	text-underline-offset: 4px;
}
.hero_sub b {
	font-weight: 600;
}

.hero_cta_group {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.hero.animate .hero_cta_group {

animation: fade_in_up 0.6s var(--ease_out) 0.5s both;
animation: fade_in_up 0.6s var(--ease_out) 0.35s both;
opacity: 0;
/*  fade in animation  */
animation-name: fade_in;
animation-duration: 4s;
animation-timing-function: var(--ease_out);
animation-fill-mode: forwards;
animation-delay: 2s;
}

.hero_cta_row {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}

.cta_hint {
font-size: 12.5px;
color: var(--color_gray_400);
margin-top: -4px;
}

@keyframes fade_in_up {
from {
	opacity: 0;
	transform: translateY(16px);
}
to {
	opacity: 1;
	transform: translateY(0);
}
}

/* SECTIONS — SHARED */

.section {
padding: 140px 24px;
}

.section_inner {
max-width: var(--max_width);
margin: 0 auto;
}

.section_label {
display: inline-block;
font-family: var(--font_display);
font-size: 12.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--color_blue_600);
margin-bottom: 16px;
}

.section_h1 {
font-family: var(--font_display);
font-size: clamp(30px, 4vw, 42px);
font-weight: 800;
line-height: 1.15;
color: var(--color_gray_900);
letter-spacing: -1px;
margin-bottom: 14px;
}

.section_h2 {
font-size: clamp(16px, 1.8vw, 18px);
color: var(--color_gray_500);
line-height: 1.65;
/* max-width: 640px; */
}

.section_header_center {
text-align: center;
}

.section_header_center .section_h2 {
margin: 0 auto;
}

.section.pillars {
background: var(--color_gray_100);
border-bottom: 1px solid var(--color_gray_200);
border-top: 1px solid var(--color_gray_200);
}

/* PROBLEM STATEMENT */


.problem_content {
max-width: 800px;
margin: 0 auto;
text-align: center;
}

.problem_support {
font-size: 16px;
color: var(--color_gray_500);
line-height: 1.7;
margin-top: 20px;
}

/* PILLARS */

.pillars_grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 20px;
margin-top: 56px;
}

.pillar_card {
position: relative;
padding: 32px 28px;
background: var(--color_white);
border: 1px solid var(--color_gray_100);
border-radius: 16px;
transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
overflow: hidden;
}

.pillar_card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--color_blue_400), var(--color_blue_600));
opacity: 0;
transition: opacity 0.3s;
}

.pillar_card:hover {
border-color: var(--color_blue_200);
box-shadow: 0 8px 30px rgba(37, 99, 235, 0.06);
transform: translateY(-2px);
}

.pillar_card:hover::before {
opacity: 1;
}

.pillar_icon {
width: 44px;
height: 44px;
background: var(--color_blue_50);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}

.pillar_icon svg {
width: 22px;
height: 22px;
color: var(--color_blue_600);
}

.pillar_title {
font-family: var(--font_display);
font-size: 18px;
font-weight: 700;
color: var(--color_gray_900);
margin-bottom: 6px;
letter-spacing: -0.3px;
}

.pillar_tagline {
font-size: 14.5px;
font-weight: 500;
color: var(--color_blue_600);
margin-bottom: 12px;
}

.pillar_desc {
font-size: 14.5px;
color: var(--color_gray_500);
line-height: 1.65;
}

/* FINAL CTA */

.final_cta {
background: var(--color_gray_900);
position: relative;
overflow: hidden;
}

.final_cta_bg {
position: absolute;
inset: 0;
background:
	radial-gradient(ellipse at 20% 50%, rgba(59, 130, 246, 0.15) 0%, transparent 60%),
	radial-gradient(ellipse at 80% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 60%);
}

.final_cta_content {
position: relative;
text-align: center;
}

.final_cta .section_h1 {
color: var(--color_white);
}

.final_cta .section_h2 {
color: var(--color_gray_400);
margin: 0 auto 40px;
}

.final_cta .hero_cta_row {
justify-content: center;
}

.final_cta .btn_primary {
background: var(--color_blue_500);
}

.final_cta .btn_primary:hover {
background: var(--color_blue_400);
}

.final_cta .btn_secondary {
color: var(--color_gray_300);
background: transparent;
border-color: var(--color_gray_700);
}

.final_cta .btn_secondary:hover {
background: rgba(255, 255, 255, 0.05);
border-color: var(--color_gray_500);
color: var(--color_white);
}

.final_cta .btn_tertiary {
color: var(--color_gray_500);
border-bottom-color: var(--color_gray_600);
}

.final_cta .btn_tertiary:hover {
color: var(--color_blue_400);
border-bottom-color: var(--color_blue_500);
}

/* SCROLL ANIMATIONS */

.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s var(--ease_out), transform 0.6s var(--ease_out);
}

.reveal.visible {
opacity: 1;
transform: translateY(0);
}

.reveal_delay_1 { transition-delay: 0.1s; }
.reveal_delay_2 { transition-delay: 0.2s; }
.reveal_delay_3 { transition-delay: 0.3s; }
.reveal_delay_4 { transition-delay: 0.4s; }

/* MOBILE RESPONSIVE */
@media (max-width: 900px) {
.hero {
	padding: 130px 24px 80px;
	min-height: 680px;
}
}

@media (max-width: 600px) {
	.hero_cta_row {
		flex-direction: column;
		align-items: center;
	}
	.btn_primary, .btn_secondary {
		width: 100%;
		justify-content: center;
		/* max-width: 300px; */
	}
	.pillars_grid {
		grid-template-columns: 1fr;
}

@media (max-width: 520px) {
	.hero_sign_complete {
		height: calc(100% - 220px);
	}
	.hero_sign_panel_header {
		height: 80px;
	}
	.hero_sign_panel_content {
		height: calc(100% - 180px);
	}
	.hero_sign_panel_header_text {
		font-size: 24px;
	}
	.hero_sub {
		font-size: 15px;
	}
	.hero_h1 {
		font-size: 36px;
	}
	.hero_cta_group {
		gap: 8px;
	}
	.cta_hint {
		font-size: 11px;
	}
	.hero_sign_panel_content:not([data-feature="default"]) .hero_h1 {
		flex: 1;
		align-items: center;
		align-content: center;
	}
	.hero_sign_panel_content:not([data-feature="default"]) .hero_sub {
		display: flex;
		flex: 1;
		gap: 0;
		flex-direction: column;
		align-items: flex-start;
	}
}
}