:root { --bg: #1c1c1c; --bg-s: #242424; --bg-e: #2e2e2e; --steel: #f0f0f0; --steel-dim: #d4d4d4; --white: #ffffff; --sand: #c4a882; --sand-d: rgba(196,168,130,0.15); --sand-b: rgba(196,168,130,0.35); --concrete: #6b6b6b; --serif: 'Inter', serif; --sans: 'Inter', system-ui, sans-serif; --ease: cubic-bezier(0.16,1,0.3,1); --ease2: cubic-bezier(0.25,0.46,0.45,0.94);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;background:#1c1c1c;max-width:100%;overflow-x:clip}
body{font-family:'Inter',system-ui,sans-serif;color:#f0f0f0;min-height:100vh;overflow-x:hidden;background:#1c1c1c;max-width:100%}
.bg-wrap{position:fixed;inset:0;z-index:0;overflow:hidden;max-width:100vw;clip-path:inset(0)}
.bg-wrap picture,.bg-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bg-wrap .blur{filter:blur(1px) brightness(0.45);transform:scale(1.1)}
.bg-overlay{position:fixed;inset:0;z-index:1;background:linear-gradient(135deg,rgba(28,28,28,0.6) 0%,rgba(28,28,28,0.25) 50%,rgba(28,28,28,0.65) 100%)}
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23c)' opacity='0.06'/%3E%3C/svg%3E");pointer-events:none;z-index:1;opacity:0.12;mix-blend-mode:overlay}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ── Tiles ───────────────────────────────── */
.tiles { position: relative; z-index: 10; display: flex; flex-direction: column; gap: 1.25rem; padding: 1rem 5vw 3rem; max-width: 1100px; width: 100%; min-width: 0; margin: 0 auto;
}
.tiles-row { display: flex; flex-direction: row; gap: 1.25rem; align-items: stretch; min-width: 0; max-width: 100%;
}
.tiles-col { display: flex; flex-direction: column; gap: 1.25rem; flex: 1; min-width: 0;
}
.tile { flex: 1; min-width: 0; max-width: 100%; border-radius: 16px; border: 1px solid rgba(255,255,255,0.08); background: rgba(15,15,15,0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 1.5rem 2rem; transition: all 0.4s var(--ease); display: flex; flex-direction: column; justify-content: center; overflow-wrap: anywhere;
}
.tile:hover { border-color: var(--sand-b); box-shadow: 0 12px 40px rgba(0,0,0,0.4); transform: translateY(-2px);
}
.tile-title { font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 300; color: var(--white); text-align: center; letter-spacing: -.01em; line-height: 1.3;
}
.tile-title span { color: var(--white); }
.tile-subtitle { font-size: clamp(0.7rem, 1vw, 0.85rem); color: var(--sand); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.85rem; text-align: center;
}
.tile-desc { font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--steel-dim); line-height: 1.7; text-align: center; max-width: 800px; margin: 0 auto;
}
.tile-desc p { margin: 0;
}
.tile-desc p + p { margin-top: 1rem;
}
.tile-content { min-width: 0; max-width: 100%; }
.tile-content h2 { font-family: 'Inter', serif; font-size: clamp(1.2rem, 2.5vw, 1.8rem); font-weight: 400; color: #fff; letter-spacing: -.01em; line-height: 1.3; margin: 1.5rem 0 0.8rem; text-align: center;
}
.tile-content h2.tile-title { font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 300; color: var(--white); letter-spacing: -.01em; line-height: 1.3; margin: 0; text-align: center;
}
.tile-content h2 span { color: #c4a882;
}
.tile-content p { font-size: clamp(1rem, 1.35vw, 1.08rem); line-height: 1.8; color: var(--steel-dim); text-align: center;
}
.tile-content table { display: block; width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse; }
.tile-content th,
.tile-content td { overflow-wrap: anywhere; }
.related-links-text { max-width: 900px;
}
.related-links-text a { color: var(--sand);
}
.related-links-text a:hover { color: var(--white);
}
.faq-accordion { margin-top: 1rem; display: grid; gap: 0.75rem;
}
.faq-accordion details { border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; background: rgba(255,255,255,0.02); overflow: hidden;
}
.faq-accordion summary { cursor: pointer; list-style: none; padding: 0.95rem 1rem; color: var(--white); font-weight: 500; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
}
.faq-accordion summary::-webkit-details-marker { display: none;
}
.faq-accordion summary::after { content: ""; width: 0.52rem; height: 0.52rem; border-right: 2px solid rgba(255,255,255,0.85); border-bottom: 2px solid rgba(255,255,255,0.85); transform: rotate(45deg); transition: transform .2s ease; flex-shrink: 0;
}
.faq-accordion details[open] summary::after { transform: rotate(225deg);
}
.faq-accordion .faq-answer { border-top: 1px solid rgba(255,255,255,0.08); padding: 0.8rem 1rem 1rem; text-align: left; color: var(--steel-dim); line-height: 1.75;
}
.tile-content a { color: var(--sand); text-decoration: none;
}
.tile-content a:hover { color: var(--white);
}
.tile-right { flex: 1; min-width: 0;
}
.tile-ul { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 2rem;
}
.tile-ul li { font-size: .95rem; line-height: 1.6; color: var(--steel-dim); text-align: center;
} /* ── Header (floating back button) ──────── */
.header { position: fixed; top: 10px; left: 10px; z-index: 100; display: flex; align-items: center; justify-content: flex-start;
} /* Back button – animated arrow */
.button { display: block; position: relative; width: 44px; height: 44px; margin: 0; overflow: hidden; outline: none; background-color: transparent; cursor: pointer; border: 0;
} .button:before,
.button:after { content: ""; position: absolute; border-radius: 50%; inset: 5px;
} .button:before { border: 3px solid rgba(255,255,255,0.8); transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms, transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
} .button:after { border: 3px solid #c4a882; transform: scale(1.3); transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); opacity: 0;
} .button:hover:before,
.button:focus:before { opacity: 0; transform: scale(0.7); transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
} .button:hover:after,
.button:focus:after { opacity: 1; transform: scale(1); transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms, transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
} .button-box { display: flex; position: absolute; top: 0; left: 0;
} .button-elem { display: block; width: 16px; height: 16px; margin: 15px 14px 0 14px; transform: rotate(180deg); fill: rgba(255,255,255,0.8);
} .button:hover .button-box,
.button:focus .button-box { transition: 0.4s; transform: translateX(-44px);
} /* ── Floating Contact Bar ──────────────── */
.chat{position:fixed;bottom:calc(2rem - 5px);left:50%;transform:translateX(-50%);z-index:100;cursor:pointer}
.chat a{position:relative;display:flex;align-items:center;justify-content:center;text-decoration:none;padding:0.75rem 1.5rem}
.chat .background{position:absolute;inset:0;border-radius:14px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all .3s cubic-bezier(.16,1,.3,1)}
.chat .chat-icon{position:relative;z-index:2;width:20px;height:20px;color:#d4d4d4;transition:color .25s ease;flex-shrink:0}
.chat .chat-text{position:relative;z-index:2;font-size:.85rem;letter-spacing:.08em;color:#d4d4d4;white-space:nowrap;transition:color .25s ease}
.chat a{gap:0.5rem}
.chat:hover .background{background:rgba(255,255,255,.12);border-color:rgba(196,168,130,0.35);transform:scale(1.05)}
.chat:hover .chat-text,.chat:hover .chat-icon{color:#c4a882} @media (max-width: 900px) { .tiles-row { flex-direction: column; }
}
@media(max-width:640px){.bg-wrap .blur{transform:none}.center-logo{padding:1rem 5vw 0}.center-logo a{margin-top:0}.center-logo img{height:auto}.tile{padding:1.2rem 1rem}.tile-content ul:not(.tile-ul){padding-left:1.65rem}.tile-content ul:not(.tile-ul) li{padding-left:.2rem}.tile-ul{grid-template-columns:1fr}}
footer{padding:.8rem 5vw;display:flex;align-items:center;justify-content:center;position:relative;z-index:2}
footer a{color:#999;text-decoration:none;transition:color .3s}
footer a:hover{color:#ccc}
.ft-text{font-size:.72rem;letter-spacing:.06em;color:#999} /* ── DEV LINK LOADER OVERLAY ───────────────────────── */
#dev-loader-overlay { position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center; background:rgba(6,8,15,0.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
#dev-loader-overlay.active { display:flex; }
#dev-loader-overlay .loader { position: absolute; top: 50%; margin-left: -50px; left: 50%; animation: speeder 0.4s linear infinite;
}
#dev-loader-overlay .loader > span { height: 5px; width: 35px; background: #ff6b9d; position: absolute; top: -19px; left: 60px; border-radius: 2px 10px 1px 0;
}
#dev-loader-overlay .base span { position: absolute; width: 0; height: 0; border-top: 6px solid transparent; border-right: 100px solid #ff6b9d; border-bottom: 6px solid transparent;
}
#dev-loader-overlay .base span:before { content: ""; height: 22px; width: 22px; border-radius: 50%; background: #c44dff; position: absolute; right: -110px; top: -16px;
}
#dev-loader-overlay .base span:after { content: ""; position: absolute; width: 0; height: 0; border-top: 0 solid transparent; border-right: 55px solid #4d9eff; border-bottom: 16px solid transparent; top: -16px; right: -98px;
}
#dev-loader-overlay .face { position: absolute; height: 12px; width: 20px; background: #c44dff; border-radius: 20px 20px 0 0; transform: rotate(-40deg); right: -125px; top: -15px;
}
#dev-loader-overlay .face:after { content: ""; height: 12px; width: 12px; background: #4d9eff; right: 4px; top: 7px; position: absolute; transform: rotate(40deg); transform-origin: 50% 50%; border-radius: 0 0 0 2px;
}
#dev-loader-overlay .loader > span > span:nth-child(1) { width: 30px; height: 1px; background: #ff6b9d; position: absolute; animation: fazer1 0.2s linear infinite;
}
#dev-loader-overlay .loader > span > span:nth-child(2) { width: 30px; height: 1px; background: #c44dff; position: absolute; top: 3px; animation: fazer2 0.4s linear infinite;
}
#dev-loader-overlay .loader > span > span:nth-child(3) { width: 30px; height: 1px; background: #4d9eff; position: absolute; top: 1px; animation: fazer3 0.4s linear infinite; animation-delay: -1s;
}
#dev-loader-overlay .loader > span > span:nth-child(4) { width: 30px; height: 1px; background: #ff6b9d; position: absolute; top: 4px; animation: fazer4 1s linear infinite; animation-delay: -1s;
}
@keyframes fazer1 { 0% { left: 0; } 100% { left: -80px; opacity: 0; }
}
@keyframes fazer2 { 0% { left: 0; } 100% { left: -100px; opacity: 0; }
}
@keyframes fazer3 { 0% { left: 0; } 100% { left: -50px; opacity: 0; }
}
@keyframes fazer4 { 0% { left: 0; } 100% { left: -150px; opacity: 0; }
}
@keyframes speeder { 0% { transform: translate(2px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -3px) rotate(-1deg); } 20% { transform: translate(-2px, 0px) rotate(1deg); } 30% { transform: translate(1px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 3px) rotate(-1deg); } 60% { transform: translate(-1px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-2px, -1px) rotate(1deg); } 90% { transform: translate(2px, 1px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); }
}
#dev-loader-overlay .longfazers { position: absolute; width: 100%; height: 100%;
}
#dev-loader-overlay .longfazers span { position: absolute; height: 2px; width: 20%;
}
#dev-loader-overlay .longfazers span:nth-child(1) { top: 20%; background: #ff6b9d; animation: lf 0.6s linear infinite; animation-delay: -5s;
}
#dev-loader-overlay .longfazers span:nth-child(2) { top: 40%; background: #c44dff; animation: lf2 0.8s linear infinite; animation-delay: -1s;
}
#dev-loader-overlay .longfazers span:nth-child(3) { top: 60%; background: #4d9eff; animation: lf3 0.6s linear infinite;
}
#dev-loader-overlay .longfazers span:nth-child(4) { top: 80%; background: #ff6b9d; animation: lf4 0.5s linear infinite; animation-delay: -3s;
}
@keyframes lf { 0% { left: 200%; } 100% { left: -200%; opacity: 0; }
}
@keyframes lf2 { 0% { left: 200%; } 100% { left: -200%; opacity: 0; }
}
@keyframes lf3 { 0% { left: 200%; } 100% { left: -100%; opacity: 0; }
}
@keyframes lf4 { 0% { left: 200%; } 100% { left: -100%; opacity: 0; }
} /* ── FOOTER COOKIE ──────────────────────── */
.ft-cookie { position:absolute; right:1.5vw; display:inline-flex; align-items:center; cursor:pointer; opacity:.6; }
.ft-cookie:hover { opacity:1; } /* ── Center Logo ─────────────────────────── */
.center-logo { position: relative; z-index: 10; display: flex; justify-content: center; padding: 0 5vw 0; overflow: visible;
}
.center-logo a { display: block; transition: opacity 0.3s cubic-bezier(0.16,1,0.3,1); margin-top: 0;
}
.center-logo a:hover { opacity: 0.75;
}
.center-logo img { height: auto; width: min(100%, 360px);
}