:root {
     /* Emerald & Mint Color Palette */
     --color-bg-1: #020604;
     --color-bg-2: #05120a;
     --color-bg-3: #0a1e12;

     --color-mint-light: #f0fdf4;
     --color-mint: #a7f3d0;
     --color-mint-muted: #6ee7b7;
     --color-mint-dark: #064e3b;

     --font-serif: 'Playfair Display', Georgia, serif;
     --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
 }

 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 html,
 body {
     height: 100vh;
     overflow: hidden;
     background:
         /* Subtle mint dot-grid texture */
         radial-gradient(circle, rgba(167, 243, 208, 0.015) 1px, transparent 1px),
         /* Deep forest green gradient background */
         linear-gradient(135deg, var(--color-bg-1) 0%, var(--color-bg-2) 50%, var(--color-bg-3) 100%);
     background-size: 24px 24px, 100% 100%;
     background-attachment: fixed;
     color: var(--color-mint-muted);
     font-family: var(--font-sans);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     position: relative;
     animation: panGrid 120s linear infinite;
 }

 @keyframes panGrid {
     0% {
         background-position: 0 0, 0 0;
     }

     100% {
         background-position: 1000px 1000px, 0 0;
     }
 }

 /* Subtle Mint & Emerald Ambient Glows */
 .glow-orb {
     position: absolute;
     border-radius: 50%;
     filter: blur(140px);
     z-index: 0;
     pointer-events: none;
 }

 .glow-left {
     width: 45vw;
     height: 45vw;
     background: rgba(167, 243, 208, 0.02);
     /* Soft Mint Glow */
     top: -10%;
     left: -10%;
     animation: slow-drift-left 25s infinite alternate ease-in-out;
 }

 .glow-right {
     width: 35vw;
     height: 35vw;
     background: rgba(6, 78, 59, 0.25);
     /* Deep Emerald Glow */
     bottom: 5%;
     right: -5%;
     animation: slow-drift-right 30s infinite alternate ease-in-out;
 }

 @keyframes slow-drift-left {
     0% {
         opacity: 0.6;
         filter: blur(140px);
     }

     50% {
         opacity: 0.9;
         filter: blur(120px);
     }

     100% {
         opacity: 0.6;
         filter: blur(150px);
     }
 }

 @keyframes slow-drift-right {
     0% {
         opacity: 0.5;
         filter: blur(130px);
     }

     50% {
         opacity: 0.8;
         filter: blur(150px);
     }

     100% {
         opacity: 0.5;
         filter: blur(125px);
     }
 }

 /* Main Container (Minimal, Premium, Emerald Card) */
 main.content-container {
     position: relative;
     z-index: 2;
     width: 90%;
     max-width: 640px;
     text-align: center;
     padding: 2.5rem 2.5rem;
     border-radius: 12px;
     background: rgba(7, 18, 12, 0.55);
     border: 1px solid rgba(167, 243, 208, 0.04);
     box-shadow: 0 40px 80px rgba(0, 0, 0, 0.7);
     transition: border-color 0.6s ease, box-shadow 0.6s ease;
     animation: fadeIn 1s cubic-bezier(0.16, 1, 0.3, 1);
 }

 main.content-container:hover {
     border-color: rgba(167, 243, 208, 0.12);
     box-shadow: 0 40px 80px rgba(0, 0, 0, 0.8),
         0 0 40px rgba(167, 243, 208, 0.01);
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Staggered Reveal Animations */
 .reveal-item {
     opacity: 0;
     transform: translateY(12px);
     animation: revealUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 }

 @keyframes revealUp {
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .reveal-1 {
     animation-delay: 0.1s;
 }

 .reveal-2 {
     animation-delay: 0.2s;
 }

 .reveal-3 {
     animation-delay: 0.3s;
 }

 .reveal-4 {
     animation-delay: 0.4s;
 }

 .reveal-5 {
     animation-delay: 0.5s;
 }

 /* Status Indicator Badge */
 .status-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 6px 12px;
     border-radius: 3px;
     border: 1px solid rgba(167, 243, 208, 0.15);
     background: rgba(167, 243, 208, 0.02);
     color: var(--color-mint);
     font-size: 0.75rem;
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 0.12em;
     margin-bottom: 2.5rem;
 }

 .status-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background-color: var(--color-mint);
     box-shadow: 0 0 8px var(--color-mint);
     animation: statusPulse 2s infinite ease-in-out;
 }

 @keyframes statusPulse {

     0%,
     100% {
         transform: scale(1);
         opacity: 1;
         box-shadow: 0 0 8px var(--color-mint);
     }

     50% {
         transform: scale(1.3);
         opacity: 0.4;
         box-shadow: 0 0 2px var(--color-mint);
     }
 }

 /* Logo Box & Ambient Aura */
 .logo-container {
     margin-bottom: 2.5rem;
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 80px;
     position: relative;
 }

 .logo-container::before {
     content: '';
     position: absolute;
     width: 140px;
     height: 70px;
     background: rgba(167, 243, 208, 0.05);
     filter: blur(40px);
     border-radius: 50%;
     z-index: -1;
     animation: logoAura 8s infinite ease-in-out alternate;
 }

 @keyframes logoAura {
     0% {
         opacity: 0.5;
         transform: scale(0.9);
     }

     100% {
         opacity: 1;
         transform: scale(1.1);
     }
 }

 .logo-img {
     max-height: 85px;
     width: auto;
     max-width: 100%;
     object-fit: contain;
     transition: transform 0.4s ease;
 }

 .logo-img:hover {
     transform: scale(1.02);
 }

 .logo-text-fallback {
     display: none;
     font-family: var(--font-serif);
     font-size: 2.25rem;
     font-weight: 700;
     letter-spacing: 0.05em;
     color: var(--color-mint-light);
     border-bottom: 1px solid var(--color-mint);
     padding-bottom: 2px;
 }

 /* Mint Accent Line Separator */
 .divider-line {
     height: 1px;
     width: 50px;
     background: rgba(167, 243, 208, 0.2);
     margin: 0 auto 2.5rem auto;
     transform: scaleX(0);
     transform-origin: center;
     animation: drawLine 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
     animation-delay: 0.25s;
 }

 @keyframes drawLine {
     to {
         transform: scaleX(1);
     }
 }

 /* Typography & Headers */
 h1 {
     font-family: var(--font-serif);
     font-size: 3rem;
     font-weight: 400;
     line-height: 1.3;
     margin-bottom: 1.5rem;
     color: var(--color-mint-light);
     letter-spacing: -0.01em;
 }

 @keyframes textShimmer {
     0% {
         background-position: 125% 0;
     }

     100% {
         background-position: -125% 0;
     }
 }

 /* Mask Reveal Wrapper */
 .mask-wrapper {
     display: block;
     overflow: hidden;
     line-height: 1.3;
 }

 .mask-content {
     display: block;
     transform: translateY(100%);
     animation:
         maskReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards,
         textShimmer 9s infinite linear;
     animation-delay: 0.3s, 0.3s;
     background: linear-gradient(90deg,
             var(--color-mint-light) 0%,
             var(--color-mint-light) 35%,
             var(--color-mint) 50%,
             var(--color-mint-light) 65%,
             var(--color-mint-light) 100%);
     background-size: 250% 100%;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 @keyframes maskReveal {
     to {
         transform: translateY(0);
     }
 }

 .description {
     font-size: 1.05rem;
     line-height: 1.8;
     color: var(--color-mint-muted);
     margin-bottom: 2.5rem;
     font-weight: 300;
     text-wrap: balance;
 }

 .highlight-brand {
     color: var(--color-mint);
     font-weight: 400;
 }

 .stay-tuned {
     font-family: var(--font-serif);
     font-style: italic;
     font-size: 1.35rem;
     color: var(--color-mint);
     margin-bottom: 1.25rem;
     font-weight: 400;
 }

 .signature {
     font-size: 0.85rem;
     color: var(--color-mint-muted);
     text-transform: uppercase;
     letter-spacing: 0.15em;
     font-weight: 600;
     margin-bottom: 1rem;
 }

 .divider {
     height: 1px;
     background: rgba(255, 255, 255, 0.05);
     margin: 1.25rem 0;
 }

 /* Social Links */
 .social-section {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: -30px;
 }

 .instagram-link {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     color: var(--color-mint-muted);
     text-decoration: none;
     font-size: 0.9rem;
     font-weight: 500;
     position: relative;
     transition: color 0.3s ease, transform 0.3s ease;
     padding-bottom: 4px;
 }

 .instagram-link::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 1px;
     background: var(--color-mint);
     transform: scaleX(0);
     transform-origin: right;
     transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }

 .instagram-link:hover {
     color: var(--color-mint);
     transform: translateY(-1px);
 }

 .instagram-link:hover::after {
     transform: scaleX(1);
     transform-origin: left;
 }

 .instagram-link svg {
     width: 18px;
     height: 18px;
     fill: currentColor;
 }

 /* Footer */
 footer {
     position: absolute;
     bottom: 2rem;
     z-index: 2;
     font-size: 0.75rem;
     color: var(--color-mint-dark);
     letter-spacing: 0.05em;
 }

 /* Responsiveness */
 @media (max-width: 640px) {
     main.content-container {
         padding: 2rem 1.5rem;
         width: 92%;
     }

     h1 {
         font-size: 2.3rem;
     }
 }