@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
}

.glass {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

.download-btn {
    position: relative;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: none;
    overflow: hidden;
}

.download-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    background: linear-gradient(90deg, #10b981, #22d3ee, #10b981);
    border-radius: inherit;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    z-index: -1;
}

.modal {
    animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalPop {
    0% { transform: scale(0.95); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.iphone-frame {
    width: 320px;
    height: 640px;
    background: #111111;
    border-radius: 48px;
    position: relative;
    box-shadow: 0 0 0 11px #111111, 0 0 0 17px #222222, 0 25px 50px -10px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    border: 8px solid #111111;
}

@media (min-width: 640px) {
    .iphone-frame {
        width: 395px;
        height: 810px;
        border-radius: 62px;
        box-shadow: 0 0 0 14px #111111, 0 0 0 22px #222222, 0 30px 60px -15px rgba(0, 0, 0, 0.7);
        border: 10px solid #111111;
    }
}

.iphone-screen {
    width: 304px;
    height: 624px;
    background: #f2f2f7;
    border-radius: 40px;
    position: absolute;
    top: 30px;
    left: 8px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px #ddd;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
}

@media (min-width: 640px) {
    .iphone-screen {
        width: 375px;
        height: 812px;
        border-radius: 52px;
        top: 38px;
        left: 10px;
    }
}

.notch {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 26px;
    background: #111111;
    border-radius: 20px;
    z-index: 50;
}

@media (min-width: 640px) {
    .notch {
        width: 140px;
        height: 30px;
        border-radius: 24px;
    }
}

.battery-icon {
    width: 26px;
    height: 12px;
    border: 1.5px solid #1c1c1e;
    border-radius: 2.5px;
    position: relative;
}
.battery-icon::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 2px;
    width: 3px;
    height: 8px;
    background: #1c1c1e;
    border-radius: 0 1px 1px 0;
}
.battery-fill {
    position: absolute;
    top: 1px;
    left: 1px;
    height: 9px;
    background: #1c1c1e;
    border-radius: 1px;
}