/* =========================================================
DEVMIXA AUTHOR PAGE
ULTRA PREMIUM FINAL CSS
========================================================= */

.devmixa-author-wrapper{
position:relative;
padding:140px 20px;
background:linear-gradient(180deg,#eef2ff 0%,#ffffff 60%);
font-family:'Inter',sans-serif;
overflow:hidden;
}

/* =====================================================
BACKGROUND SHAPES
===================================================== */

.author-bg-shapes{
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
}

.shape{
position:absolute;
border-radius:50%;
filter:blur(120px);
opacity:.35;
animation:floatOrb 16s infinite alternate ease-in-out;
}

.shape-1{
width:500px;
height:500px;
background:#0d4f4f;
top:-150px;
left:-150px;
}

.shape-2{
width:420px;
height:420px;
background:#9333ea;
bottom:-160px;
right:-140px;
}

.shape-3{
width:320px;
height:320px;
background:#ff6b4a;
top:40%;
left:45%;
}

@keyframes floatOrb{
0%{transform:translateY(0)}
100%{transform:translateY(-60px)}
}

/* =====================================================
CONTAINER
===================================================== */

.devmixa-author-container{
max-width:1150px;
margin:auto;
position:relative;
z-index:2;
}

/* =====================================================
HERO CARD
===================================================== */

.author-hero-card{
background:#ffffff;
border-radius:26px;
padding:70px;
box-shadow:
0 40px 120px rgba(0,0,0,.08),
0 10px 30px rgba(0,0,0,.05);
margin-bottom:80px;
position:relative;
overflow:hidden;
}

.author-hero-card:before{
content:"";
position:absolute;
height:4px;
width:100%;
top:0;
left:0;
background:linear-gradient(90deg,#0d4f4f,#9333ea);
}

/* =====================================================
GRID
===================================================== */

.author-hero-grid{
display:grid;
grid-template-columns:260px 1fr;
gap:60px;
align-items:center;
}

/* =====================================================
IMAGE FRAME
===================================================== */

.author-image-wrap{
position:relative;
}

.author-image-wrap img{
width:240px;
height:240px;
object-fit:cover;
border-radius:22px;
border:8px solid #fff;
box-shadow:
0 25px 80px rgba(0,0,0,.12),
0 8px 20px rgba(0,0,0,.08);
transition:.4s;
}

.author-image-wrap img:hover{
transform:scale(1.05);
}

.image-glow-ring{
position:absolute;
inset:-16px;
border-radius:26px;
background:linear-gradient(135deg,#0d4f4f,#9333ea);
opacity:.25;
filter:blur(25px);
z-index:-1;
}

/* =====================================================
TEXT
===================================================== */

.author-badge{
display:inline-block;
background:#eef2ff;
color:#0d4f4f;
font-size:13px;
font-weight:600;
padding:6px 14px;
border-radius:40px;
margin-bottom:14px;
}

.author-title{
font-size:42px;
font-weight:800;
color:#0f172a;
margin-bottom:6px;
letter-spacing:-.5px;
}

.author-role{
font-size:16px;
color:#0d4f4f;
font-weight:600;
margin-bottom:18px;
}

.author-short{
font-size:17px;
line-height:1.8;
color:#475569;
max-width:640px;
}

/* =====================================================
SOCIAL BUTTONS
===================================================== */

.author-social{
margin-top:24px;
display:flex;
gap:14px;
}

.author-social a{
padding:11px 22px;
border-radius:40px;
text-decoration:none;
font-size:14px;
font-weight:600;
color:#fff;
background:linear-gradient(135deg,#0d4f4f,#9333ea);
box-shadow:0 15px 40px rgba(99,102,241,.35);
transition:.3s;
}

.author-social a:hover{
transform:translateY(-4px);
box-shadow:0 25px 60px rgba(99,102,241,.5);
}

/* =====================================================
CONTENT GRID
===================================================== */

.author-content{
display:grid;
gap:40px;
}

/* =====================================================
CONTENT CARD
===================================================== */

.content-card{
background:#ffffff;
border-radius:22px;
padding:60px;
box-shadow:
0 25px 80px rgba(0,0,0,.07),
0 8px 20px rgba(0,0,0,.05);
transition:.35s;
position:relative;
}

.content-card:hover{
transform:translateY(-6px);
box-shadow:
0 35px 100px rgba(0,0,0,.1),
0 10px 25px rgba(0,0,0,.06);
}

.content-card:before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:linear-gradient(90deg,#0d4f4f,#9333ea);
border-radius:4px 4px 0 0;
}

/* =====================================================
HEADINGS
===================================================== */

.content-card h2{
font-size:30px;
margin-bottom:18px;
font-weight:700;
color:#0f172a;
position:relative;
}

.content-card h2:after{
content:"";
width:60px;
height:3px;
background:linear-gradient(90deg,#0d4f4f,#9333ea);
display:block;
margin-top:10px;
border-radius:2px;
}

/* =====================================================
TEXT
===================================================== */

.content-card p{
font-size:17px;
line-height:1.9;
color:#475569;
margin-bottom:18px;
}

/* =====================================================
QUOTE CARD
===================================================== */

.highlight-card{
background:linear-gradient(135deg,#0d4f4f,#9333ea);
border-radius:24px;
padding:70px;
text-align:center;
position:relative;
box-shadow:0 30px 90px rgba(99,102,241,.35);
}

.highlight-card p{
color:#ffffff !important;
font-size:22px;
font-weight:600;
line-height:1.7;
max-width:820px;
margin:auto;
}

.highlight-card:before{
content:"“";
position:absolute;
font-size:140px;
color:rgba(255,255,255,.18);
top:10px;
left:40px;
font-family:serif;
}

.highlight-card:after{
content:"”";
position:absolute;
font-size:140px;
color:rgba(255,255,255,.18);
bottom:10px;
right:40px;
font-family:serif;
}

/* =====================================================
RESPONSIVE
===================================================== */

@media (max-width:900px){

.author-hero-grid{
grid-template-columns:1fr;
text-align:center;
}

.author-image-wrap img{
width:200px;
height:200px;
}

.author-title{
font-size:34px;
}

.content-card{
padding:40px;
}

.highlight-card{
padding:50px 30px;
}

}