/* ============================================================
   DM FIRST - FINAL STYLESHEET 2026 (ERROR-FREE)
   Works on all browsers - Chrome, Firefox, Safari, Edge
   ============================================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html{scroll-behavior:smooth;overflow-x:hidden;width:100%}

body{
background:#0a0e27;
color:#fff;
font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
line-height:1.7;
font-size:16px;
overflow-x:hidden;
width:100%;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

:root{
--bg-dark:#0a0e27;
--bg-darker:#060919;
--bg-card:rgba(255,255,255,0.03);
--bg-card-hover:rgba(255,255,255,0.05);
--border-color:rgba(255,255,255,0.08);
--border-hover:rgba(88,101,242,0.4);
--text-main:#ffffff;
--text-muted:#8892b0;
--text-dim:#555555;
--primary:#5865f2;
--primary-light:#7c3aed;
--success:#00c853;
--warning:#ffab00;
--telegram:#0088cc;
--danger:#ff5252;
--gold:#ffd700;
}

/* ============================================================
   STICKY HEADER
   ============================================================ */
.sticky-header{
position:fixed;
top:0;
left:0;
right:0;
width:100%;
background:rgba(10,14,39,0.96);
-webkit-backdrop-filter:blur(12px);
backdrop-filter:blur(12px);
display:flex;
justify-content:center;
align-items:center;
gap:12px;
padding:12px 15px;
-webkit-transform:translateY(-100%);
transform:translateY(-100%);
transition:transform 0.4s ease;
z-index:9999;
border-bottom:1px solid var(--border-color);
}

.sticky-header.show{-webkit-transform:translateY(0);transform:translateY(0)}

.btn-glow{
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
padding:11px 22px;
border-radius:12px;
font-weight:700;
font-size:0.9rem;
transition:all 0.3s ease;
flex:0 1 auto;
border:none;
cursor:pointer;
white-space:nowrap;
position:relative;
overflow:hidden;
letter-spacing:0.2px;
text-decoration:none;
}

.btn-glow .btn-icon{width:18px;height:18px;flex-shrink:0;transition:transform 0.3s ease}

.btn-register{
background:linear-gradient(135deg,#00c853,#00e676);
color:#002810;
box-shadow:0 0 20px rgba(0,200,83,0.5),0 4px 15px rgba(0,0,0,0.3);
}
.btn-register .btn-icon{animation:iconPulse 2s ease-in-out infinite}
.btn-register:hover{
box-shadow:0 0 35px rgba(0,200,83,0.9);
-webkit-transform:translateY(-3px) scale(1.03);
transform:translateY(-3px) scale(1.03);
}

.btn-login{
background:linear-gradient(135deg,#ffab00,#ffd700);
color:#3d2400;
box-shadow:0 0 20px rgba(255,171,0,0.5),0 4px 15px rgba(0,0,0,0.3);
}
.btn-login .btn-icon{animation:iconSlide 1.5s ease-in-out infinite}
.btn-login:hover{
box-shadow:0 0 35px rgba(255,171,0,0.9);
-webkit-transform:translateY(-3px) scale(1.03);
transform:translateY(-3px) scale(1.03);
}

.btn-telegram{
background:linear-gradient(135deg,#0088cc,#00b0ff);
color:#ffffff;
box-shadow:0 0 20px rgba(0,136,204,0.5),0 4px 15px rgba(0,0,0,0.3);
}
.btn-telegram .btn-icon{animation:iconFly 2s ease-in-out infinite}
.btn-telegram:hover{
box-shadow:0 0 35px rgba(0,136,204,0.9);
-webkit-transform:translateY(-3px) scale(1.03);
transform:translateY(-3px) scale(1.03);
}

.btn-glow:hover .btn-icon{
-webkit-transform:scale(1.25);
transform:scale(1.25);
}

@keyframes iconPulse{
0%,100%{-webkit-transform:scale(1);transform:scale(1)}
50%{-webkit-transform:scale(1.2);transform:scale(1.2)}
}
@keyframes iconSlide{
0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}
50%{-webkit-transform:translateX(4px);transform:translateX(4px)}
}
@keyframes iconFly{
0%,100%{-webkit-transform:translate(0,0) rotate(0);transform:translate(0,0) rotate(0)}
50%{-webkit-transform:translate(2px,-3px) rotate(-12deg);transform:translate(2px,-3px) rotate(-12deg)}
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 5%;
max-width:1200px;
margin:0 auto;
width:100%;
position:relative;
z-index:100;
flex-wrap:wrap;
gap:15px;
}

.logo{
font-size:1.5rem;
font-weight:800;
color:var(--gold);
text-decoration:none;
display:flex;
align-items:center;
gap:10px;
letter-spacing:0.5px;
}

.logo img{
height:42px;
width:42px;
border-radius:10px;
box-shadow:0 0 15px rgba(255,215,0,0.3);
}

.nav-links{display:flex;align-items:center;gap:5px;flex-wrap:wrap}

.nav-links a{
color:var(--text-muted);
text-decoration:none;
padding:8px 12px;
font-weight:500;
transition:color 0.3s,background 0.3s;
font-size:0.9rem;
border-radius:8px;
}

.nav-links a:hover{color:var(--text-main);background:rgba(255,255,255,0.05)}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb{
max-width:900px;
margin:0 auto;
padding:10px 20px 0;
font-size:0.85rem;
color:var(--text-muted);
width:100%;
}

.breadcrumb a{color:var(--text-muted);text-decoration:none;transition:color 0.3s}
.breadcrumb a:hover{color:var(--primary)}
.breadcrumb span{margin:0 8px}
.breadcrumb .current{color:var(--text-main)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
min-height:85vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:40px 20px;
position:relative;
overflow:hidden;
width:100%;
}

.hero::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:radial-gradient(circle at 50% 0%,rgba(88,101,242,0.3) 0%,transparent 70%);
z-index:-1;
pointer-events:none;
}

.hero h1{
font-size:clamp(1.8rem,5vw,3.5rem);
font-weight:800;
line-height:1.2;
margin-bottom:20px;
max-width:900px;
}

.hero h1 span{
background:linear-gradient(135deg,#ffffff,#a8b4ff);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero p{
font-size:clamp(1rem,2vw,1.2rem);
color:var(--text-muted);
max-width:700px;
margin-bottom:40px;
}

.hero-cta{display:flex;gap:15px;flex-wrap:wrap;justify-content:center;width:100%}

.hero-badge{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}

.hero-badge span{
padding:6px 14px;
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.1);
border-radius:20px;
font-size:0.8rem;
color:var(--text-muted);
}

.hero-inner{min-height:55vh;padding:40px 20px}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary{
padding:15px 34px;
border-radius:12px;
font-size:1.02rem;
font-weight:700;
text-decoration:none;
transition:all 0.3s ease;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
border:none;
cursor:pointer;
position:relative;
overflow:hidden;
}

.btn-primary svg{width:18px;height:18px;flex-shrink:0;transition:transform 0.3s ease}

.btn-primary.register{background:linear-gradient(135deg,#00c853,#00e676);color:#002810;box-shadow:0 4px 20px rgba(0,200,83,0.4)}
.btn-primary.login{background:linear-gradient(135deg,#ffab00,#ffd700);color:#3d2400;box-shadow:0 4px 20px rgba(255,171,0,0.4)}
.btn-primary.telegram{background:linear-gradient(135deg,#0088cc,#00b0ff);color:#ffffff;box-shadow:0 4px 20px rgba(0,136,204,0.4)}

.btn-primary:hover{
-webkit-transform:translateY(-3px);
transform:translateY(-3px);
filter:brightness(1.15);
box-shadow:0 8px 30px rgba(88,101,242,0.5);
}

.btn-primary:hover svg{-webkit-transform:scale(1.15);transform:scale(1.15)}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{padding:70px 20px;max-width:1000px;margin:0 auto;width:100%}

.section h2{
font-size:clamp(1.4rem,4vw,2.1rem);
font-weight:700;
margin-bottom:20px;
text-align:center;
line-height:1.3;
}

.section h2 span{color:var(--primary)}

.section p{
color:var(--text-muted);
margin-bottom:18px;
text-align:center;
max-width:800px;
margin-left:auto;
margin-right:auto;
font-size:1rem;
}

.section p strong{color:var(--text-main)}

/* ============================================================
   UNIVERSAL SCREENSHOT FRAMES
   ============================================================ */
.ss-frame{
position:relative;
border-radius:20px;
overflow:hidden;
background:linear-gradient(145deg,#1a1f3a,#0f1428,#1a1f3a);
padding:3px;
display:block;
transition:transform 0.4s ease,box-shadow 0.4s ease;
box-shadow:0 20px 50px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.06),0 0 40px rgba(88,101,242,0.2);
}

.ss-frame img{
width:100%;
height:auto;
display:block;
border-radius:18px;
position:relative;
z-index:2;
background:#0a0e27;
}

.ss-frame:hover{
-webkit-transform:translateY(-8px) scale(1.02);
transform:translateY(-8px) scale(1.02);
box-shadow:0 30px 70px rgba(0,0,0,0.7),0 0 0 1px rgba(88,101,242,0.5),0 0 60px rgba(88,101,242,0.5),0 0 100px rgba(168,85,247,0.25);
}

/* ============================================================
   SCREENSHOT LAYOUTS
   ============================================================ */
.ss-single{
max-width:340px;
margin:40px auto;
display:flex;
flex-direction:column;
align-items:center;
width:100%;
}

.ss-grid-2{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:24px;
max-width:720px;
margin:40px auto;
width:100%;
}

.ss-grid-3{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
max-width:960px;
margin:40px auto;
width:100%;
}

.ss-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:24px;
max-width:960px;
margin:40px auto;
width:100%;
}

.ss-item{display:flex;flex-direction:column;gap:12px}

.ss-frame-caption{
text-align:center;
color:var(--text-muted);
font-size:0.85rem;
font-weight:500;
letter-spacing:0.3px;
}

/* Legacy mockup classes for backwards compat */
.mockup-showcase,
.screenshot-showcase{
padding:50px 20px;
max-width:1100px;
margin:0 auto;
position:relative;
overflow:hidden;
width:100%;
}

.mockup-container,
.screenshot-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:24px;
max-width:960px;
margin:0 auto;
position:relative;
z-index:1;
}

.screenshot-grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.screenshot-grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.mockup-phone{
position:relative;
border-radius:20px;
overflow:hidden;
padding:3px;
background:linear-gradient(145deg,#1a1f3a,#0f1428,#1a1f3a);
box-shadow:0 20px 50px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.06),0 0 40px rgba(88,101,242,0.2);
transition:all 0.4s ease;
}

.mockup-phone img{
width:100%;
height:auto;
border-radius:18px;
display:block;
background:#0a0e27;
}

.mockup-phone:hover{
-webkit-transform:translateY(-8px) scale(1.02);
transform:translateY(-8px) scale(1.02);
box-shadow:0 30px 70px rgba(0,0,0,0.7),0 0 60px rgba(88,101,242,0.5);
}

.mockup-notch,.mockup-status-bar,.mockup-phone-center,.mockup-phone-large,.mockup-phone-small{display:none}

/* ============================================================
   CARDS
   ============================================================ */
.card-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:20px;
margin-top:40px;
}

.card{
background:var(--bg-card);
border:1px solid var(--border-color);
border-radius:16px;
padding:30px;
transition:all 0.3s ease;
box-sizing:border-box;
}

.card:hover{
border-color:var(--border-hover);
-webkit-transform:translateY(-5px);
transform:translateY(-5px);
background:var(--bg-card-hover);
}

.card h3{font-size:1.15rem;margin-bottom:12px;color:#ffffff}
.card p{text-align:left;font-size:0.95rem;margin-bottom:0;color:var(--text-muted)}
.card img{width:100%;border-radius:12px;margin-bottom:20px}

/* Category cards */
.category-showcase{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:40px}

.category-card{
background:linear-gradient(145deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02));
border:1px solid var(--border-color);
border-radius:18px;
padding:28px;
transition:all 0.4s ease;
position:relative;
overflow:hidden;
}

.category-card::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:3px;
background:linear-gradient(90deg,var(--primary),var(--primary-light),var(--gold));
-webkit-transform:scaleX(0);
transform:scaleX(0);
-webkit-transform-origin:left;
transform-origin:left;
transition:transform 0.5s ease;
}

.category-card:hover::before{-webkit-transform:scaleX(1);transform:scaleX(1)}

.category-card:hover{
-webkit-transform:translateY(-6px);
transform:translateY(-6px);
border-color:var(--border-hover);
box-shadow:0 15px 40px rgba(0,0,0,0.3);
}

.category-icon{
width:55px;
height:55px;
border-radius:14px;
background:linear-gradient(135deg,rgba(88,101,242,0.15),rgba(124,58,237,0.1));
display:flex;
align-items:center;
justify-content:center;
margin-bottom:18px;
color:var(--primary);
transition:all 0.3s ease;
}

.category-card:hover .category-icon{
background:linear-gradient(135deg,var(--primary),var(--primary-light));
color:#ffffff;
-webkit-transform:scale(1.08) rotate(-3deg);
transform:scale(1.08) rotate(-3deg);
}

.category-icon svg{width:26px;height:26px}
.category-card h3{font-size:1.15rem;color:#ffffff;margin-bottom:10px;font-weight:700}
.category-card p{color:var(--text-muted);font-size:0.93rem;line-height:1.65;text-align:left;margin-bottom:0}

/* Info cards */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:40px 0 30px}

.info-card{
background:var(--bg-card);
border:1px solid var(--border-color);
border-radius:14px;
padding:24px;
transition:all 0.3s ease;
}

.info-card:hover{
border-color:var(--border-hover);
-webkit-transform:translateY(-4px);
transform:translateY(-4px);
background:var(--bg-card-hover);
}

.info-card h3{color:#ffffff;font-size:1.05rem;margin-bottom:10px;font-weight:700}
.info-card p{color:var(--text-muted);font-size:0.92rem;line-height:1.6;text-align:left;margin-bottom:0}

.info-note{
color:var(--text-muted);
font-size:0.95rem;
text-align:left;
padding:20px 22px;
background:rgba(88,101,242,0.04);
border-left:3px solid var(--primary);
border-radius:8px;
margin-top:20px;
line-height:1.75;
}

.info-note a{
color:var(--primary);
text-decoration:none;
border-bottom:1px dashed var(--primary);
transition:all 0.3s;
}

.info-note a:hover{color:var(--primary-light);border-bottom-style:solid}

/* VIP cards */
.vip-benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:40px}

.vip-card{
background:linear-gradient(145deg,rgba(255,215,0,0.05),rgba(255,171,0,0.02));
border:1px solid rgba(255,215,0,0.15);
border-radius:16px;
padding:26px;
transition:all 0.3s ease;
position:relative;
overflow:hidden;
}

.vip-card::before{
content:'★';
position:absolute;
top:-10px;
right:10px;
font-size:5rem;
color:rgba(255,215,0,0.05);
font-weight:900;
}

.vip-card:hover{
-webkit-transform:translateY(-5px);
transform:translateY(-5px);
border-color:rgba(255,215,0,0.4);
box-shadow:0 15px 40px rgba(255,215,0,0.1);
}

.vip-card h3{color:var(--gold);font-size:1.1rem;margin-bottom:12px;font-weight:700;position:relative;z-index:1}
.vip-card p{color:var(--text-muted);font-size:0.92rem;line-height:1.7;text-align:left;margin-bottom:0;position:relative;z-index:1}

/* Tier cards */
.reward-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:40px}

.tier-card{
background:linear-gradient(145deg,rgba(0,200,83,0.04),rgba(0,230,118,0.02));
border:1px solid rgba(0,200,83,0.15);
border-radius:16px;
padding:28px 24px;
text-align:center;
transition:all 0.3s ease;
}

.tier-card:hover{
-webkit-transform:translateY(-5px);
transform:translateY(-5px);
border-color:rgba(0,200,83,0.4);
box-shadow:0 15px 40px rgba(0,200,83,0.15);
}

.tier-number{
display:inline-flex;
align-items:center;
justify-content:center;
width:55px;
height:55px;
border-radius:50%;
background:linear-gradient(135deg,#00c853,#00e676);
color:#002810;
font-size:1.4rem;
font-weight:900;
margin-bottom:15px;
box-shadow:0 6px 20px rgba(0,200,83,0.35);
}

.tier-card h3{color:#ffffff;font-size:1rem;margin-bottom:10px;font-weight:700}
.tier-card p{color:var(--text-muted);font-size:0.88rem;line-height:1.6;text-align:center;margin-bottom:0}

/* Safety cards */
.safety-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:40px}

.safety-card{
background:rgba(255,82,82,0.03);
border:1px solid rgba(255,82,82,0.12);
border-radius:14px;
padding:24px;
transition:all 0.3s ease;
}

.safety-card:hover{
border-color:rgba(255,82,82,0.3);
-webkit-transform:translateY(-4px);
transform:translateY(-4px);
}

.safety-card h3{
color:#ffffff;
font-size:1.05rem;
margin-bottom:10px;
font-weight:700;
display:flex;
align-items:center;
gap:8px;
}

.safety-card h3::before{
content:'';
width:6px;
height:6px;
border-radius:50%;
background:var(--danger);
box-shadow:0 0 10px var(--danger);
}

.safety-card p{color:var(--text-muted);font-size:0.92rem;line-height:1.65;text-align:left;margin-bottom:0}

/* ============================================================
   STEP NUMBER
   ============================================================ */
.step-number{
display:inline-flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
border-radius:50%;
background:linear-gradient(135deg,var(--primary),var(--primary-light));
color:#ffffff;
font-size:1.3rem;
font-weight:800;
margin-bottom:15px;
box-shadow:0 4px 15px rgba(88,101,242,0.4);
}

/* ============================================================
   BLOG POST
   ============================================================ */
.blog-post{max-width:820px;width:100%;margin:0 auto;padding:20px;box-sizing:border-box}

.blog-header{text-align:center;margin-bottom:40px;padding-top:20px}

.blog-header h1{
font-size:clamp(1.5rem,4vw,2.4rem);
font-weight:800;
line-height:1.3;
margin-bottom:20px;
color:#ffffff;
letter-spacing:-0.3px;
}

.blog-meta{
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
color:var(--text-muted);
font-size:0.85rem;
margin-bottom:30px;
}

.blog-meta span{
display:inline-flex;
align-items:center;
gap:5px;
background:rgba(255,255,255,0.04);
padding:5px 12px;
border-radius:20px;
border:1px solid rgba(255,255,255,0.06);
}

.blog-featured-image{
width:100%;
border-radius:20px;
margin-top:20px;
box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 0 1px rgba(88,101,242,0.25),0 0 60px rgba(88,101,242,0.15);
aspect-ratio:1200/630;
object-fit:cover;
background:linear-gradient(135deg,#1a1f3a,#0a0e27);
}

.blog-content{
font-size:1.05rem;
line-height:1.85;
color:#c5cde0;
width:100%;
box-sizing:border-box;
overflow-wrap:break-word;
word-wrap:break-word;
}

.blog-content h2{
font-size:clamp(1.3rem,3vw,1.7rem);
font-weight:700;
color:#ffffff;
margin:50px 0 20px;
padding-bottom:12px;
border-bottom:2px solid rgba(88,101,242,0.2);
line-height:1.3;
letter-spacing:-0.2px;
}

.blog-content h3{
font-size:clamp(1.1rem,2.5vw,1.3rem);
font-weight:700;
color:#ffffff;
margin:32px 0 15px;
line-height:1.4;
}

.blog-content p{margin-bottom:20px;text-align:left}
.blog-content strong{color:#ffffff;font-weight:600}

.blog-content a{
color:var(--primary);
text-decoration:none;
border-bottom:1px dashed var(--primary);
transition:all 0.3s;
}

.blog-content a:hover{color:var(--primary-light);border-bottom-style:solid}

.blog-content ul,.blog-content ol{margin:20px 0;padding-left:25px}
.blog-content li{margin-bottom:10px;color:#c5cde0}
.blog-content li::marker{color:var(--primary)}

/* ============================================================
   BLOG CTA
   ============================================================ */
.blog-cta{
display:flex;
gap:14px;
flex-wrap:wrap;
justify-content:center;
margin:55px 0;
padding:35px 25px;
background:linear-gradient(135deg,rgba(88,101,242,0.08),rgba(168,85,247,0.05));
border:1px solid rgba(88,101,242,0.2);
border-radius:20px;
}

.blog-cta .btn-primary{
padding:14px 28px;
border-radius:12px;
font-size:0.95rem;
font-weight:700;
text-decoration:none;
transition:all 0.3s ease;
display:inline-flex;
align-items:center;
gap:8px;
}

.blog-cta .btn-primary svg{width:18px;height:18px;flex-shrink:0;transition:transform 0.3s ease}

.blog-cta .btn-primary.register{background:linear-gradient(135deg,#00c853,#00e676);color:#002810;box-shadow:0 4px 20px rgba(0,200,83,0.5)}
.blog-cta .btn-primary.login{background:linear-gradient(135deg,#ffab00,#ffd700);color:#3d2400;box-shadow:0 4px 20px rgba(255,171,0,0.5)}
.blog-cta .btn-primary.telegram{background:linear-gradient(135deg,#0088cc,#00b0ff);color:#ffffff;box-shadow:0 4px 20px rgba(0,136,204,0.5)}

.blog-cta .btn-primary:hover{
-webkit-transform:translateY(-3px) scale(1.03);
transform:translateY(-3px) scale(1.03);
filter:brightness(1.1);
}

.blog-cta .btn-primary:hover svg{-webkit-transform:scale(1.2);transform:scale(1.2)}

.blog-cta .btn-primary.register svg{animation:iconPulse 2s ease-in-out infinite}
.blog-cta .btn-primary.login svg{animation:iconSlide 1.5s ease-in-out infinite}
.blog-cta .btn-primary.telegram svg{animation:iconFly 2s ease-in-out infinite}

/* Related articles */
.related-list{list-style:none;padding:0;margin:20px 0}
.related-list li{padding:12px 0;border-bottom:1px solid var(--border-color)}
.related-list li:last-child{border-bottom:none}

.related-list a{
color:var(--primary);
text-decoration:none;
font-weight:500;
transition:all 0.3s;
border:none;
display:inline-block;
}

.related-list a:hover{
color:var(--primary-light);
-webkit-transform:translateX(5px);
transform:translateX(5px);
}

.author-box{
background:var(--bg-card);
border:1px solid var(--border-color);
border-radius:14px;
padding:22px;
margin:40px 0;
font-size:0.95rem;
color:var(--text-muted);
}

.author-box p{margin:0;text-align:left}
.author-box strong{color:#ffffff}

/* ============================================================
   FAQ
   ============================================================ */
.faq-item{border-bottom:1px solid var(--border-color);padding:20px 0}

.faq-q{
font-weight:700;
color:#ffffff;
margin-bottom:8px;
font-size:1.05rem;
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center;
user-select:none;
transition:color 0.3s;
gap:15px;
}

.faq-q:hover{color:var(--primary)}
.faq-q span{font-size:1.5rem;font-weight:300;color:var(--primary);transition:transform 0.3s;flex-shrink:0}

.faq-a{
color:var(--text-muted);
font-size:0.95rem;
display:none;
margin-top:10px;
line-height:1.7;
}

.faq-item.active .faq-a{display:block}
.faq-item.active .faq-q{color:var(--primary)}

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section{
text-align:center;
padding:70px 20px;
background:radial-gradient(circle at 50% 50%,rgba(88,101,242,0.1) 0%,transparent 70%);
border-radius:20px;
margin:40px auto;
max-width:1000px;
}

.cta-section .hero-cta{margin-top:30px}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
text-align:center;
padding:40px 20px;
border-top:1px solid var(--border-color);
color:var(--text-muted);
font-size:0.85rem;
background:var(--bg-darker);
margin-top:40px;
}

footer a{
color:var(--text-muted);
text-decoration:none;
margin:0 8px;
transition:color 0.3s;
display:inline-block;
padding:4px 0;
}

footer a:hover{color:#ffffff}
.footer-links{margin-bottom:20px;line-height:2}
.footer-keywords{margin-top:20px;color:var(--text-dim);font-size:0.8rem}
.footer-warning{margin-top:20px;color:var(--danger);font-weight:bold}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeUp{
from{opacity:0;-webkit-transform:translateY(30px);transform:translateY(30px)}
to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
}

.animate{
animation:fadeUp 0.8s ease forwards;
-webkit-animation:fadeUp 0.8s ease forwards;
opacity:0;
}

.delay-1{animation-delay:0.2s;-webkit-animation-delay:0.2s}
.delay-2{animation-delay:0.4s;-webkit-animation-delay:0.4s}
.delay-3{animation-delay:0.6s;-webkit-animation-delay:0.6s}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
.navbar{padding:18px 4%}
.nav-links a{padding:6px 8px;font-size:0.85rem}
}

@media (max-width:768px){
body{font-size:15px}
.navbar{padding:15px 5%;justify-content:center}
.nav-links{display:none}
.hero{min-height:70vh;padding:30px 15px}
.hero-cta{flex-direction:column;align-items:center;max-width:320px;margin:0 auto}
.btn-primary{width:100%;padding:14px 20px;font-size:1rem}
.sticky-header{gap:6px;padding:10px 8px}
.btn-glow{padding:9px 14px;font-size:0.8rem;gap:5px;border-radius:10px}
.btn-glow .btn-icon{width:15px;height:15px}
.section{padding:50px 15px}
.card{padding:22px}
.blog-post{padding:15px}
.blog-content{font-size:1rem}
.blog-cta{flex-direction:column;padding:28px 18px}
.blog-cta .btn-primary{width:100%;padding:13px 20px}
.footer-links a{margin:4px 6px}
.ss-single{max-width:280px}
.ss-grid-2,.ss-grid-3,.ss-grid,.mockup-container,.screenshot-grid{
grid-template-columns:1fr;
gap:20px;
max-width:340px;
}
.ss-frame{border-radius:16px;padding:2px}
.ss-frame img{border-radius:14px}
.ss-frame-caption{font-size:0.78rem}
.mockup-phone{border-radius:16px;padding:2px}
.mockup-phone img{border-radius:14px}
}

@media (max-width:480px){
.logo{font-size:1.25rem}
.logo img{height:36px;width:36px}
.sticky-header{padding:8px 5px;gap:4px}
.btn-glow{padding:8px 11px;font-size:0.73rem;border-radius:8px}
.btn-glow .btn-icon{width:13px;height:13px}
.card-grid{grid-template-columns:1fr;gap:15px}
.blog-header h1{font-size:1.4rem}
.blog-meta{gap:8px;font-size:0.75rem}
.blog-meta span{padding:4px 10px}
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
a:focus-visible,
button:focus-visible{
outline:2px solid var(--primary);
outline-offset:3px;
border-radius:4px;
}

@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important;
}
}

@media print{
.sticky-header,.navbar,footer{display:none}
body{background:#ffffff;color:#000000}
}
/* ============================================================
   INFO TABLE (for blog tables)
   ============================================================ */
.info-table{
width:100%;
border-collapse:collapse;
margin:25px 0;
background:var(--bg-card);
border-radius:12px;
overflow:hidden;
border:1px solid var(--border-color);
}
.info-table tr{border-bottom:1px solid var(--border-color)}
.info-table tr:last-child{border-bottom:none}
.info-table th{
background:linear-gradient(135deg,rgba(88,101,242,0.15),rgba(168,85,247,0.1));
color:#ffffff;
padding:14px 18px;
text-align:left;
font-weight:700;
font-size:0.95rem;
}
.info-table td{
padding:12px 18px;
color:var(--text-muted);
font-size:0.92rem;
}
.info-table tr:hover td{
background:rgba(255,255,255,0.02);
color:var(--text-main);
}
@media (max-width:768px){
.info-table th,.info-table td{padding:10px 12px;font-size:0.85rem}
}