:root{
    --card-solid: rgba(10,12,18,0.92);
    --card-solid-soft: rgba(10,12,18,0.88);
    --bg:#050709;
    --panel: rgba(255,255,255,0.04);
    --panel2: rgba(255,255,255,0.06);
    --border: rgba(255,255,255,0.10);
    --text: rgba(255,255,255,0.95);
    --muted: rgba(255,255,255,0.70);
    --dim: rgba(255,255,255,0.55);

    --cyan:#00bfff;
    --pink:#FF828A;
    --cyan-light: rgba(0,191,255,0.16);
    --cyan-dark: rgba(0,191,255,0.08);

    --shadow: 0 18px 55px rgba(0,0,0,0.65);
    --radius: 14px;
    --radius2: 20px;

    --max: 1080px;


    --ring: 0 0 0 3px rgba(0,191,255,0.20);
    --ring2: 0 0 0 3px rgba(255,130,138,0.18);
    --ease: cubic-bezier(0.16,1,0.3,1);
    --hdr: 64px;
}

/* Landing content additions */
.dot--cyan{
    background:var(--cyan) !important;
    box-shadow:0 0 18px rgba(0,191,255,0.55) !important;
}

.text-link{
    color:rgba(120,218,255,0.98);
    text-decoration:underline;
    text-decoration-color:rgba(0,191,255,0.35);
    text-underline-offset:3px;
}

.price-note{ margin-top:6px; }
.tag--featured{
    border-color:rgba(0,191,255,0.25) !important;
    background:rgba(0,191,255,0.05) !important;
    color:rgba(200,240,255,0.95) !important;
}

.ecosystem{
    min-height:0;
    padding:24px;
}
.ecosystem-links{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-top:6px;
}
.service-link{
    display:flex;
    flex-direction:column;
    gap:7px;
    padding:16px;
    border:1px solid rgba(255,255,255,0.10);
    border-radius:14px;
    background:rgba(0,0,0,0.20);
    font-weight:750;
    transition:220ms var(--ease);
}
.service-link span{ color:var(--muted); font-size:12px; font-weight:450; line-height:1.5; }
.service-link:hover{ transform:translateY(-2px); border-color:rgba(0,191,255,0.35); background:rgba(0,191,255,0.05); }

.final-cta{
    min-height:0;
    padding:24px;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}
.final-cta h2{ margin:0 0 10px; }
.final-cta .btn{ flex:0 0 auto; }

.card.download-card{
    min-height:0;
    display:grid;
    grid-template-columns:minmax(0,.82fr) minmax(420px,1.18fr);
    gap:34px;
    padding:28px;
    overflow:hidden;
    isolation:isolate;
}
.download-card::before{
    content:"";
    position:absolute;
    z-index:-1;
    width:360px;
    height:360px;
    left:-150px;
    bottom:-220px;
    border-radius:50%;
    background:rgba(0,191,255,.12);
    filter:blur(45px);
    pointer-events:none;
}
.download-copy{ display:flex; flex-direction:column; justify-content:center; }
.download-copy h2{ margin:14px 0 12px; font-size:clamp(24px,3vw,34px); }
.download-copy .sub{ line-height:1.7; }
.download-note{
    display:flex;
    align-items:center;
    gap:9px;
    margin-top:22px;
    color:rgba(220,250,255,.9);
    font-size:12px;
}
.download-note span{
    display:grid;
    place-items:center;
    width:20px;
    height:20px;
    flex:0 0 auto;
    border-radius:50%;
    background:rgba(0,191,255,.12);
    border:1px solid rgba(0,191,255,.3);
}
.download-apps{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.download-app{
    min-width:0;
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    padding:13px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:15px;
    background:rgba(0,0,0,.24);
    transition:220ms var(--ease);
}
.download-app:last-child{ grid-column:1 / -1; }
.download-app:hover{
    transform:translateY(-2px);
    border-color:rgba(0,191,255,.38);
    background:rgba(0,191,255,.055);
    box-shadow:0 14px 30px rgba(0,0,0,.2);
}
.platform-icon{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border:1px solid rgba(0,191,255,.2);
    border-radius:12px;
    background:rgba(0,191,255,.08);
}
.platform-icon svg{ width:22px; height:22px; fill:rgba(235,250,255,.94); }
.platform-icon svg.app-store-icon{ width:24px; height:24px; fill:none; }
.platform-icon .app-store-icon path{ fill:rgba(235,250,255,.94); }
.download-app > span:nth-child(2){ display:flex; min-width:0; flex-direction:column; gap:3px; }
.download-app small{ color:var(--dim); font-size:10px; }
.download-app strong{ overflow:hidden; color:var(--text); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.download-arrow{ color:rgba(120,218,255,.72); font-size:15px; transition:180ms var(--ease); }
.download-app:hover .download-arrow{ transform:translate(2px,-2px); color:var(--cyan); }

.foot{
    flex-wrap:wrap;
    justify-content:center;
}
.footer-services{
    flex:0 0 100%;
    display:flex;
    justify-content:center;
    gap:10px;
    padding-top:14px;
    margin-top:4px;
    border-top:1px solid rgba(255,255,255,0.07);
}
.footer-services a{
    padding:7px 12px;
    border:1px solid rgba(255,255,255,0.10);
    border-radius:10px;
    color:var(--muted);
    font-size:12px;
    transition:180ms var(--ease);
}
.footer-services a:hover{ color:var(--text); border-color:rgba(0,191,255,0.30); }

details[open] .chev{ transform:none !important; }
.chev{ display:grid; place-items:center; flex-shrink:0; }
.chev-ico{ width:14px; height:14px; fill:none; stroke:rgba(255,255,255,0.80); stroke-width:2.2; stroke-linecap:round; transition:220ms var(--ease); }
.chev-ico .v{ transform-origin:12px 12px; transition:220ms var(--ease); }
details[open] .chev-ico{ stroke:rgba(200,240,255,0.95); transform:rotate(180deg); }
details[open] .chev-ico .v{ transform:scaleY(0); opacity:0; }
details > .faq-body{ display:grid !important; grid-template-rows:0fr; margin-top:10px; transition:grid-template-rows 280ms var(--ease); }
details[open] > .faq-body{ grid-template-rows:1fr; }
details > .faq-body > *{ overflow:hidden; opacity:0; transform:translateY(-4px); transition:opacity 220ms var(--ease),transform 220ms var(--ease); }
details[open] > .faq-body > *{ opacity:1; transform:translateY(0); }
details .faq-body p{ margin:0; padding:0; }

@media (max-width:760px){
    .ecosystem-links{ grid-template-columns:1fr; }
    .final-cta{ flex-direction:column; align-items:center; text-align:center; }
    .final-cta > div{ width:100%; }
    .final-cta .sub{ margin-inline:auto; }
    .final-cta .btn{ align-self:center; }
    .card.download-card{ grid-template-columns:1fr; gap:24px; padding:22px; }
    .download-apps{ grid-template-columns:1fr; }
    .download-app:last-child{ grid-column:auto; }
}

*{
    box-sizing:border-box;
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
}
img,svg{
    -webkit-user-drag:none;
    user-drag:none;
}
html,body{ height:100%; }
html{
    scroll-behavior:smooth;
}

.bg {

    color:var(--text);
    overflow-x:hidden;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
            radial-gradient(1300px 800px at 15% 5%, rgba(0,191,255,0.05) 0%, transparent 60%),
            radial-gradient(1000px 600px at 88% 18%, rgba(255,130,138,0.04) 0%, transparent 60%),
            radial-gradient(1200px 1200px at 50% 100%, rgba(10,15,25,0.60) 0%, transparent 70%),
            linear-gradient(180deg, #050709 0%, #070a0f 100%)
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    background: var(--bg);
    margin:0;
    font-family:"Source Code Pro", monospace;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:2;
    opacity:0.06;
    mix-blend-mode: overlay;
    background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
    background-size: 220px 220px;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

:focus-visible{
    outline: none;
    box-shadow: var(--ring);
    border-color: rgba(0,191,255,0.45) !important;
}

#stars{
    position:fixed;
    inset:0;
    z-index:1;
    width:100%;
    height:100%;
    pointer-events:none;
    opacity:0.82;
}

.glow{
    position:fixed;
    top:-120px;
    left:50%;
    transform:translateX(-50%);
    width:min(1100px, 110vw);
    height:240px;
    background: radial-gradient(closest-side, rgba(0,191,255,0.12), transparent 75%);
    filter: blur(16px);
    z-index:3;
    pointer-events:none;
}

.progress{
    position:fixed;
    top:0;
    left:0;
    height:2px;
    width:0%;
    z-index:30;
    background: linear-gradient(90deg, rgba(0,191,255,0.85), rgba(255,130,138,0.70));
    box-shadow: 0 0 18px rgba(0,191,255,0.25);
    opacity:0.85;
    transform: translateZ(0);
}

.wrap{
    position:relative;
    z-index:10;
    min-height:100%;
    display:flex;
    flex-direction:column;
}

header{
    position:sticky;
    top:0;
    z-index:20;
    backdrop-filter: blur(14px) saturate(180%);
    background: linear-gradient(to bottom, rgba(5,7,9,0.88), rgba(5,7,9,0.40));
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.nav{
    max-width:var(--max);
    margin:0 auto;
    padding: 6px 9px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height: var(--hdr);
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    user-select:none;
    cursor:pointer;
}
.brand img{
    width:34px; height:34px;
    border-radius:50%;
    object-fit:cover;
    border:1px solid rgba(255,255,255,0.12);
    box-shadow: 0 0 16px rgba(0,191,255,0.15);
    transform: translateZ(0);
}
.brand .t1{ font-weight:800; letter-spacing:0.4px; }
.brand .t2{ font-size:12px; color:var(--dim); margin-top:2px; }

.navlinks{
    display:flex;
    gap:14px;
    align-items:center;
}
.navlinks a {
    font-size: 13px;
    color: var(--muted);
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid transparent;
    border-color: rgba(255, 255, 255, 0.10);
    transition: 180ms var(--ease);
    background: rgba(255, 255, 255, 0.04);
}

.navlinks a:hover{
    transform: translateY(-1px);
    color: var(--text);
}
.navcta{
    display:flex;
    gap:10px;
    align-items:center;
}

.btn{
    position:relative;
    overflow:hidden;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.02);
    color: var(--text);
    padding: 10px 14px;
    cursor:pointer;
    transition: 220ms var(--ease);
    box-shadow: none;
    font-size: 13px;
    user-select:none;
    backdrop-filter: blur(8px);
    transform: translateZ(0);
}
.btn::after{
    content:"";
    position:absolute;
    inset:-40% -60%;
    transform: translateX(-50%) rotate(12deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    opacity:0;
    transition: 450ms var(--ease);
    pointer-events:none;
}
.btn:hover{
    border-color: rgba(255,255,255,0.22);
    transform: translateY(-1px);
    background: rgba(255,255,255,0.04);
}
.btn:hover::after{
    opacity:1;
    transform: translateX(40%) rotate(12deg);
}
.btn:active{ transform: translateY(0); opacity:0.92; }

.btn-primary{
    border-color: rgba(0,191,255,0.45);
    background:
            radial-gradient(120px 80px at 20% 0%, rgba(0,191,255,0.18), transparent 60%),
            linear-gradient(180deg, rgba(0,191,255,0.12), rgba(0,191,255,0.05));
    box-shadow: 0 0 0 1px rgba(0,191,255,0.10), 0 12px 32px rgba(0,191,255,0.10);
    color: #ffffff;
}
.btn-primary:hover{
    border-color: rgba(0,191,255,0.70);
    box-shadow: 0 0 0 1px rgba(0,191,255,0.18), 0 18px 46px rgba(0,191,255,0.14);
}
.btn-primary:focus-visible{ box-shadow: var(--ring); }

.btn-accent{
    border-color: rgba(255,130,138,0.40);
    background:
            radial-gradient(120px 80px at 20% 0%, rgba(255,130,138,0.16), transparent 60%),
            linear-gradient(180deg, rgba(255,130,138,0.12), rgba(255,130,138,0.05));
    box-shadow: 0 0 0 1px rgba(255,130,138,0.10), 0 12px 32px rgba(255,130,138,0.08);
}
.btn-accent:hover{ border-color: rgba(255,130,138,0.65); }
.btn-accent:focus-visible{ box-shadow: var(--ring2); }

main{
    max-width:var(--max);
    width:100%;
    margin:0 auto;
    padding: 42px 18px 80px;
    display:flex;
    flex-direction:column;
    gap:64px;
}

#top, section{ scroll-margin-top: calc(var(--hdr) + 18px); }

.hero{
    display:grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 22px;
    align-items:stretch;
}

.card{
    padding: 18px;
    border-radius: var(--radius2);
    border:1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    gap:12px;
    min-height: 250px;
    backdrop-filter: blur(10px);
    transition: 260ms var(--ease);
}
.card:hover{
    transform: translateY(-3px);
    border-color: rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.035);
}

.card{
    padding: 18px;
    border-radius: var(--radius2);
    border:1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
    position:relative;
    overflow:hidden;
    backdrop-filter: blur(12px);
    transform: translateZ(0);
    transition: 260ms var(--ease);
}
.card:hover{
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.035);
}

.hero-left{
    padding: 26px 24px 22px;
    position:relative;
}
.hero-left::before{
    content:"";
    position:absolute;
    inset:-60px -80px auto auto;
    width: 220px;
    height: 220px;
    background: radial-gradient(closest-side, rgba(0,191,255,0.18), transparent 70%);
    filter: blur(12px);
    opacity:0.55;
    pointer-events:none;
}

.kicker{
    display:inline-flex;
    gap:10px;
    align-items:center;
    padding: 8px 10px;
    border-radius: 999px;
    border:1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
    color:var(--muted);
    font-size:12px;
    user-select:none;
}
.dot{
    width:8px;height:8px;border-radius:50%;
    background: var(--cyan);
    box-shadow: 0 0 18px rgba(0,191,255,0.6);
    animation: pulse 2s infinite;
}
.dot--pink{
    background: var(--pink);
    box-shadow: 0 0 18px rgba(255,130,138,0.55);
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

h1{
    margin:16px 0 0;
    font-size: clamp(2.0rem, 4.4vw, 3.0rem);
    line-height:1.08;
    letter-spacing:-0.4px;
    font-weight: 900;
}

.grad{
    background: linear-gradient(90deg, #fff, rgba(200,240,255,0.95), rgba(0,191,255,0.95));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.lead{
    margin: 14px 0 0;
    font-size: 15.5px;
    color: var(--muted);
    line-height:1.65;
    max-width: 58ch;
}

.hero-cta{
    margin-top: 18px;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    align-items:center;
}

.mini{
    color: var(--dim);
    font-size:14px;
    margin-top: 20px;
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    align-items:center;
}
.mini span{
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    transition: 220ms var(--ease);
}
.mini span:hover{
    border-color: rgba(0,191,255,0.22);
    background: rgba(0,191,255,0.06);
    color: rgba(220,250,255,0.95);
}

.restore-card{
    position:relative;
    display:grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap:28px;
    align-items:center;
    padding:26px;
    overflow:hidden;
    border:1px solid rgba(0,191,255,0.22);
    border-radius:var(--radius2);
    background:
        radial-gradient(420px 220px at 100% 0%, rgba(0,191,255,0.13), transparent 70%),
        radial-gradient(320px 200px at 0% 100%, rgba(255,130,138,0.08), transparent 72%),
        var(--card-solid-soft);
    box-shadow:0 24px 70px rgba(0,0,0,0.24);
}
.restore-card::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(115deg, rgba(255,255,255,0.035), transparent 35%);
}
.restore-copy,
.restore-action{
    position:relative;
    z-index:1;
}
.restore-copy h2{
    max-width:760px;
    margin:14px 0 10px;
    font-size:clamp(1.45rem, 3vw, 2.15rem);
    line-height:1.16;
}
.restore-copy > p{
    max-width:760px;
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.7;
}
.restore-steps{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:18px;
}
.restore-steps span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 10px;
    border:1px solid rgba(255,255,255,0.09);
    border-radius:999px;
    background:rgba(255,255,255,0.025);
    color:var(--muted);
    font-size:12px;
}
.restore-steps b{
    display:grid;
    width:20px;
    height:20px;
    place-items:center;
    border-radius:50%;
    background:rgba(0,191,255,0.12);
    color:rgba(220,250,255,0.96);
    font-size:11px;
}
.restore-action{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:18px;
    border:1px solid rgba(255,255,255,0.1);
    border-radius:var(--radius);
    background:rgba(5,7,9,0.42);
}
.restore-time{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    color:var(--dim);
    font-size:11px;
}
.restore-time strong{
    color:var(--text);
    font-size:16px;
}
.restore-button{
    width:100%;
    margin-top:4px;
}
.restore-button:disabled{
    cursor:not-allowed;
    opacity:0.58;
    transform:none;
}
.restore-status{
    margin:0;
    color:var(--dim);
    font-size:11px;
    line-height:1.5;
    text-align:center;
}
.restore-result{
    display:grid;
    gap:12px;
    margin-top:4px;
}
.restore-result[hidden]{ display:none; }
.restore-copy-button{
    width:100%;
    padding:11px 12px;
    text-align:center;
    font-size:12px;
}
.restore-qr-block{
    display:grid;
    justify-items:center;
    gap:9px;
    color:var(--dim);
    font-size:10px;
    line-height:1.45;
    text-align:center;
}
.restore-qr{
    display:grid;
    width:192px;
    min-height:192px;
    place-items:center;
    padding:8px;
    border-radius:14px;
    background:#fff;
    color:#111;
    font-size:10px;
}
.restore-qr img,
.restore-qr canvas{
    display:block;
    max-width:100%;
    height:auto;
}

.hero-right{
    padding: 18px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.stat{
    border-radius: var(--radius);
    border:1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
    padding: 14px;
    display:flex;
    flex-direction:column;
    gap:8px;
    backdrop-filter: blur(10px);
    transition: 220ms var(--ease);
}
.stat:hover{
    border-color: rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.035);
    transform: translateY(-1px);
}
.stat .top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.stat .name{
    font-size: 12px;
    color: var(--dim);
}
.stat .value{
    font-size: 20px;
    font-weight: 800;
    letter-spacing:0.2px;
}
.stat .hint{
    font-size: 12px;
    color: var(--muted);
    line-height: 1.55;
}
.pill{
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    border:1px solid rgba(0,191,255,0.22);
    background: rgba(0,191,255,0.08);
    color: rgba(200,240,255,0.95);
    white-space:nowrap;
}

section{
    display:flex;
    flex-direction:column;
    gap:14px;
}
.section-title{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
}
h2{
    margin:0;
    font-size: clamp(1.45rem, 2.6vw, 2.0rem);
    font-weight: 900;
    letter-spacing:-0.2px;
}
.sub{
    color: var(--muted);
    font-size: 13px;
    line-height:1.55;
    max-width: 70ch;
}

.grid3{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.feature{
    padding: 18px;
    border-radius: var(--radius2);
    border:1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
    position:relative;
    overflow:hidden;
    min-height: 140px;
    backdrop-filter: blur(10px);
    transition: 240ms var(--ease);
}
.feature:hover{
    transform: translateY(-2px);
    border-color: rgba(255,225,255,0.16);
    background: rgba(255,255,255,0.035);
}
.feature::before{
    content:"";
    position:absolute;
    inset:-60px -60px auto auto;
    width: 160px;
    height: 160px;
    background: radial-gradient(closest-side, rgba(0,191,255,0.18), transparent 70%);
    filter: blur(10px);
    opacity:0.45;
    pointer-events:none;
}
.feature .icon{
    width:42px; height:42px;
    border-radius: 14px;
    border:1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.25);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 18px;
    box-shadow: 0 0 18px rgba(0,191,255,0.08);
}
.feature h3{
    margin: 12px 0 0;
    font-size: 15px;
    font-weight: 800;
}
.feature p{
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.65;
}

.steps{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:14px;
}
.step{
    padding: 18px;
    border-radius: var(--radius2);
    border:1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
    display:flex;
    gap:14px;
    align-items:flex-start;
    backdrop-filter: blur(10px);
    transition: 240ms var(--ease);
}
.step:hover{
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.035);
}
.num{
    width:40px; height:40px;
    border-radius: 14px;
    border:1px solid rgba(255,255,255,0.10);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight: 900;
    color: rgba(255,255,255,0.92);
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}
.step h4{
    margin:0;
    font-size: 14px;
    font-weight: 800;
}
.step p{
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--muted);
    line-height:1.65;
}

.pricing{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.price-card{
    padding: 18px;
    border-radius: var(--radius2);
    border:1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    gap:12px;
    min-height: 250px;
    backdrop-filter: blur(10px);
    transition: 260ms var(--ease);
}
.price-card:hover{
    transform: translateY(-3px);
    border-color: rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.035);
}
.price-card.featured{
    border-color: rgba(0,191,255,0.35);
    box-shadow: 0 0 0 1px rgba(0,191,255,0.15), var(--shadow);
}
.tag{
    align-self:flex-start;
    font-size:12px;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.10);
    color: var(--muted);
    background: rgba(255,255,255,0.02);
}
.price{
    font-size: 26px;
    font-weight: 900;
    letter-spacing:-0.4px;
    margin-top:2px;
}
.price small{
    font-size: 12px;
    color: var(--dim);
    font-weight: 500;
    margin-left:6px;
}
.plist{
    margin:0;
    padding-left: 18px;
    color: var(--muted);
    font-size: 13px;
    line-height:1.75;
}
.price-actions{
    margin-top:auto;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.quotes{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:14px;
}
.quote{
    border-radius: var(--radius2);
    border:1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
    padding: 18px;
    backdrop-filter: blur(10px);
    transition: 240ms var(--ease);
}
.quote:hover{
    transform: translateY(-2px);
    border-color: rgba(0,191,255,0.18);
    background: rgba(0,191,255,0.035);
}
.quote p{
    margin:0;
    color: var(--text);
    line-height:1.75;
    font-size: 13px;
}
.quote .a{
    margin-top: 10px;
    color: var(--dim);
    font-size: 12px;
}

.faq{
    display:flex;
    flex-direction:column;
    gap:10px;
}
details{
    border-radius: var(--radius2);
    border:1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
    padding: 14px 16px;
    backdrop-filter: blur(10px);
    transition: 240ms var(--ease);
}
details:hover{
    border-color: rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.035);
}
summary{
    cursor:pointer;
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    user-select:none;
    font-weight: 800;
    font-size: 13px;
}
summary::-webkit-details-marker{ display:none; }
details p{
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height:1.75;
    opacity:0.95;
}
.chev{
    width:26px;height:26px;border-radius:10px;
    border:1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.25);
    display:flex; align-items:center; justify-content:center;
    transition: 220ms var(--ease);
    flex-shrink:0;
    font-weight:900;
}
details[open] .chev{
    transform: rotate(45deg);
    border-color: rgba(0,191,255,0.25);
    background: rgba(0,191,255,0.08);
    color: rgba(200,240,255,0.95);
}

footer{
    margin-top:auto;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(5,7,9,0.42);
    backdrop-filter: blur(14px) saturate(180%);
}
.foot{
    max-width:var(--max);
    margin:0 auto;
    padding: 18px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    justify-content:space-between;;
    color: var(--dim);
    font-size: 12px;
}
.foot .links{
    display:flex; gap:12px; flex-wrap:wrap;
}
.foot .links a{
    padding: 6px 10px;
    border-radius: 12px;
    border:1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    transition: 180ms var(--ease);
}
.foot .links a:hover{
    border-color: rgba(255,255,255,0.16);
    color: rgba(255,255,255,0.86);
    transform: translateY(-1px);
}

.reveal{
    opacity:0;
    transform: translateY(10px);
    transition: 700ms var(--ease);
    will-change: opacity, transform;
}
.reveal.on{
    opacity:1;
    transform: translateY(0);
}

.modal{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(0,0,0,0.72);
    z-index:50;
    padding: 18px;
    backdrop-filter: blur(10px);

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition: 220ms var(--ease);
}
.modal.on{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}
.modal-card{
    max-width: 860px;
    width:100%;
    max-height: 85vh;
    overflow:auto;
    border-radius: 22px;
    border:1px solid rgba(255,255,255,0.12);
    background: linear-gradient(180deg, rgba(10,12,18,0.96), rgba(10,12,18,0.90));
    box-shadow: var(--shadow);
    padding: 18px;
    backdrop-filter: blur(20px);
    transform: translateY(8px) scale(0.99);
    transition: 260ms var(--ease);
}
.modal.on .modal-card{
    transform: translateY(0) scale(1);
}
.modal-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: sticky;
    top:0;
    background: linear-gradient(180deg, rgba(10,12,18,0.98), rgba(10,12,18,0.88));
    backdrop-filter: blur(10px);
    z-index:1;
}
.modal-head h3{
    margin:0;
    font-size: 14px;
    font-weight: 900;
}
.x{
    border-radius: 12px;
    border:1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.03);
    color: var(--text);
    padding: 8px 10px;
    cursor:pointer;
    transition: 200ms var(--ease);
}
.x:hover{
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.05);
}
.modal-body{
    padding-top: 12px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.75;
    white-space: pre-line;
}
.modal-body b{ color: rgba(255,255,255,0.92); }

.card,.stat,.feature,.step,.price-card,.quote, details{
    background: var(--card-solid-soft) !important;
}

.btn-telegram{
    background: #18B6FF;
    border-color: rgba(24,182,255,0.55);
    color:#fff;
    padding: 8px 18px;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0,191,255,0.18);
}

.btn-telegram::after{ display:none; }
.btn-telegram:hover{
    background: #2EC0FF;
    transform: translateY(-1px);
}

.stat .top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.78);
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}

.pill{ min-width: 110px; justify-content:center; }

.pill::before{
    content:"";
    width:6px; height:6px;
    border-radius:999px;
    background: rgba(255,255,255,0.35);
    box-shadow: 0 0 10px rgba(255,255,255,0.10);
}

.pill.pill--cyan{
    color: rgba(220,250,255,0.92);
    border-color: rgba(0,191,255,0.22);
    background: rgba(0,191,255,0.06);
}
.pill.pill--cyan::before{
    background: rgba(0,191,255,0.95);
    box-shadow: 0 0 14px rgba(0,191,255,0.35);
}

@media (max-width: 920px){
    .hero{ grid-template-columns: 1fr; }
    .grid3{ grid-template-columns: 1fr; }
    .steps{ grid-template-columns: 1fr; }
    .pricing{ grid-template-columns: 1fr; }
    .quotes{ grid-template-columns: 1fr; }
    .navlinks{ display:none; }
    .restore-card{ grid-template-columns:1fr; }
    .restore-action{ max-width:none; }
}

@media (max-width: 420px){
    :root{ --hdr:56px; }

    .nav{
        padding:6px 8px;
        gap:8px;
    }
    .brand{ gap:10px; }
    .brand img{ width:30px; height:30px; }
    .brand .t2{ display:none; }
    .brand .t1{ font-size:16px; }
    .navcta{ gap:8px; }
    .navcta .btn{
        padding:8px 12px;
        border-radius:16px;
        font-size:12px;
        line-height:1;
        white-space:nowrap;
    }
    .restore-card{ padding:20px 16px; gap:20px; }
    .restore-steps{ flex-direction:column; align-items:stretch; }
    .restore-steps span{ border-radius:12px; }
    .foot {
        justify-content: center;
        align-items: center;
        text-align: center;
        flex-direction: column;
        gap: 12px;
    }
    .foot .links{
        justify-content: center;
    }

}

@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .dot{ animation:none; }
    .reveal{ transition:none; transform:none; opacity:1; }
    .card, .feature, .step, .price-card, .quote, .btn{ transition:none; }
    .btn::after{ display:none; }
    #stars{ display:none; }
    .progress{ display:none; }
    .modal{ transition:none; }
    .modal-card{ transition:none; transform:none; }
}

@media (min-width: 921px){
    .hero-right{
        height: 100%;
        display: grid;
        grid-template-rows: repeat(3, 1fr);
        gap: 12px;
    }

    .hero-right .stat{
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 18px;
    }
}

/* Desktop layout refinements */
.navlinks button{
    font-family:inherit;
    font-size:13px;
    color:var(--muted);
    padding:8px 10px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.04);
    cursor:pointer;
    transition:180ms var(--ease);
}
.navlinks button:hover{
    transform:translateY(-1px);
    color:var(--text);
}
.feature .icon svg{
    width:23px;
    height:23px;
    fill:none;
    stroke:rgba(220,250,255,0.94);
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.num{ flex:0 0 40px; }
.foot > div:first-child,
.foot .links,
.footer-services{ flex:0 0 100%; justify-content:center; text-align:center; }
.foot .links{ order:1; margin-bottom:0; }
.footer-services{ order:2; margin-top:0; padding-top:0; border-top:0; }
.foot > div:first-child{
    order:3;
    margin-top:4px;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,0.07);
}
.foot .links button,
.footer-services button{
    padding:7px 12px;
    border:1px solid rgba(255,255,255,0.10);
    border-radius:10px;
    background:rgba(255,255,255,0.02);
    color:var(--muted);
    font:inherit;
    cursor:pointer;
    transition:180ms var(--ease);
}
.foot .links button:hover,
.footer-services button:hover{
    color:var(--text);
    border-color:rgba(0,191,255,0.30);
    transform:translateY(-1px);
}

@media (min-width:921px){
    .hero-left .mini{
        justify-content:center;
        gap:20px;
        width:100%;
        margin-top:auto;
        padding-top:24px;
        font-size:18px;
    }
    .hero-left .mini span{
        display:inline-flex;
        min-width:220px;
        min-height:56px;
        align-items:center;
        justify-content:center;
        padding:14px 28px;
    }
    .foot .links{
        order:1;
        margin-bottom:0;
    }
    .footer-services{
        order:2;
        margin-top:0;
        padding-top:0;
        border-top:0;
    }
    .foot > div:first-child{
        order:3;
        margin-top:4px;
        padding-top:16px;
        border-top:1px solid rgba(255,255,255,0.07);
    }
    .download-app{
        position:relative;
        display:flex;
        justify-content:center;
        text-align:center;
        padding:15px 42px 15px 15px;
    }
    .download-app > span:nth-child(2){ align-items:center; }
    .download-arrow{ position:absolute; right:15px; }
    .restore-steps{
        display:grid;
        grid-template-columns:repeat(4,max-content);
        gap:7px;
    }
    .restore-steps span{ gap:6px; padding:7px 8px; font-size:10px; white-space:nowrap; }
    .restore-steps b{ width:18px; height:18px; }
    .final-cta{
        flex-direction:column;
        justify-content:center;
        text-align:center;
    }
    .final-cta .sub{ margin-inline:auto; }
}