/* ==========================================================================
   TemporaryMail.com — homepage visual layer
   --------------------------------------------------------------------------
   Everything here is scoped to `body.home-v2`, which is set only on index.php.
   Removing that class (or the <link> in index.php) reverts the homepage to
   its previous appearance without touching main.css.
   ========================================================================== */


body.home-v2 .fullPage{
	padding-top: 12px;
}

/* Rhythm between the big blocks. */
body.home-v2 .spacer-hr{
	padding-top: 46px;
	padding-bottom: 46px;
}

@media (max-width: 767px){
	body.home-v2 .spacer-hr{
		padding-top: 30px;
		padding-bottom: 30px;
	}
}


/* ==========================================================================
   3. Hero
   --------------------------------------------------------------------------
   Sits BELOW the inbox — the inbox is the primary landing element, so this
   block introduces the service to people who scroll rather than heading it.
   Entrance animations are gated behind `.is-revealed` (added by the observer
   in index.php) so they play on scroll; without JS the content is simply
   visible, never stuck at opacity 0.
   ========================================================================== */

.tm-hero{

	position: relative;
	text-align: center;
	padding: 8px 16px 4px;
	max-width: 780px;
	margin: 0 auto;

}

@media (max-width: 767px){
	.tm-hero{ padding: 4px 12px 2px; }
}

.tm-hero.is-revealed .tm-hero-title{ animation: tm-rise 0.7s var(--tm-ease) 0.08s both; }
.tm-hero.is-revealed .tm-hero-sub{   animation: tm-rise 0.7s var(--tm-ease) 0.16s both; }
.tm-hero.is-revealed .tm-trust{      animation: tm-rise 0.7s var(--tm-ease) 0.24s both; }


.tm-hero-title{

	margin: 18px 0 0;
	font-size: clamp(2.5rem, 7vw, 4.25rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.035em;
	background: var(--tm-text-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;

}

/* main.css forces a colour on headings in dark mode — keep the gradient. */
body.home-v2.dark-mode .tm-hero-title{
	color: transparent !important;
}

.tm-hero-sub{

	margin: 14px auto 0;
	max-width: 34em;
	font-size: clamp(1rem, 2.1vw, 1.2rem);
	line-height: 1.6;
	font-weight: 400;
	color: var(--tm-muted);

}

@keyframes tm-rise{
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

/* -- Trust chips ----------------------------------------------------------- */

.tm-trust{

	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 26px 0 0;
	padding: 0;

}

.tm-trust li{

	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 999px;
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--tm-ink-soft);
	background: var(--tm-surface);
	border: 1px solid var(--tm-hairline);
	box-shadow: var(--tm-shadow-sm);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: transform 0.28s var(--tm-ease), border-color 0.28s ease, box-shadow 0.28s ease, color 0.28s ease;

}

.tm-trust li:hover{

	transform: translateY(-3px);
	color: var(--tm-ink);
	border-color: rgba(31, 182, 255, 0.38);
	box-shadow: 0 12px 26px -14px rgba(31, 120, 255, 0.55);

}

.tm-trust svg{

	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--tm-accent);

}

@media (max-width: 480px){

	.tm-trust{ gap: 8px; }

	.tm-trust li{
		padding: 7px 12px;
		font-size: 0.78rem;
	}

}


/* ==========================================================================
   4. The inbox card
   ========================================================================== */

/* #emailBox is animated by engine.js via transform, so nothing here may set
   a transform on it — depth is carried by shadow and the gradient ring. */

body.home-v2 #emailBox,
body.home-v2 .messageBox{

	border-radius: var(--tm-radius) !important;
	border: 1px solid var(--tm-hairline) !important;
	background: var(--tm-surface) !important;
	backdrop-filter: blur(18px) saturate(150%);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	box-shadow: var(--tm-shadow-lg) !important;
	transition: box-shadow 0.4s var(--tm-ease),
	            opacity 220ms ease,
	            transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);

}

body.home-v2 #emailBox:hover,
body.home-v2 .messageBox:hover{

	box-shadow:
		0 46px 92px -36px rgba(31, 120, 255, 0.55),
		0 14px 34px -16px rgba(15, 23, 42, 0.20) !important;

}

body.home-v2.dark-mode #emailBox:hover,
body.home-v2.dark-mode .messageBox:hover{

	box-shadow:
		0 46px 92px -36px rgba(77, 208, 255, 0.42),
		0 14px 34px -16px rgba(0, 0, 0, 0.60) !important;

}

/* Gradient hairline ring.
   Guarded by @supports: without mask compositing this pseudo-element would
   paint as a solid gradient across the whole card instead of a 1px border. */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)){

	body.home-v2 #emailBox::after,
	body.home-v2 .messageBox::after{

		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		padding: 1px;
		background: var(--tm-ring);
		-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		-webkit-mask-composite: xor;
		mask-composite: exclude;
		pointer-events: none;
		z-index: 4;

	}

}

/* -- Card header ----------------------------------------------------------- */

body.home-v2 #emailBox > .card-header{

	background:
		radial-gradient(120% 130% at 50% -30%, rgba(31, 182, 255, 0.16), transparent 62%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
	border-bottom: 1px solid var(--tm-hairline);

}

body.home-v2.dark-mode #emailBox > .card-header{

	background:
		radial-gradient(120% 130% at 50% -30%, rgba(77, 208, 255, 0.18), transparent 62%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));

}

body.home-v2 .sendEmailsTo{

	display: block;
	font-size: 0.76rem !important;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.55;
	padding-bottom: 2px;

}

body.home-v2 #emailAddress{

	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--tm-ink);
	cursor: pointer;

}

body.home-v2.dark-mode #emailAddress{
	color: var(--tm-ink);
}

body.home-v2 .emailInput{

	position: relative;
	margin-top: -4px;
	padding: 6px 10px 10px;

}

/* -- Action buttons -------------------------------------------------------- */

body.home-v2 .menuButton button{

	background: linear-gradient(100deg, #1FB6FF 0%, #3B82F6 46%, #6C5CFF 100%);
	background-size: 180% auto;
	box-shadow: none !important;
	border: none;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-shadow: 0 1px 2px rgba(8, 20, 60, 0.28);
	transition: background-position 0.55s var(--tm-ease), filter 0.3s ease;

}

body.home-v2 .menuButton div + div button{
	border-left: 1px solid rgba(255, 255, 255, 0.16);
}

body.home-v2 .menuButton button:hover{

	background-position: right center;
	filter: brightness(1.08);
	transform: none;

}

body.home-v2 .menuButton button:active{
	filter: brightness(0.96);
}

body.home-v2 .menuButton button:focus-visible{
	outline: 2px solid #FFFFFF;
	outline-offset: -4px;
}

/* -- Inbox list ------------------------------------------------------------ */

body.home-v2 .inboxHeader{

	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 0.74rem;
	opacity: 0.55;

}

body.home-v2 .openMessage{

	border-radius: var(--tm-radius-sm);
	transition: background 0.25s ease, transform 0.25s var(--tm-ease);

}

body.home-v2 .openMessage:hover{

	background: rgba(31, 182, 255, 0.07);
	transform: translateX(3px);

}

/* -- Extension offer ------------------------------------------------------- */

body.home-v2 .extension-offer-btn{

	border-radius: 999px;
	transition: transform 0.28s var(--tm-ease), box-shadow 0.28s ease;

}

body.home-v2 .extension-offer-btn:hover{

	transform: translateY(-2px);
	box-shadow: 0 12px 26px -14px rgba(31, 120, 255, 0.6);

}


/* ==========================================================================
   5. Section headings
   ========================================================================== */

body.home-v2 .indexInfo h2{

	font-size: clamp(1.7rem, 3.6vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.028em;
	line-height: 1.15;
	color: var(--tm-ink);

}

body.home-v2.dark-mode .indexInfo h2{
	color: var(--tm-ink) !important;
}

body.home-v2 .howItWorksContainer > p,
body.home-v2 .underHeader{

	color: var(--tm-muted);
	font-size: 1rem;
	max-width: 44em;
	margin-left: auto;
	margin-right: auto;
	text-align: center;

}

/* The lead paragraph that still sits under the inbox. */
body.home-v2 .info-header{

	max-width: 660px;
	margin: 4px auto 0;

}

body.home-v2 .info-header .lead{

	font-size: 1rem;
	line-height: 1.7;
	color: var(--tm-muted);
	margin: 0;

}


/* ==========================================================================
   6. How it works — numbered timeline
   ========================================================================== */

body.home-v2 .howItWorksChild{

	margin-top: 42px;
	gap: 8px;

}

body.home-v2 .howItWorksChild > div{

	position: relative;
	padding: 26px 18px 22px !important;
	border-radius: var(--tm-radius) !important;
	border: 1px solid transparent;
	counter-increment: tm-step;

}

/* Connecting line behind the steps (desktop only). */
body.home-v2 .howItWorksChild::before{

	content: "";
	position: absolute;
	top: 52px;
	left: 12%;
	right: 12%;
	height: 2px;
	background: linear-gradient(90deg,
		transparent,
		rgba(31, 182, 255, 0.35) 12%,
		rgba(108, 92, 255, 0.35) 50%,
		rgba(31, 182, 255, 0.35) 88%,
		transparent);
	z-index: 0;

}

@media (max-width: 768px){
	body.home-v2 .howItWorksChild::before{ display: none; }
}

body.home-v2 .howItWorksChild > div > *{
	position: relative;
	z-index: 1;
}

body.home-v2 .howItWorksChild img{

	height: 84px;
	filter: drop-shadow(0 12px 20px rgba(31, 120, 255, 0.20));

}

/* Number badge. */
body.home-v2 .howItWorksChild > div::before{

	content: counter(tm-step);
	position: absolute;
	top: 14px;
	left: 50%;
	transform: translateX(-50%);
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	font-size: 0.82rem;
	font-weight: 800;
	color: #FFFFFF;
	background: linear-gradient(135deg, #1FB6FF, #6C5CFF);
	box-shadow: 0 8px 18px -8px rgba(31, 120, 255, 0.85);
	z-index: 2;
	opacity: 0;
	transition: opacity 0.5s ease 0.2s;

}

body.home-v2 .howItWorksChild.is-revealed > div::before{
	opacity: 1;
}

body.home-v2 .howItWorksChild{
	counter-reset: tm-step;
}

/* Push the artwork clear of the number badge. */
body.home-v2 .howItWorksChild > div img{
	margin-top: 22px;
}

body.home-v2 .howItWorksChild h3{

	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	margin-top: 14px;
	color: var(--tm-ink);

}

body.home-v2.dark-mode .howItWorksChild h3{
	color: var(--tm-ink) !important;
}

body.home-v2 .howItWorksChild p{

	color: var(--tm-muted);
	font-size: 0.88rem;

}

/* Hover — overrides the inline rules in index.php via higher specificity. */
body.home-v2 .howItWorksChild > div:hover{

	background: var(--tm-surface);
	border-color: rgba(31, 182, 255, 0.28);
	box-shadow: var(--tm-shadow);
	transform: translateY(-6px);

}

body.home-v2.dark-mode .howItWorksChild > div:hover{

	background: var(--tm-surface);
	border-color: rgba(77, 208, 255, 0.30);
	box-shadow: var(--tm-shadow);

}


/* ==========================================================================
   7. Feature cards
   ========================================================================== */

body.home-v2 .grid-3-to-1{
	gap: 20px;
}

body.home-v2 .card-special{

	border-radius: var(--tm-radius);
	padding: 26px 20px 24px;
	background: var(--tm-surface);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	box-shadow: var(--tm-shadow-sm), 0 0 0 1px var(--tm-hairline);
	transition: transform 0.4s var(--tm-ease), box-shadow 0.4s var(--tm-ease);
	overflow: hidden;

}

body.home-v2 .card-special::before{
	border-radius: var(--tm-radius);
}

/* Cursor spotlight — coordinates supplied by the inline script in index.php. */
body.home-v2 .card-special .tm-spotlight{

	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	z-index: 1;
	background: radial-gradient(320px circle at var(--tm-mx, 50%) var(--tm-my, 50%),
		rgba(31, 182, 255, 0.16), transparent 62%);
	transition: opacity 0.35s ease;

}

body.home-v2 .card-special:hover .tm-spotlight{
	opacity: 1;
}

body.home-v2.dark-mode .card-special .tm-spotlight{
	background: radial-gradient(320px circle at var(--tm-mx, 50%) var(--tm-my, 50%),
		rgba(77, 208, 255, 0.20), transparent 62%);
}

body.home-v2 .card-special h4{

	font-size: 1.06rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	margin-top: 16px;
	color: var(--tm-ink);

}

body.home-v2.dark-mode .card-special h4{
	color: var(--tm-ink) !important;
}

body.home-v2 .card-special p{

	color: var(--tm-muted);
	font-size: 0.9rem;
	line-height: 1.6;
	position: relative;
	z-index: 2;

}

body.home-v2 .card-special .icon img{

	width: 46px;
	height: 46px;

}

body.home-v2 .grid-3-to-1 .card-special:hover{

	transform: translateY(-8px);
	box-shadow:
		0 30px 60px -28px rgba(31, 120, 255, 0.50),
		0 8px 20px -12px rgba(15, 23, 42, 0.14),
		0 0 0 1px rgba(31, 182, 255, 0.32);

}

body.home-v2.dark-mode .grid-3-to-1 .card-special:hover{

	box-shadow:
		0 30px 60px -28px rgba(77, 208, 255, 0.40),
		0 8px 20px -12px rgba(0, 0, 0, 0.55),
		0 0 0 1px rgba(77, 208, 255, 0.36);

}

@media (max-width: 767px){

	body.home-v2 .grid-3-to-1{ gap: 14px; }

	body.home-v2 .card-special{ padding: 22px 18px; }

}


/* ==========================================================================
   8. IP security card
   ========================================================================== */

body.home-v2 .ipScoreCard{
	max-width: 760px;
}

body.home-v2 .ipScoreCard-inner{

	position: relative;
	border-radius: var(--tm-radius);
	padding: 32px 28px;
	background: var(--tm-surface);
	backdrop-filter: blur(18px) saturate(150%);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	border: 1px solid var(--tm-hairline);
	box-shadow: var(--tm-shadow);
	overflow: hidden;

}

body.home-v2.dark-mode .ipScoreCard-inner{

	background: var(--tm-surface);
	border-color: var(--tm-hairline);
	box-shadow: var(--tm-shadow);

}

/* Accent bar along the top edge. */
body.home-v2 .ipScoreCard-inner::before{

	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #1FB6FF, #6C5CFF 52%, #00D2B4);

}

body.home-v2 .ipScoreCard-icon{

	width: 42px;
	height: 42px;
	padding: 9px;
	border-radius: 13px;
	color: #FFFFFF;
	background: linear-gradient(135deg, #1FB6FF, #6C5CFF);
	box-shadow: 0 10px 22px -10px rgba(31, 120, 255, 0.9);

}

body.home-v2 .ipScoreCard-title{

	font-size: 1.22rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--tm-ink);

}

body.home-v2.dark-mode .ipScoreCard-title{
	color: var(--tm-ink) !important;
}

body.home-v2 .ipScoreCard-stat{

	padding: 14px 16px;
	border-radius: var(--tm-radius-sm);
	background: rgba(15, 23, 42, 0.03);
	border: 1px solid var(--tm-hairline);
	transition: border-color 0.25s ease, background 0.25s ease;

}

body.home-v2.dark-mode .ipScoreCard-stat{
	background: rgba(255, 255, 255, 0.035);
}

body.home-v2 .ipScoreCard-stat:hover{
	border-color: rgba(31, 182, 255, 0.30);
}

body.home-v2 .ipScoreCard-value{

	font-size: 1rem;
	font-weight: 600;
	color: var(--tm-ink);

}

body.home-v2 .ipScoreCard-badge{

	border-radius: 999px;
	padding: 7px 14px;
	font-weight: 600;
	font-size: 0.82rem;

}

@media (max-width: 767px){
	body.home-v2 .ipScoreCard-inner{ padding: 24px 18px; }
}


/* ==========================================================================
   9. FAQ
   ========================================================================== */

body.home-v2 #faqAccordion .accordion-item{

	border-radius: var(--tm-radius) !important;
	background: var(--tm-surface);
	border: 1px solid var(--tm-hairline);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: var(--tm-shadow-sm);
	margin-bottom: 14px;
	transition: transform 0.3s var(--tm-ease), box-shadow 0.3s ease, border-color 0.3s ease;

}

body.home-v2 #faqAccordion .accordion-item:hover{

	transform: translateY(-2px);
	border-color: rgba(31, 182, 255, 0.30);
	box-shadow: 0 16px 34px -20px rgba(31, 120, 255, 0.55);

}

body.home-v2 #faqAccordion .accordion-item:has(.accordion-button:not(.collapsed)){

	border-color: rgba(31, 182, 255, 0.38);
	box-shadow: 0 20px 40px -24px rgba(31, 120, 255, 0.60);

}

body.home-v2 #faqAccordion .accordion-button{

	padding: 20px 24px;
	font-size: 1.02rem;
	font-weight: 650;
	letter-spacing: -0.01em;
	border-radius: var(--tm-radius) !important;
	color: var(--tm-ink);

}

body.home-v2.dark-mode #faqAccordion .accordion-button{
	color: var(--tm-ink);
}

body.home-v2 #faqAccordion .accordion-button:not(.collapsed){

	background: linear-gradient(90deg, rgba(31, 182, 255, 0.09), rgba(108, 92, 255, 0.05)) !important;
	color: var(--tm-accent);

}

body.home-v2 #faqAccordion .accordion-body{

	font-size: 0.96rem;
	line-height: 1.7;
	color: var(--tm-muted);
	padding: 2px 24px 22px;

}

@media (max-width: 767px){

	body.home-v2 #faqAccordion .accordion-button{
		padding: 17px 18px;
		font-size: 0.95rem;
	}

	body.home-v2 #faqAccordion .accordion-body{
		padding: 2px 18px 18px;
	}

}


/* ==========================================================================
   10. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce){

	.tm-hero-title,
	.tm-hero-sub,
	.tm-trust{
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	body.home-v2 .tm-trust li:hover,
	body.home-v2 .howItWorksChild > div:hover,
	body.home-v2 .grid-3-to-1 .card-special:hover,
	body.home-v2 #faqAccordion .accordion-item:hover,
	body.home-v2 .openMessage:hover,
	body.home-v2 .extension-offer-btn:hover{
		transform: none !important;
	}

}