:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-ed56145 */:root{

--bg:#f5f7fb;
--white:#ffffff;

--primary:#2563eb;
--primary-dark:#1d4ed8;

--secondary:#0f172a;

--text:#1f2937;

--muted:#6b7280;

--border:#e5e7eb;

--success:#10b981;

--warning:#f59e0b;

--danger:#ef4444;

--shadow:0 12px 35px rgba(0,0,0,.08);

--radius:22px;

--transition:.35s ease;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;

background:var(--bg);

color:var(--text);

line-height:1.7;

overflow-x:hidden;

}

img{

max-width:100%;

display:block;

}

svg{

display:block;

}

a{

text-decoration:none;

}

.page-wrap{

width:100%;

overflow:hidden;

}

.container{

width:min(1280px,92%);

margin:auto;

}

/*==========================
SECTION
==========================*/

.section{

padding:90px 0;

}

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

.hero{

padding:120px 0;

background:

radial-gradient(circle at top left,#dbeafe 0%,transparent 45%),

radial-gradient(circle at bottom right,#ede9fe 0%,transparent 45%),

linear-gradient(180deg,#ffffff,#f7f9fc);

}

.hero-content{

max-width:820px;

margin:auto;

text-align:center;

}

.hero-badge{

display:inline-flex;

padding:10px 18px;

border-radius:999px;

background:#eff6ff;

color:var(--primary);

font-weight:700;

font-size:14px;

margin-bottom:28px;

}

.hero h1{

font-size:64px;

font-weight:900;

line-height:1.1;

margin-bottom:25px;

color:var(--secondary);

}

.hero p{

font-size:19px;

color:var(--muted);

margin-bottom:40px;

}

.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

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

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

border-radius:14px;

font-size:16px;

font-weight:700;

transition:var(--transition);

}

.btn-primary{

background:linear-gradient(135deg,#2563eb,#3b82f6);

color:#fff;

box-shadow:0 12px 25px rgba(37,99,235,.30);

}

.btn-primary:hover{

transform:translateY(-5px);

box-shadow:0 18px 35px rgba(37,99,235,.35);

}

.btn-outline{

border:2px solid var(--primary);

color:var(--primary);

background:#fff;

}

.btn-outline:hover{

background:var(--primary);

color:#fff;

}

/*==========================
DOWNLOAD CARD
==========================*/

.download-card{

background:#fff;

border-radius:30px;

padding:45px;

box-shadow:var(--shadow);

position:relative;

overflow:hidden;

margin-top:50px;

}

.download-card::before{

content:"";

position:absolute;

inset:0;

padding:2px;

border-radius:30px;

background:linear-gradient(
90deg,

#2563eb,

#7c3aed,

#06b6d4,

#2563eb

);

background-size:300%;

animation:borderMove 8s linear infinite;

-webkit-mask:

linear-gradient(#fff 0 0) content-box,

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

pointer-events:none;

}

@keyframes borderMove{

0%{

background-position:0%;

}

100%{

background-position:300%;

}

}

/*==========================
CARD HEADER
==========================*/

.card-header{

display:flex;

align-items:center;

gap:25px;

flex-wrap:wrap;

margin-bottom:35px;

}

.app-icon{

width:90px;

height:90px;

border-radius:25px;

display:flex;

align-items:center;

justify-content:center;

background:#eff6ff;

box-shadow:0 12px 30px rgba(37,99,235,.18);

}

.app-info h2{

font-size:34px;

font-weight:800;

margin-bottom:8px;

color:var(--secondary);

}

.rating{

color:#f59e0b;

letter-spacing:3px;

margin-bottom:8px;

}

.app-info p{

color:var(--muted);

}

/*==========================
DOWNLOAD TABLE
==========================*/

.download-table{

display:flex;

flex-direction:column;

gap:18px;

margin-top:25px;

}

.table-row{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 22px;

background:#f8fafc;

border:1px solid #e5e7eb;

border-radius:16px;

transition:.3s;

}

.table-row:hover{

transform:translateX(8px);

border-color:#2563eb;

}

.table-row span{

font-weight:600;

color:var(--muted);

}

.table-row strong{

font-weight:700;

color:var(--secondary);

}

/*==========================
DOWNLOAD BOX
==========================*/

.download-box{

margin-top:35px;

padding:35px;

border-radius:22px;

background:linear-gradient(135deg,#111827,#1e293b);

color:#fff;

text-align:center;

}

.download-box h2{

font-size:28px;

margin-bottom:15px;
color: #fff;

}

.download-box p{

color:#cbd5e1;

margin-bottom:25px;

}

.download-btn{

display:inline-flex;

padding:18px 45px;

background:#fff;

color:#111827;

font-weight:700;

border-radius:14px;

transition:.3s;

}

.download-btn:hover{

transform:translateY(-4px);

background:#2563eb;

color:#fff;

}
/*==================================================
PART 3B
Features • FAQ • Support • Cards
==================================================*/

/*==========================
SECTION TITLE
==========================*/

.section-title{
    text-align:center;
    max-width:850px;
    margin:0 auto 60px;
}

.section-title h2{
    font-size:48px;
    font-weight:800;
    color:var(--secondary);
    margin-bottom:18px;
}

.section-title p{
    font-size:18px;
    color:var(--muted);
    line-height:1.8;
}

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

.feature-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px;

}

.feature-box{

    position:relative;

    background:#ffffff;

    padding:35px;

    border-radius:24px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s;

}

.feature-box::before{

    content:"";

    position:absolute;

    inset:0;

    padding:2px;

    border-radius:24px;

    background:linear-gradient(
        135deg,
        #2563eb,
        #7c3aed,
        #06b6d4,
        #2563eb
    );

    background-size:300%;

    animation:borderMove 8s linear infinite;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

}

.feature-box:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(37,99,235,.15);

}

.feature-box h3{

    font-size:26px;

    color:var(--secondary);

    margin-bottom:14px;

}

.feature-box p{

    color:var(--muted);

    line-height:1.8;

}

/*==========================
SUPPORT BOX
==========================*/

.support-box{

    text-align:center;

    padding:70px 45px;

    border-radius:30px;

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #111827,
        #1e3a8a
    );

    color:#ffffff;

}

.support-box::before{

    content:"";

    position:absolute;

    inset:0;

    padding:2px;

    border-radius:30px;

    background:linear-gradient(
        135deg,
        #3b82f6,
        #06b6d4,
        #7c3aed,
        #3b82f6
    );

    background-size:300%;

    animation:borderMove 8s linear infinite;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

}

.support-box h2{

    color:#ffffff;

    font-size:44px;

    margin-bottom:20px;

}

.support-box p{

    max-width:720px;

    margin:0 auto 35px;

    color:#dbeafe;

    font-size:18px;

}

/*==========================
FAQ
==========================*/

.faq{

    max-width:1000px;

    margin:auto;

}

.faq details{

    background:#ffffff;

    border-radius:20px;

    margin-bottom:18px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s;

}

.faq details:hover{

    transform:translateY(-4px);

}

.faq summary{

    cursor:pointer;

    list-style:none;

    font-size:20px;

    font-weight:700;

    padding:24px 28px;

    position:relative;

    color:var(--secondary);

}

.faq summary::-webkit-details-marker{

    display:none;

}

.faq summary::after{

    content:"+";

    position:absolute;

    right:28px;

    top:22px;

    font-size:30px;

    color:var(--primary);

    transition:.3s;

}

.faq details[open] summary::after{

    content:"−";

}

.faq details p{

    padding:0 28px 24px;

    color:var(--muted);

    line-height:1.8;

}

/*==========================
GLASS CARD
==========================*/

.glass-card{

    background:rgba(255,255,255,.75);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.5);

    border-radius:24px;

    box-shadow:var(--shadow);

}

/*==========================
ANIMATION
==========================*/

.fade-up{

    animation:fadeUp .8s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==========================
SCROLLBAR
==========================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eef2ff;

}

::-webkit-scrollbar-thumb{

    background:#3b82f6;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#2563eb;

}
/*==================================================
PART 3C
Responsive • Utilities • Final Polish
==================================================*/

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

img{
    max-width:100%;
    height:auto;
}

/*==========================
UTILITY
==========================*/

.text-center{
    text-align:center;
}

.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}
.mt-40{margin-top:40px;}
.mt-60{margin-top:60px;}

.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}
.mb-40{margin-bottom:40px;}
.mb-60{margin-bottom:60px;}

/*==========================
SMOOTH EFFECT
==========================*/

*{
    transition:
    background .30s ease,
    color .30s ease,
    border-color .30s ease,
    box-shadow .30s ease,
    transform .30s ease;
}

/*==========================
BUTTON EFFECT
==========================*/

.btn:active{
    transform:scale(.98);
}

.download-btn:active{
    transform:scale(.98);
}

/*==========================
CARD HOVER
==========================*/

.download-card:hover{

    transform:translateY(-8px);

    box-shadow:0 30px 60px rgba(37,99,235,.12);

}

.feature-box:hover{

    border-color:#2563eb;

}

.table-row:hover{

    background:#f1f5f9;

}

.support-box:hover{

    transform:translateY(-6px);

}

/*==========================
FOCUS
==========================*/

a:focus,
button:focus,
summary:focus{

    outline:3px solid #93c5fd;

    outline-offset:4px;

}

/*==========================
TABLET
==========================*/

@media (max-width:1024px){

.hero{

padding:90px 0;

}

.hero h1{

font-size:52px;

}

.section{

padding:70px 0;

}

.download-card{

padding:35px;

}

.feature-list{

grid-template-columns:1fr;

gap:22px;

}

.support-box{

padding:60px 35px;

}

.section-title h2{

font-size:40px;

}

}

/*==========================
MOBILE
==========================*/

@media (max-width:768px){

.container{

width:92%;

}

.hero{

padding:70px 0;

}

.hero h1{

font-size:40px;

line-height:1.15;

}

.hero p{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.btn{

width:100%;

}

.download-btn{

width:100%;

justify-content:center;

}

.card-header{

flex-direction:column;

align-items:flex-start;

}

.table-row{

flex-direction:column;

align-items:flex-start;

gap:8px;

}

.table-row strong{

font-size:17px;

}

.section{

padding:60px 0;

}

.section-title{

margin-bottom:40px;

}

.section-title h2{

font-size:34px;

}

.feature-box{

padding:28px;

}

.support-box{

padding:45px 25px;

}

.support-box h2{

font-size:32px;

}

.faq summary{

font-size:18px;

padding:20px;

}

.faq details p{

padding:0 20px 20px;

}

}

/*==========================
SMALL MOBILE
==========================*/

@media (max-width:480px){

.hero h1{

font-size:32px;

}

.hero-badge{

font-size:12px;

padding:8px 15px;

}

.download-card{

padding:22px;

}

.app-icon{

width:72px;

height:72px;

}

.app-info h2{

font-size:26px;

}

.download-box{

padding:25px;

}

.download-box h3{

font-size:24px;

}

.feature-box h3{

font-size:22px;

}

.section-title h2{

font-size:28px;

}

.support-box h2{

font-size:28px;

}

}

/*==========================
LARGE SCREEN
==========================*/

@media (min-width:1600px){

.container{

max-width:1450px;

}

.hero h1{

font-size:72px;

}

.section-title h2{

font-size:54px;

}

}

/*==========================
PRINT
==========================*/

@media print{

.hero,
.support-box,
.hero-buttons{

display:none;

}

body{

background:#fff;

}

.download-card,
.feature-box{

box-shadow:none;

border:1px solid #ccc;

}

}

/*==========================
REDUCED MOTION
==========================*/

@media (prefers-reduced-motion:reduce){

*,
*::before,
*::after{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}

/*==========================
FINAL POLISH
==========================*/

html{

scroll-padding-top:80px;

}

body{

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

text-rendering:optimizeLegibility;

}

::selection{

background:#2563eb;

color:#ffffff;

}

.download-card,
.feature-box,
.support-box,
.faq details{

will-change:transform;

}
/*==================================================
PART 3D
Premium Animation & UI Effects
==================================================*/

/*==========================
FLOATING HERO
==========================*/

.hero{
    position:relative;
    overflow:hidden;
}

.hero::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    border-radius:50%;
    background:rgba(37,99,235,.08);
    top:-120px;
    left:-120px;
    filter:blur(20px);
    animation:floatBlob1 10s ease-in-out infinite;
}

.hero::after{
    content:"";
    position:absolute;
    width:380px;
    height:380px;
    border-radius:50%;
    background:rgba(124,58,237,.08);
    right:-150px;
    bottom:-150px;
    filter:blur(30px);
    animation:floatBlob2 12s ease-in-out infinite;
}

@keyframes floatBlob1{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(35px);

}

}

@keyframes floatBlob2{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-35px);

}

}

/*==========================
GLASS EFFECT
==========================*/

.download-card,
.feature-box,
.faq details{

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

}

/*==========================
ICON EFFECT
==========================*/

.app-icon{

transition:.5s;

}

.download-card:hover .app-icon{

transform:rotate(-6deg) scale(1.08);

}

/*==========================
FEATURE ICON
==========================*/

.feature-box::after{

content:"✓";

position:absolute;

right:25px;

top:20px;

font-size:24px;

font-weight:700;

color:#2563eb20;

}

/*==========================
DOWNLOAD BUTTON
==========================*/

.download-btn{

position:relative;

overflow:hidden;

}

.download-btn::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:100%;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.4),

transparent

);

transition:.8s;

}

.download-btn:hover::before{

left:120%;

}

/*==========================
BUTTON GLOW
==========================*/

.btn-primary:hover{

box-shadow:

0 0 20px rgba(37,99,235,.35),

0 0 40px rgba(37,99,235,.20);

}

/*==========================
FAQ
==========================*/

.faq details{

border:1px solid transparent;

}

.faq details:hover{

border-color:#3b82f6;

}

/*==========================
SUPPORT
==========================*/

.support-box{

overflow:hidden;

}

.support-box::after{

content:"";

position:absolute;

width:450px;

height:450px;

border-radius:50%;

background:rgba(255,255,255,.05);

top:-220px;

right:-220px;

}

/*==========================
DOWNLOAD TABLE
==========================*/

.table-row{

position:relative;

overflow:hidden;

}

.table-row::before{

content:"";

position:absolute;

left:0;

top:0;

width:4px;

height:100%;

background:#2563eb;

transform:scaleY(0);

transition:.3s;

}

.table-row:hover::before{

transform:scaleY(1);

}

/*==========================
CARD SHADOW
==========================*/

.download-card:hover,

.feature-box:hover{

box-shadow:

0 25px 60px rgba(0,0,0,.12);

}

/*==========================
SMOOTH FADE
==========================*/

.hero,
.section,
.download-card,
.feature-box,
.support-box{

animation:fadeIn .8s ease;

}

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

/*==========================
END
==========================*//* End custom CSS */