:root {
	--tc-primary: #22CC71;
	--tc-yellow: #FAC430;
	--tc-coral: #FF7F50;
	--tc-charcoal: #1E2A2F;
	--tc-cream: #F6F9F7;
	--tc-white: #fff;
	--tc-shadow: 0 24px 70px rgba(30, 42, 47, 0.18);
	--tc-radius: 8px;
	--tc-gutter: clamp(18px, 4vw, 64px);
	--tc-max: 1180px;
	--tc-header: 78px;
	font-size: 16px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--tc-cream);
	color: var(--tc-charcoal);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	overflow-x: hidden;
}

body.tc-menu-open {
	overflow: hidden;
}

img,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

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

button,
input {
	font: inherit;
}

:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--tc-primary) 72%, white);
	outline-offset: 4px;
}

.screen-reader-text,
.skip-link {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	z-index: 99999;
	top: 16px;
	left: 16px;
	width: auto;
	height: auto;
	padding: 12px 18px;
	clip: auto;
	background: var(--tc-charcoal);
	color: white;
}

.tc-container {
	width: min(100% - (var(--tc-gutter) * 2), var(--tc-max));
	margin-inline: auto;
}

.tc-site-header {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	right: 0;
	height: var(--tc-header);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-inline: var(--tc-gutter);
	background: rgba(246, 249, 247, 0.72);
	backdrop-filter: blur(18px);
	border-bottom: 1px solid rgba(30, 42, 47, 0.08);
	transition: transform 300ms ease, background 300ms ease;
}

.tc-site-header.is-scrolled {
	background: rgba(255, 255, 255, 0.88);
	box-shadow: 0 12px 35px rgba(30, 42, 47, 0.08);
}

.tc-brand {
	display: inline-flex;
	align-items: center;
	min-width: 138px;
}

.tc-brand img,
.tc-brand__logo {
	width: clamp(126px, 12vw, 178px);
	height: auto;
}

.tc-nav ul {
	display: flex;
	gap: clamp(16px, 2.2vw, 34px);
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
}

.tc-nav a {
	position: relative;
	display: inline-flex;
	padding-block: 8px;
	font-size: 0.9rem;
	font-weight: 800;
	letter-spacing: 0.04em;
}

.tc-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--tc-primary), var(--tc-yellow));
	transition: right 260ms ease;
}

.tc-nav a:hover::after,
.tc-nav a:focus-visible::after {
	right: 0;
}

.tc-header-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	border-radius: 999px;
	background: var(--tc-charcoal);
	color: white;
	font-weight: 900;
	font-size: 0.9rem;
	box-shadow: 0 10px 28px rgba(30, 42, 47, 0.18);
}

.tc-menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 999px;
	background: var(--tc-white);
	box-shadow: 0 8px 22px rgba(30, 42, 47, 0.12);
}

.tc-menu-toggle span:not(.screen-reader-text) {
	display: block;
	width: 18px;
	height: 2px;
	margin: 4px auto;
	background: var(--tc-charcoal);
	transition: transform 240ms ease, opacity 240ms ease;
}

.tc-main {
	position: relative;
	background: var(--tc-cream);
}

.tc-loader {
	position: fixed;
	z-index: 5000;
	inset: 0;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, #eaf9ff 0%, #fbfff9 48%, #e8fff1 100%);
	overflow: hidden;
}

.tc-loader.is-hidden {
	pointer-events: none;
	visibility: hidden;
}

.tc-loader__glass {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 50% 50%, rgba(255,255,255,0.92) 0 16%, rgba(255,255,255,0.18) 25%, transparent 40%),
		url("../images/condensation-glass.png") center/cover;
	filter: saturate(1.05);
	clip-path: circle(10% at 50% 50%);
}

.tc-loader__logo {
	position: relative;
	width: min(64vw, 440px);
	filter: blur(2px);
	opacity: 0.92;
}

.tc-loader__drop {
	position: absolute;
	top: 28%;
	left: 48%;
	width: 20px;
	height: 34px;
	border-radius: 60% 60% 70% 70%;
	background: linear-gradient(140deg, rgba(255,255,255,0.8), rgba(59,179,225,0.2));
	box-shadow: inset -4px -6px 12px rgba(30, 42, 47, 0.12), 0 12px 26px rgba(30, 42, 47, 0.12);
}

.tc-loader__progress {
	position: absolute;
	bottom: 18vh;
	width: min(340px, 72vw);
	height: 10px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(30, 42, 47, 0.11);
}

.tc-loader__progress span {
	display: block;
	width: 100%;
	height: 100%;
	transform-origin: left center;
	transform: scaleX(0);
	background: linear-gradient(90deg, var(--tc-primary), var(--tc-yellow), var(--tc-coral));
	border-radius: inherit;
}

.tc-loader__skip {
	position: absolute;
	right: 24px;
	bottom: 24px;
	border: 0;
	background: rgba(30, 42, 47, 0.82);
	color: white;
	padding: 10px 14px;
	border-radius: 999px;
	font-weight: 800;
	cursor: pointer;
}

.tc-scene {
	position: relative;
	min-height: 100svh;
	overflow: clip;
	isolation: isolate;
}

.tc-hero {
	display: grid;
	align-items: center;
	padding-top: var(--tc-header);
	background: #dff9ff;
	perspective: 1200px;
}

.tc-hero__background,
.tc-hero__props {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.tc-layer {
	position: absolute;
	object-fit: cover;
	user-select: none;
}

.tc-layer--back {
	inset: 0;
	width: 100%;
	height: 100%;
	filter: saturate(1.12) brightness(1.04);
}

.tc-layer--video {
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: screen;
	opacity: 0.26;
}

.tc-layer--ingredients {
	width: min(62vw, 720px);
	right: -10vw;
	top: 9vh;
	opacity: 0.75;
	filter: drop-shadow(0 24px 45px rgba(30, 42, 47, 0.16));
	transform: translateZ(160px) rotate(-8deg);
}

.tc-layer--splash {
	width: min(48vw, 620px);
	left: 3vw;
	bottom: -10vh;
	opacity: 0.66;
	mix-blend-mode: multiply;
}

.tc-particle-canvas-wrap {
	position: absolute;
	inset: 0;
	opacity: 0.55;
}

.tc-particle-canvas-wrap canvas {
	width: 100%;
	height: 100%;
}

.tc-hero__content {
	position: relative;
	z-index: 3;
	max-width: 620px;
	margin-left: var(--tc-gutter);
	padding-block: 12vh;
}

.tc-scene-copy h1,
.tc-hero h1,
.tc-scene-copy h2,
.tc-faq h2 {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 900;
	line-height: 0.94;
	letter-spacing: 0;
	color: var(--tc-charcoal);
}

.tc-hero h1 {
	font-size: clamp(4rem, 8.8vw, 8.9rem);
	max-width: 8ch;
	text-wrap: balance;
	text-shadow: 0 8px 28px rgba(255,255,255,0.55);
}

.tc-hero p,
.tc-scene-copy p {
	max-width: 620px;
	margin: 24px 0 0;
	font-size: clamp(1.05rem, 1.4vw, 1.32rem);
	line-height: 1.62;
	font-weight: 650;
	color: rgba(30, 42, 47, 0.82);
}

.tc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	margin-top: 32px;
}

.tc-button {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 24px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-weight: 950;
	letter-spacing: 0.01em;
	cursor: pointer;
}

.tc-button--primary {
	background: linear-gradient(135deg, var(--tc-primary), #19a85b);
	color: white;
	box-shadow: 0 18px 40px rgba(34, 204, 113, 0.34);
}

.tc-button--ghost {
	background: rgba(255, 255, 255, 0.76);
	color: var(--tc-charcoal);
	border-color: rgba(30, 42, 47, 0.13);
	backdrop-filter: blur(12px);
}

.tc-ripple {
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.52);
	transform: translate(-50%, -50%) scale(0);
	animation: tc-ripple 620ms ease-out forwards;
	z-index: -1;
}

@keyframes tc-ripple {
	to {
		transform: translate(-50%, -50%) scale(18);
		opacity: 0;
	}
}

.tc-product-traveller {
	position: fixed;
	z-index: 24;
	top: 50%;
	left: 57%;
	width: min(23vw, 280px);
	min-width: 176px;
	aspect-ratio: 0.72;
	pointer-events: none;
	transform: translate3d(-50%, -50%, 0);
	transform-style: preserve-3d;
	will-change: transform, opacity;
}

.tc-product-traveller__bottle {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 30px 42px rgba(30, 42, 47, 0.24));
}

.tc-product-traveller__cap {
	position: absolute;
	top: -4%;
	left: 19%;
	width: 62%;
	opacity: 0;
	transform-origin: center;
	filter: drop-shadow(0 16px 22px rgba(30, 42, 47, 0.18));
}

.tc-product-traveller__light {
	position: absolute;
	z-index: 2;
	top: 4%;
	left: 18%;
	width: 20%;
	height: 75%;
	border-radius: 999px;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
	filter: blur(8px);
	opacity: 0.55;
	mix-blend-mode: screen;
	transform: skewX(-10deg);
}

.tc-scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 28px;
	width: 28px;
	height: 48px;
	border: 2px solid rgba(30, 42, 47, 0.38);
	border-radius: 999px;
	transform: translateX(-50%);
}

.tc-scroll-cue span {
	position: absolute;
	top: 9px;
	left: 50%;
	width: 4px;
	height: 9px;
	border-radius: 999px;
	background: var(--tc-charcoal);
	transform: translateX(-50%);
	animation: tc-cue 1.5s ease-in-out infinite;
}

@keyframes tc-cue {
	50% { transform: translate(-50%, 13px); opacity: 0.35; }
}

.tc-pin-stage {
	position: relative;
	min-height: 120svh;
	display: grid;
	place-items: center;
	background: radial-gradient(circle at 50% 30%, rgba(250,196,48,0.36), transparent 34%), linear-gradient(180deg, #effff7 0%, #d4ffe6 100%);
}

.tc-open__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.2;
	mix-blend-mode: screen;
}

.tc-splash-burst {
	width: min(64vw, 760px);
	aspect-ratio: 1;
	border: 24px solid rgba(255,255,255,0.62);
	border-radius: 50%;
	filter: blur(1px) drop-shadow(0 20px 50px rgba(34, 204, 113, 0.18));
	transform: scale(0.35);
	opacity: 0;
}

.tc-open__copy,
.tc-flow__copy,
.tc-glass__copy,
.tc-final__copy {
	position: relative;
	z-index: 4;
	text-align: center;
}

.tc-scene-copy h2,
.tc-faq h2 {
	font-size: clamp(3rem, 7vw, 7.6rem);
	text-wrap: balance;
}

.tc-flow {
	display: grid;
	place-items: center;
	min-height: 130svh;
	background: linear-gradient(180deg, #d4ffe6 0%, #fff8d9 42%, #fff 100%);
}

.tc-flow__mask {
	position: absolute;
	inset: auto 0 0;
	height: 54%;
	background: linear-gradient(180deg, rgba(250,196,48,0), rgba(250,196,48,0.88));
	clip-path: ellipse(24% 0% at 50% 0%);
}

.tc-flow__pour {
	position: absolute;
	z-index: 2;
	top: 0;
	right: -5vw;
	width: min(54vw, 720px);
	pointer-events: none;
}

.tc-flow__bottle,
.tc-flow__video {
	width: 100%;
	filter: drop-shadow(0 26px 46px rgba(30, 42, 47, 0.14));
}

.tc-flow__video {
	position: absolute;
	inset: 0;
	object-fit: contain;
	mix-blend-mode: multiply;
	opacity: 0.34;
}

.tc-flow__fallback {
	position: absolute;
	left: 7%;
	top: 22%;
	width: 42%;
	height: 78%;
	overflow: visible;
}

.tc-flow__fallback path {
	fill: none;
	stroke: var(--tc-yellow);
	stroke-width: 36;
	stroke-linecap: round;
	filter: drop-shadow(0 16px 12px rgba(250,196,48,0.24));
}

.tc-ingredients {
	padding: 14vh 0;
	background: linear-gradient(180deg, #fff 0%, #f3fff8 100%);
}

.tc-ingredients__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr);
	gap: clamp(28px, 6vw, 88px);
	align-items: center;
}

.tc-depth-composition {
	position: relative;
	min-height: 620px;
	perspective: 1200px;
}

.tc-depth {
	position: absolute;
	object-fit: contain;
	filter: drop-shadow(0 28px 52px rgba(30, 42, 47, 0.16));
	will-change: transform;
}

.tc-depth--back {
	inset: 7% 0 auto auto;
	width: 78%;
	opacity: 0.75;
	transform: translateZ(-140px) rotate(8deg);
}

.tc-depth--product {
	left: 26%;
	top: 8%;
	width: 45%;
	z-index: 2;
}

.tc-depth--front {
	left: 0;
	bottom: 0;
	width: 60%;
	z-index: 3;
}

.tc-benefits {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin-top: 24px;
}

.tc-benefit-card {
	min-height: 138px;
	padding: 22px;
	border-radius: var(--tc-radius);
	background: rgba(255,255,255,0.78);
	border: 1px solid rgba(30, 42, 47, 0.08);
	box-shadow: 0 20px 44px rgba(30, 42, 47, 0.07);
	transition: transform 240ms ease, box-shadow 240ms ease;
}

.tc-benefit-card:hover {
	transform: translateY(-8px) rotateX(4deg);
	box-shadow: var(--tc-shadow);
}

.tc-benefit-card span {
	display: block;
	width: 32px;
	height: 32px;
	margin-bottom: 18px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, white, var(--tc-primary));
	box-shadow: 0 10px 20px rgba(34,204,113,0.24);
}

.tc-benefit-card h3 {
	margin: 0;
	font-size: clamp(1.2rem, 1.8vw, 1.65rem);
	line-height: 1.1;
}

.tc-glass {
	display: grid;
	place-items: center;
	background: #e7fbff;
}

.tc-glass__bg,
.tc-glass__condensation {
	position: absolute;
	inset: 0;
}

.tc-glass__beach,
.tc-glass__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tc-glass__video {
	position: absolute;
	inset: 0;
	opacity: 0.26;
	mix-blend-mode: screen;
}

.tc-glass__condensation {
	z-index: 2;
	background: url("../images/condensation-glass.png") center/cover;
	-webkit-mask-image: radial-gradient(circle at var(--wipe-x, 50%) var(--wipe-y, 50%), transparent 0 13%, #000 24%);
	mask-image: radial-gradient(circle at var(--wipe-x, 50%) var(--wipe-y, 50%), transparent 0 13%, #000 24%);
}

.tc-glass__copy {
	width: min(820px, calc(100% - var(--tc-gutter) * 2));
	padding: clamp(28px, 5vw, 58px);
	border-radius: var(--tc-radius);
	background: rgba(246,249,247,0.78);
	backdrop-filter: blur(14px);
}

.tc-viewer {
	padding: 12vh 0;
	background: linear-gradient(180deg, #f3fff8, #fff);
}

.tc-viewer__grid,
.tc-order__grid {
	display: grid;
	grid-template-columns: minmax(280px, 0.82fr) minmax(320px, 1fr);
	align-items: center;
	gap: clamp(32px, 7vw, 96px);
}

.tc-product-viewer {
	position: relative;
}

.tc-product-viewer__stage {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 660px;
	border-radius: var(--tc-radius);
	background:
		radial-gradient(circle at 50% 44%, rgba(250,196,48,0.24), transparent 36%),
		linear-gradient(135deg, white, #e9fff2);
	box-shadow: var(--tc-shadow);
	overflow: hidden;
	touch-action: pan-y;
}

.tc-product-viewer__stage.is-zoomed img {
	transform: scale(1.35);
	cursor: zoom-out;
}

.tc-product-viewer__stage img {
	max-height: 590px;
	width: auto;
	transition: transform 280ms ease, opacity 180ms ease;
	cursor: grab;
	user-select: none;
}

.tc-hotspot {
	position: absolute;
	width: 26px;
	height: 26px;
	border: 2px solid white;
	border-radius: 50%;
	background: var(--tc-coral);
	box-shadow: 0 0 0 0 rgba(255,127,80,0.5);
	animation: tc-pulse 1.8s ease-out infinite;
	cursor: pointer;
}

.tc-hotspot--label {
	top: 52%;
	left: 52%;
}

.tc-hotspot--cap {
	top: 19%;
	left: 53%;
}

@keyframes tc-pulse {
	70% { box-shadow: 0 0 0 16px rgba(255,127,80,0); }
	100% { box-shadow: 0 0 0 0 rgba(255,127,80,0); }
}

.tc-product-viewer__controls {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 16px;
}

.tc-product-viewer__controls button,
.tc-quantity button {
	min-width: 46px;
	min-height: 46px;
	border: 0;
	border-radius: 999px;
	background: var(--tc-charcoal);
	color: white;
	font-weight: 900;
	cursor: pointer;
}

.tc-product-viewer__status {
	min-height: 24px;
	text-align: center;
	font-weight: 750;
	color: rgba(30,42,47,0.72);
}

.tc-model-container {
	display: none;
}

.tc-order {
	padding: 12vh 0;
	background: linear-gradient(180deg, #fff, #fff7d7 55%, #f6fff9);
}

.tc-order__media {
	perspective: 1000px;
}

.tc-order__pack {
	width: min(100%, 620px);
	margin-inline: auto;
	filter: drop-shadow(0 34px 56px rgba(30,42,47,0.18));
	transform-origin: center;
}

.tc-order__panel {
	padding: clamp(24px, 4vw, 44px);
	border-radius: var(--tc-radius);
	background: rgba(255,255,255,0.84);
	box-shadow: var(--tc-shadow);
	border: 1px solid rgba(30,42,47,0.08);
}

.tc-order-form {
	margin-top: 28px;
}

.tc-order-form fieldset {
	display: grid;
	gap: 12px;
	padding: 0;
	margin: 0;
	border: 0;
}

.tc-order-form legend,
.tc-quantity span,
.tc-order-total span {
	font-weight: 900;
	color: rgba(30,42,47,0.78);
}

.tc-option {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 16px;
	border-radius: var(--tc-radius);
	background: #f8fbf8;
	border: 1px solid rgba(30,42,47,0.1);
	cursor: pointer;
}

.tc-option:has(input:checked) {
	border-color: var(--tc-primary);
	box-shadow: 0 0 0 3px rgba(34,204,113,0.13);
}

.tc-quantity {
	display: grid;
	grid-template-columns: 1fr auto 70px auto;
	gap: 10px;
	align-items: center;
	margin-top: 18px;
}

.tc-quantity input {
	width: 70px;
	min-height: 46px;
	border: 1px solid rgba(30,42,47,0.12);
	border-radius: 999px;
	text-align: center;
	font-weight: 900;
}

.tc-order-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid rgba(30,42,47,0.12);
}

.tc-order-total strong {
	font-size: clamp(1.8rem, 3vw, 2.7rem);
	color: var(--tc-primary);
}

.tc-final {
	display: grid;
	place-items: center;
	background: radial-gradient(circle at 50% 50%, rgba(250,196,48,0.32), transparent 32%), linear-gradient(180deg, #f6fff9, #dff9ff);
	text-align: center;
}

.tc-final__ring,
.tc-final__floaters {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
}

.tc-final__ring-img {
	width: min(78vw, 820px);
	opacity: 0.72;
	filter: drop-shadow(0 28px 42px rgba(30,42,47,0.12));
}

.tc-final__ingredients {
	width: min(42vw, 520px);
	position: absolute;
	right: -5vw;
	bottom: 5vh;
	opacity: 0.62;
}

.tc-final__copy {
	z-index: 3;
}

.tc-faq {
	padding: 10vh 0;
	background: var(--tc-charcoal);
	color: white;
}

.tc-faq h2 {
	color: white;
	font-size: clamp(2.8rem, 5vw, 5.6rem);
	margin-bottom: 34px;
}

.tc-faq__list {
	display: grid;
	gap: 12px;
}

.tc-faq__item {
	border: 1px solid rgba(255,255,255,0.14);
	border-radius: var(--tc-radius);
	background: rgba(255,255,255,0.06);
	overflow: hidden;
}

.tc-faq__item summary {
	padding: 20px;
	font-weight: 900;
	cursor: pointer;
}

.tc-faq__item p {
	margin: 0;
	padding: 0 20px 20px;
	color: rgba(255,255,255,0.78);
	line-height: 1.65;
}

.tc-site-footer {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 28px var(--tc-gutter);
	background: #11191d;
	color: white;
}

.tc-site-footer div {
	display: grid;
	gap: 4px;
}

.tc-site-footer span {
	color: rgba(255,255,255,0.7);
}

.tc-cursor-drop {
	position: fixed;
	z-index: 9999;
	width: 16px;
	height: 22px;
	border-radius: 60% 60% 70% 70%;
	pointer-events: none;
	background: rgba(255,255,255,0.62);
	box-shadow: inset -3px -4px 7px rgba(30,42,47,0.16), 0 5px 14px rgba(30,42,47,0.14);
	opacity: 0;
	transform: translate(-50%, -50%);
}