.reca-section{
position:relative;
padding:120px 0 36px;
overflow:hidden;
background:
radial-gradient(circle at 10% 18%, rgba(95,201,223,.14), transparent 22%),
radial-gradient(circle at 86% 78%, rgba(17,143,166,.14), transparent 24%);
color:#fff;
}

.reca-section::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
background-size:58px 58px;
mask-image:linear-gradient(180deg, rgba(0,0,0,.62), transparent 100%);
opacity:.22;
pointer-events:none;
}

.reca-shell{
position:relative;
z-index:1;
display:grid;
grid-template-columns:minmax(0,.9fr) minmax(340px,1.1fr);
gap:70px;
align-items:center;
min-width:0;
direction:ltr;
}

.reca-content{
max-width:620px;
min-width:0;
animation:recaFadeUp .7s ease both;
direction:rtl;
}

.reca-kicker{
display:inline-flex;
align-items:center;
gap:10px;
padding:10px 16px;
margin-bottom:22px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(95,201,223,.18);
color:#d8f7fb;
font-size:14px;
}

.reca-kicker::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#7be6f3;
box-shadow:0 0 14px rgba(123,230,243,.88);
}

.reca-title{
margin:0 0 18px;
font-size:clamp(34px, 4.4vw, 58px);
line-height:1.08;
letter-spacing:-.03em;
overflow-wrap:anywhere;
}

.reca-text{
margin:0 0 30px;
font-size:18px;
line-height:1.95;
color:rgba(232,244,247,.78);
}

.reca-points{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:14px;
margin-bottom:34px;
min-width:0;
}

.reca-point{
display:flex;
align-items:flex-start;
gap:14px;
padding:18px 18px;
border-radius:22px;
background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(10px);
min-width:0;
animation:recaFadeUp .7s ease both;
}

.reca-point:nth-child(2){ animation-delay:.08s; }
.reca-point:nth-child(3){ animation-delay:.16s; }
.reca-point:nth-child(4){ animation-delay:.24s; }

.reca-point-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
border-radius:14px;
background:rgba(95,201,223,.12);
border:1px solid rgba(95,201,223,.18);
color:#88e9f5;
flex:0 0 auto;
}

.reca-point-icon svg{
width:20px;
height:20px;
stroke-width:1.8;
}

.reca-point span:last-child{
display:block;
font-size:15px;
line-height:1.9;
color:#effbff;
}

.reca-actions{
display:flex;
align-items:center;
justify-content:flex-end;
gap:14px;
}

.reca-btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:190px;
min-height:56px;
padding:0 28px;
border-radius:18px;
text-decoration:none;
font-size:16px;
font-weight:800;
transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.reca-btn-primary{
background:linear-gradient(135deg, #118fa6, #5fc9df);
color:#fff;
box-shadow:0 18px 34px rgba(17,143,166,.24);
}

.reca-btn-primary:hover{
transform:translateY(-2px);
box-shadow:0 24px 44px rgba(17,143,166,.32);
background:linear-gradient(135deg, #16a7c2, #7ce4f2);
}

.reca-visual{
position:relative;
min-height:640px;
min-width:0;
animation:recaFadeUp .9s ease both;
direction:rtl;
}

.reca-visual::before{
display:none;
}

.reca-visual::after{
display:none;
}

.reca-showcase{
position:relative;
margin:36px 30px 0 0;
padding:18px;
border-radius:38px;
background:linear-gradient(180deg, rgba(8,31,43,.92), rgba(4,17,26,.94));
border:1px solid rgba(255,255,255,.08);
box-shadow:0 44px 96px rgba(0,0,0,.3);
backdrop-filter:blur(16px);
overflow:hidden;
z-index:1;
}

.reca-showcase::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(135deg, rgba(126,223,235,.07), transparent 34%, transparent 62%, rgba(126,223,235,.04));
pointer-events:none;
}

.reca-showcase__screen{
position:relative;
min-height:511px;
border-radius:28px;
background-image:var(--reca-mockup-image);
background-repeat:no-repeat;
background-position:center center;
background-size:contain;
background-attachment:fixed;
box-shadow:inset 0 0 0 1px rgba(12,36,52,.08);
}

.reca-device{
display:none;
}

.reca-orb{
position:absolute;
border-radius:50%;
filter:blur(12px);
pointer-events:none;
}

.reca-orb-one{
top:20px;
right:12px;
width:210px;
height:210px;
background:radial-gradient(circle, rgba(95,201,223,.26), transparent 68%);
z-index:0;
}

.reca-orb-two{
bottom:36px;
left:0;
width:260px;
height:260px;
background:radial-gradient(circle, rgba(17,143,166,.22), transparent 68%);
z-index:0;
}

.reca-device{
position:relative;
padding:24px;
margin:42px 28px 0 0;
border-radius:34px;
background:linear-gradient(180deg, rgba(8,31,43,.92), rgba(4,17,26,.94));
border:1px solid rgba(255,255,255,.08);
box-shadow:0 44px 96px rgba(0,0,0,.34);
backdrop-filter:blur(16px);
overflow:hidden;
min-width:0;
z-index:1;
}

.reca-device::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(135deg, rgba(126,223,235,.07), transparent 34%, transparent 62%, rgba(126,223,235,.04));
pointer-events:none;
}

.reca-device__top{
position:relative;
z-index:1;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-bottom:22px;
flex-wrap:wrap;
}

.reca-device__brand{
display:flex;
flex-direction:column;
gap:8px;
}

.reca-device__badge{
display:inline-flex;
align-items:center;
width:max-content;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.08);
font-size:12px;
color:#d7f6fb;
}

.reca-device__brand strong{
font-size:18px;
line-height:1.4;
}

.reca-device__live{
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 14px;
border-radius:999px;
background:rgba(27,196,125,.12);
border:1px solid rgba(27,196,125,.22);
color:#c9ffe4;
font-size:13px;
}

.reca-device__live::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#37d98b;
box-shadow:0 0 14px rgba(55,217,139,.8);
}

.reca-device__body{
position:relative;
z-index:1;
display:grid;
grid-template-columns:1.08fr .92fr;
gap:18px;
min-width:0;
}

.reca-device__orders,
.reca-device__aside{
display:grid;
gap:16px;
min-width:0;
}

.reca-order-card,
.reca-stat,
.reca-chart{
padding:20px;
border-radius:24px;
background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.08);
min-width:0;
}

.reca-order-card{
animation:recaFloatCard 5.6s ease-in-out infinite;
}

.reca-order-card:nth-child(2){ animation-delay:.25s; }
.reca-order-card:nth-child(3){ animation-delay:.5s; }

.reca-order-card--featured{
background:linear-gradient(180deg, rgba(95,201,223,.16), rgba(255,255,255,.04));
border-color:rgba(95,201,223,.2);
}

.reca-order-card__head{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:12px;
}

.reca-order-card__head strong{
font-size:16px;
}

.reca-order-card__head span{
display:inline-flex;
align-items:center;
padding:6px 10px;
border-radius:999px;
background:rgba(255,255,255,.06);
font-size:12px;
color:#d7f6fb;
}

.reca-order-card p{
margin:0 0 8px;
font-size:15px;
color:#fff;
}

.reca-order-card small{
display:block;
font-size:13px;
line-height:1.8;
color:rgba(232,244,247,.7);
}

.reca-stat strong{
display:block;
margin:10px 0 8px;
font-size:38px;
line-height:1;
color:#8be9f5;
}

.reca-stat small,
.reca-chart small{
display:block;
font-size:13px;
color:rgba(215,246,251,.72);
}

.reca-stat span{
display:block;
font-size:14px;
line-height:1.8;
color:rgba(232,244,247,.74);
}

.reca-stat--accent strong{
color:#6ff0a6;
}

.reca-chart__bars{
display:flex;
align-items:flex-end;
gap:10px;
height:150px;
margin-top:18px;
padding-top:18px;
}

.reca-chart__bars span{
display:block;
flex:1;
min-height:28px;
border-radius:14px 14px 8px 8px;
background:linear-gradient(180deg, #8be9f5 0%, #169ab2 100%);
box-shadow:0 12px 24px rgba(22,154,178,.22);
animation:recaBars 4.4s ease-in-out infinite;
}

.reca-chart__bars span:nth-child(2){ animation-delay:.15s; }
.reca-chart__bars span:nth-child(3){ animation-delay:.3s; }
.reca-chart__bars span:nth-child(4){ animation-delay:.45s; }
.reca-chart__bars span:nth-child(5){ animation-delay:.6s; }

.reca-float{
position:absolute;
padding:18px 20px;
border-radius:20px;
background:rgba(7,28,40,.88);
border:1px solid rgba(95,201,223,.18);
box-shadow:0 22px 40px rgba(0,0,0,.22);
backdrop-filter:blur(14px);
max-width:250px;
animation:recaFloat 5.4s ease-in-out infinite;
z-index:1;
}

.reca-float small{
display:block;
margin-bottom:8px;
font-size:13px;
color:rgba(215,246,251,.72);
}

.reca-float strong{
display:block;
font-size:16px;
line-height:1.8;
color:#fff;
}

.reca-float-top{
top:auto;
bottom:-24px;
left:-57px;
}

.reca-float-bottom{
right:0;
top:16px;
bottom:auto;
left:auto;
animation-delay:.45s;
}

@keyframes recaFadeUp{
from{
opacity:0;
transform:translateY(18px);
}
to{
opacity:1;
transform:translateY(0);
}
}

@keyframes recaFloat{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-10px);
}
}

@keyframes recaFloatCard{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-4px);
}
}

@keyframes recaBars{
0%,100%{
transform:scaleY(.96);
}
50%{
transform:scaleY(1.04);
}
}

@media (max-width: 1120px){
.reca-shell{
grid-template-columns:1fr;
gap:42px;
direction:rtl;
}

.reca-content{
max-width:none;
}

.reca-visual{
min-height:0;
}

.reca-showcase{
margin:0;
}

.reca-showcase__screen{
min-height:560px;
background-attachment:scroll;
}

.reca-float-top{
left:auto;
right:14px;
}
}

@media (max-width: 767px){
.reca-section{
padding:88px 0 12px;
}

.reca-title{
font-size:clamp(30px, 9vw, 42px);
}

.reca-text{
font-size:16px;
margin-bottom:24px;
}

.reca-points{
grid-template-columns:1fr;
gap:12px;
margin-bottom:28px;
}

.reca-point{
padding:16px;
border-radius:20px;
}

.reca-btn{
width:100%;
min-width:0;
}

.reca-device{
display:none;
}

.reca-showcase{
padding:12px;
border-radius:26px;
}

.reca-showcase__screen{
min-height:360px;
border-radius:20px;
background-size:cover;
background-position:center top;
}

.reca-device__body{
grid-template-columns:1fr;
}

.reca-stat strong{
font-size:32px;
}

.reca-float{
position:relative;
top:auto;
right:auto;
left:auto;
bottom:auto;
max-width:none;
margin-top:16px;
}
}