html { margin:0; padding:0; }
body { font-size:18px; font-family:'Segoe UI','Helvetica Neue',Arial,sans-serif; background-color:#050d1f; margin:0; padding:0; color:#cdd8f0; }
#parallax-bg { position:fixed; top:-20%; left:0; right:0; height:140%; background-image:url('/img/otp.support.bg.webp'); background-size:cover; background-position:center; z-index:0; will-change:transform; }
a, a:visited { outline:0; color:#00c8ff; text-decoration:none; }
a:hover { text-decoration:underline; color:#40daff; }

#nav-container { width:100%; position:fixed; top:0; background:rgba(2,8,22,0.88); backdrop-filter:blur(8px); z-index:100; height:35px; box-shadow:0 1px 0 rgba(0,200,255,0.2); border-bottom:1px solid rgba(0,200,255,0.15); }
nav { max-width:1100px; margin:0 auto; display:block; color:#fff; }
nav ul { width:100%; margin:0; padding:0; list-style:none; position:relative; display:inline-table; white-space:nowrap; background:transparent; }
nav a, nav a:hover, nav a:visited { color:#a0c4ff; text-decoration:none; }
nav a, nav span { padding:6px 20px; display:block; letter-spacing:0.04em; font-size:13px; text-transform:uppercase; }
nav a:hover, nav span:hover { background:rgba(0,200,255,0.1); color:#00c8ff; transition:all 0.3s; }
nav li { display:inline-block; cursor:pointer; position:relative; }

#main-container { transition:all 0.5s; transition-delay:0.3s; position:relative; z-index:1; }
.container { margin:30px auto 5px; padding:10px; display:block; max-width:1100px; }
.docname { font-size:150%; display:block; margin-top:10px; letter-spacing:0.05em; }

input[type=text], textarea { border:1px solid rgba(0,200,255,0.3); border-radius:4px; padding:5px 3px; outline:none; background:rgba(0,20,50,0.6); color:#cdd8f0; }

input[type=button], input[type=submit], .fake_btn {
	border:0; background:linear-gradient(135deg,#005fcc,#00a8e8); color:#fff; padding:10px 16px;
	cursor:pointer; text-transform:uppercase; transition:all 0.2s;
	border-radius:4px; box-shadow:0 0 16px rgba(0,168,232,0.3);
	font-family:'Segoe UI','Helvetica Neue',Arial,sans-serif; font-size:14px; font-weight:700; letter-spacing:0.08em;
	text-shadow:0 1px 4px rgba(0,0,0,0.4);
}
input[type=button]:hover, input[type=submit]:hover, .fake_btn:hover {
	background:linear-gradient(135deg,#0070e0,#00c8ff); box-shadow:0 0 24px rgba(0,200,255,0.5); transform:translate(1px,-2px);
}
.fake_btn { display:inline-block; text-decoration:none; }
.green_btn { background:linear-gradient(135deg,#007a4d,#00b87a); box-shadow:0 0 16px rgba(0,184,122,0.3); }
.green_btn:hover { background:linear-gradient(135deg,#00b87a,#00e5a0); box-shadow:0 0 24px rgba(0,229,160,0.45); }

.hidden { display:none; }
pre { background:rgba(0,20,50,0.7); padding:10px; border-radius:4px; border:1px solid rgba(0,200,255,0.2); color:#a0d8f0; font-family:'Courier New',monospace; }

.chat_btn { position:fixed; z-index:200; border:0; bottom:25px; right:25px; width:60px; height:60px; transition:all 0.2s; filter:drop-shadow(0 4px 10px rgba(0,200,255,0.4)); }
.chat_btn:hover { transform:rotate(-10deg) scale(1.2); cursor:pointer; }

#lp { text-align:center; max-width:880px; box-sizing:border-box; margin:0 auto; background:rgba(0,0,25,0.6); backdrop-filter:blur(10px); border-radius:8px; box-shadow:0 0 60px rgba(0,0,0,0.5),inset 0 0 0 1px rgba(0,200,255,0.15); padding:10px; border:1px solid rgba(0,200,255,0.2); }
#lp .fake_btn { padding:16px 25px; }
#lp .green { color:#00e5a0; }
#lp h1 { font-size:36px; font-weight:300; line-height:1.1; color:#ffffff; margin-bottom:16px; letter-spacing:0.03em; }
#lp .docname { font-size:36px; font-weight:300; margin-bottom:10px; color:#00c8ff; letter-spacing:0.08em; text-transform:uppercase; }
#lp input[type="text"] { width:100%; padding:12px 14px; border-radius:4px; border:1px solid rgba(0,200,255,0.3); background:rgba(0,15,40,0.7); font-size:17px; transition:all 0.2s ease; outline:none; color:#cdd8f0; }
#lp input[type="text"]:focus { border-color:#00c8ff; box-shadow:0 0 0 3px rgba(0,200,255,0.15); }

.lp-general { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 0 120px 0; }
.lp-subtitle { font-size:19px; line-height:1.6; margin-bottom:30px; color:#c8e4ff; font-weight:300; }
.lp-buttons { margin-top:10px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.lp-section { padding-bottom:120px; opacity:0; transform:translateY(40px); transition:opacity 0.7s ease,transform 0.7s ease; }
.lp-section.visible { opacity:1; transform:translateY(0); }
.lp-section h2 { font-size:26px; font-weight:300; color:#00c8ff; margin-bottom:30px; letter-spacing:0.05em; text-transform:uppercase; }

.lp-faq-item { background:rgba(0,20,55,0.6); border:1px solid rgba(0,200,255,0.18); border-radius:6px; box-shadow:0 2px 12px rgba(0,0,0,0.3); margin-bottom:8px; overflow:hidden; text-align:left; transition:box-shadow 0.2s,border-color 0.2s; }
.lp-faq-item:hover { box-shadow:0 4px 20px rgba(0,200,255,0.15); border-color:rgba(0,200,255,0.4); }
.lp-faq-answer { font-size:16px; line-height:1.6; padding:0 18px 14px; color:#9ab0cc; }

.lp-faq { max-width:700px; margin:0 auto; }
.lp-faq-item summary { padding:14px 18px; font-size:17px; font-weight:600; color:#c8e0ff; cursor:pointer; list-style:none; letter-spacing:0.01em; }
.lp-faq-item summary::-webkit-details-marker { display:none; }
.lp-faq-item summary:hover { background:rgba(0,200,255,0.06); color:#00c8ff; }

.lp-box { padding:30px; max-width:700px; margin:0 auto; position:relative; overflow:hidden; background:rgba(0,40,20,0.5); border:1px solid rgba(0,200,120,0.35); border-radius:6px; font-size:16px; box-shadow:0 4px 24px rgba(0,0,0,0.3); }
.lp-box::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#00b87a,#00c8ff,#005fcc); }
.lp-box h2 { margin-bottom:10px; color:#00e5a0; font-weight:300; letter-spacing:0.05em; text-transform:uppercase; }
.lp-box div { margin-bottom:16px; }

/* Search */
.search-wrap { position:relative; width:100%; max-width:560px; margin-top:10px; }
.search-wrap input[type=text] { width:100%; padding:14px 40px 14px 16px; border-radius:4px; border:1px solid rgba(0,200,255,0.3); font-size:17px; background:rgba(0,15,40,0.75); box-sizing:border-box; transition:all 0.2s; outline:none; color:#cdd8f0; }
.search-wrap input[type=text]:focus { border-color:#00c8ff; box-shadow:0 0 0 3px rgba(0,200,255,0.15),0 4px 16px rgba(0,0,0,0.3); }
.search-clear { position:absolute; right:12px; top:50%; transform:translateY(-50%); cursor:pointer; font-size:18px; color:#446; display:none; line-height:1; background:none; border:none; padding:2px 4px; color:#5a7a9a; }
.search-clear:hover { color:#00c8ff; }
#search-results { position:absolute; top:calc(100% + 6px); left:0; width:100%; background:rgba(2,10,28,0.97); border-radius:6px; z-index:50; text-align:left; box-shadow:0 8px 32px rgba(0,0,0,0.6); overflow:hidden; border:1px solid rgba(0,200,255,0.2); }
#search-results:empty { display:none; }
#search-results .lp-faq-item { margin:0; border-radius:0; border:none; box-shadow:none; border-bottom:1px solid rgba(0,200,255,0.08); background:transparent; }
#search-results .lp-faq-item:last-child { border-bottom:none; }
#search-results .sr-title { font-weight:600; color:#c8e0ff; font-size:16px; }
#search-results .sr-snippet { font-size:15px; color:#6a8aaa; margin-top:4px; line-height:1.5; }
#search-results a { display:block; padding:12px 16px; }
#search-results a:hover { text-decoration:none; background:rgba(0,200,255,0.07); }
#search-results .sr-none { padding:12px 16px; color:#5a7a9a; font-size:13px; }
#search-results mark { background:rgba(0,200,255,0.25); color:#00e5ff; border-radius:2px; padding:0 2px; }

/* Post */
.post-content { max-width:760px; margin:0 auto; text-align:left; line-height:1.7; color:#cdd8f0; }
.post-content iframe { max-width:100%; }
.post-content h2 { color:#00c8ff; font-size:24px; margin-top:30px; font-weight:400; letter-spacing:0.02em; }
.post-content h3 { color:#80d8ff; font-size:20px; margin-top:22px; font-weight:400; }
.post-content strong { color:#e0f0ff; }
.post-content a { color:#00c8ff; }

@media (max-width:700px) {
	.lp-general { min-height:auto; padding:40px 0 30px; }
	.lp-general h1 { font-size:28px; }
	.lp-general img { width:64px; }
	.lp-buttons { flex-direction:column; align-items:center; }
	.lp-section h2 { font-size:20px; }
}