/* ========================== PHONE WRAPPER ========================== */.twg-phone-wrapper {position: relative;width: 420px;margin: auto;}.phone-glow {position: absolute;width: 300px;height: 300px;background: #6c63ff;filter: blur(120px);opacity: 0.25;top: 120px;left: 50%;transform: translateX(-50%);z-index: 1;}.twg-phone {width: 360px;height: 760px;background: #080d1a;border-radius: 50px;padding: 14px;margin: auto;position: relative;z-index: 2;border: 2px solid rgba(255, 255, 255, 0.06);box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.05);}/* ========================== NOTCH ========================== */.phone-notch {width: 130px;height: 30px;border-radius: 30px;background: #111827;margin: auto;}/* ========================== SCREEN ========================== */.phone-screen {margin-top: 12px;height: 690px;border-radius: 36px;overflow: hidden;padding: 20px;background: radial-gradient(circle at top left, rgba(108, 99, 255, 0.45), transparent 35%), radial-gradient(circle at bottom right, rgba(0, 229, 168, 0.25), transparent 35%), #0b1120;}.phone-screen {overflow-y: auto;overflow-x: hidden;position: relative;}.hero-mobile-app {display: flex;justify-content: center;align-items: center;min-height: 850px;}/* ========================== HEADER ========================== */.header-top {display: flex;justify-content: space-between;align-items: center;color: #fff;font-size: 13px;margin-bottom: 15px;}.status-icons {display: flex;gap: 10px;}.welcome-row {display: flex;justify-content: space-between;align-items: center;}.welcome-row h3 {color: #fff;font-size: 24px;margin-bottom: 5px;}.welcome-row p {color: #9ca3af;font-size: 13px;}.profile-avatar {width: 60px;height: 60px;border-radius: 50%;background: linear-gradient(135deg, #6c63ff, #00e5a8);display: flex;align-items: center;justify-content: center;color: #fff;font-size: 22px;box-shadow: 0 0 20px rgba(108, 99, 255, 0.5);}/* ========================== CONTROL PANEL ========================== */.control-panel {margin-top: 25px;background: rgba(255, 255, 255, 0.04);backdrop-filter: blur(20px);border: 1px solid rgba(255, 255, 255, 0.08);border-radius: 30px;padding: 20px;display: flex;justify-content: space-between;align-items: center;}.minus-btn,.plus-btn {width: 55px;height: 55px;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #00e5a8;font-size: 20px;background: #111827;border: 1px solid rgba(255, 255, 255, 0.08);}.control-center {text-align: center;}.control-center h2 {color: #fff;font-size: 34px;}.control-center span {color: #94a3b8;font-size: 12px;}.control-icons {display: flex;justify-content: center;gap: 12px;margin-top: 12px;}.control-icons i {color: #00e5a8;}/* ========================== QUICK ACTION ========================== */.quick-actions {display: flex;justify-content: space-between;margin-top: 18px;}.power-card {width: 85px;height: 85px;border-radius: 25px;background: #0f172a;display: flex;justify-content: center;align-items: center;color: #00e5a8;font-size: 32px;}.power-status {background: #fbbf24;color: #111;padding: 10px 20px;border-radius: 20px;height: fit-content;}/* ========================== STATS GRID ========================== */.stats-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 15px;margin-top: 18px;}.glass-card {padding: 18px;border-radius: 25px;backdrop-filter: blur(15px);color: #fff;}.glass-card small {display: block;margin-bottom: 10px;opacity: 0.8;}.glass-card h4 {font-size: 24px;margin-bottom: 6px;}.glass-card span {font-size: 13px;}.purple {background: linear-gradient(135deg, #6c63ff, #867dff);}.green {background: linear-gradient(135deg, #00d9a3, #00b8ff);}/* ========================== ANALYTICS CARD ========================== */.analytics-card {margin-top: 18px;background: rgba(255, 255, 255, 0.04);border: 1px solid rgba(255, 255, 255, 0.08);border-radius: 25px;padding: 18px;}.card-title {display: flex;justify-content: space-between;align-items: center;}.card-title h5 {color: #fff;}.card-title span {color: #00e5a8;}.analytics-chart {display: flex;align-items: flex-end;gap: 10px;height: 120px;margin-top: 20px;}.analytics-chart span {flex: 1;border-radius: 15px 15px 0 0;background: linear-gradient(180deg, #6c63ff, #00e5a8);}.analytics-chart span:nth-child(1) {height: 30%;}.analytics-chart span:nth-child(2) {height: 60%;}.analytics-chart span:nth-child(3) {height: 85%;}.analytics-chart span:nth-child(4) {height: 50%;}.analytics-chart span:nth-child(5) {height: 95%;}.analytics-chart span:nth-child(6) {height: 75%;}/* ========================== SERVICES ========================== */.services-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 10px;margin-top: 18px;}.service-box {background: rgba(255, 255, 255, 0.04);border: 1px solid rgba(255, 255, 255, 0.05);border-radius: 20px;text-align: center;padding: 12px 8px;}.service-icon {width: 45px;height: 45px;margin: auto auto 10px;border-radius: 14px;background: #111827;display: flex;align-items: center;justify-content: center;color: #00e5a8;}.service-box h6 {color: #fff;font-size: 12px;}.service-box p {color: #94a3b8;font-size: 10px;}/* ========================== AI ASSISTANT CARD ========================== */.assistant-card {margin-top: 18px;background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.08);border-radius: 24px;padding: 15px;display: flex;justify-content: space-between;align-items: center;backdrop-filter: blur(20px);}.assistant-left {display: flex;align-items: center;gap: 12px;}.assistant-avatar {width: 55px;height: 55px;border-radius: 18px;background: linear-gradient(135deg, #6c63ff, #00e5a8);display: flex;justify-content: center;align-items: center;color: #fff;font-size: 22px;box-shadow: 0 0 20px rgba(108, 99, 255, 0.45);}.assistant-left h5 {color: #fff;margin-bottom: 3px;}.assistant-left span {color: #94a3b8;font-size: 12px;}.chat-btn {border: none;cursor: pointer;padding: 12px 22px;border-radius: 30px;color: #fff;font-weight: 600;background: linear-gradient(135deg, #6c63ff, #00e5a8);transition: 0.4s;}.chat-btn:hover {transform: translateY(-3px);}/* ========================== ACTIVITY CARD ========================== */.activity-card {margin-top: 18px;background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.08);border-radius: 24px;padding: 18px;margin-bottom: 70px;}.activity-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 15px;}.activity-header h5 {color: #fff;}.activity-header span {color: #00e5a8;font-size: 12px;}.activity-item {display: flex;align-items: center;gap: 12px;padding: 10px 0;}.activity-item p {color: #cbd5e1;font-size: 13px;}.activity-dot {width: 10px;height: 10px;border-radius: 50%;background: #00e5a8;box-shadow: 0 0 10px #00e5a8, 0 0 20px #00e5a8;}/* ========================== BOTTOM NAVIGATION ========================== */.bottom-nav {position: fixed;bottom: 18px;left: 20px;right: 20px;height: 65px;background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.08);border-radius: 22px;display: flex;justify-content: space-around;align-items: center;backdrop-filter: blur(20px);}.bottom-nav a {color: #94a3b8;font-size: 20px;width: 42px;height: 42px;border-radius: 12px;display: flex;align-items: center;justify-content: center;transition: 0.35s;}.bottom-nav a:hover {color: #fff;transform: translateY(-4px);}.bottom-nav a.active {background: linear-gradient(135deg, #6c63ff, #00e5a8);color: #fff;}/* ========================== FLOATING PHONE ========================== */@keyframes phoneFloat {0% {transform: translateY(0px);}50% {transform: translateY(-18px);}100% {transform: translateY(0px);}}.twg-phone {animation: phoneFloat 6s ease-in-out infinite;}/* ========================== GLOW PULSE ========================== */@keyframes glowPulse {0% {opacity: 0.15;transform: translateX(-50%) scale(1);}50% {opacity: 0.35;transform: translateX(-50%) scale(1.15);}100% {opacity: 0.15;transform: translateX(-50%) scale(1);}}.phone-glow {animation: glowPulse 6s infinite ease-in-out;}/* ========================== GRAPH ANIMATION ========================== */@keyframes graphGrow {from {transform: scaleY(0);opacity: 0;}to {transform: scaleY(1);opacity: 1;}}.analytics-chart span {transform-origin: bottom;animation: graphGrow 1.2s ease forwards;}.analytics-chart span:nth-child(1) {animation-delay: 0.1s;}.analytics-chart span:nth-child(2) {animation-delay: 0.2s;}.analytics-chart span:nth-child(3) {animation-delay: 0.3s;}.analytics-chart span:nth-child(4) {animation-delay: 0.4s;}.analytics-chart span:nth-child(5) {animation-delay: 0.5s;}.analytics-chart span:nth-child(6) {animation-delay: 0.6s;}/* ========================== SERVICE HOVER ========================== */.service-box {transition: 0.4s;}.service-box:hover {transform: translateY(-8px) scale(1.03);border-color: rgba(0, 229, 168, 0.4);box-shadow: 0 15px 35px rgba(0, 229, 168, 0.12);}/* ========================== CARD HOVER ========================== */.glass-card,.analytics-card,.assistant-card,.activity-card {transition: 0.4s;}.glass-card:hover,.analytics-card:hover,.assistant-card:hover,.activity-card:hover {transform: translateY(-6px);box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);}/* ========================== SCROLLBAR ========================== */.phone-screen::-webkit-scrollbar {width: 4px;}.phone-screen::-webkit-scrollbar-thumb {background: #6c63ff;border-radius: 10px;}/* ========================== RESPONSIVE ========================== */@media (max-width: 480px) {.twg-phone-wrapper {width: 100%;}.twg-phone {width: 340px;height: 730px;}.phone-screen {height: 660px;}.welcome-row h3 {font-size: 20px;}.control-center h2 {font-size: 28px;}.services-grid {gap: 8px;}}/* ========================== PREMIUM NEON BORDER ========================== */.twg-phone::before {content: "";position: absolute;inset: -2px;border-radius: 52px;padding: 2px;background: linear-gradient(135deg, rgba(108, 99, 255, 0.8), rgba(0, 229, 168, 0.6), rgba(255, 181, 71, 0.6));-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite: xor;mask-composite: exclude;pointer-events: none;}