* {margin:0;padding:0;box-sizing:border-box;} body {font-family:'Plus Jakarta Sans',sans-serif;background:linear-gradient(135deg,rgba(11,21,38,0.92),rgba(2,65,96,0.85)),url('bg.webp') center center/cover no-repeat fixed;color:#1a202c;min-height:100vh;display:flex;justify-content:center;padding:2rem 1rem;overflow-x:hidden;position:relative;} #interactive-bg {position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:0;pointer-events:none;overflow:hidden;} .parallax-layer {position:absolute;width:fit-content;height:fit-content;will-change:transform;} .floating-icon {position:relative;pointer-events:auto;cursor:pointer;color:rgba(255,255,255,0.04);font-size:5rem;animation:float 8s ease-in-out infinite;transition:color 0.3s ease,filter 0.3s ease;will-change:transform;} .floating-icon:hover {color:#0284c7;filter:drop-shadow(0 4px 12px rgba(2,132,199,0.3));z-index:50;animation-play-state:paused;} .hover-text {position:absolute;top:50%;left:100%;transform:translate(20px,-50%) scale(0.9);width:max-content;max-width:250px;background:#ffffff;padding:1rem 1.25rem;border-radius:12px;border:1px solid #e2e8f0;box-shadow:0 10px 25px rgba(15,23,42,0.1);color:#475569;font-size:0.9rem;line-height:1.5;text-align:left;white-space:normal;font-family:'Plus Jakarta Sans',sans-serif;pointer-events:none;opacity:0;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);z-index:100;} .hover-text strong {color:#0f172a;font-size:1rem;display:block;margin-bottom:0.25rem;} .floating-icon:hover .hover-text {opacity:1;transform:translate(30px,-50%) scale(1);} .tooltip-left .hover-text {left:auto;right:100%;transform:translate(-20px,-50%) scale(0.9);} .floating-icon.tooltip-left:hover .hover-text {transform:translate(-30px,-50%) scale(1);} body:has(.floating-icon:hover) #interactive-bg {z-index:20;} body:has(.floating-icon:hover) .container {z-index:5;opacity:0.85;transform:translate(-4px,-4px) scale(0.98);box-shadow:4px 4px 0px rgba(15,23,42,0.4);filter:blur(1px);} .color-blue {color:rgba(56,189,248,0.06);} .delay-1 {animation-delay:1.5s;font-size:4rem;} .delay-2 {animation-delay:3s;font-size:10rem;} .delay-3 {animation-delay:4.5s;font-size:7rem;} .delay-4 {animation-delay:6s;font-size:8rem;} .delay-5 {animation-delay:2s;font-size:5rem;} .delay-6 {animation-delay:1s;font-size:7.5rem;} .delay-7 {animation-delay:5s;font-size:6rem;} .delay-8 {animation-delay:3.5s;font-size:5.5rem;} .pos-1 {top:10%;left:8%;} .pos-2 {top:80%;left:5%;} .pos-3 {top:5%;right:5%;} .pos-4 {top:85%;right:12%;} .pos-5 {top:40%;left:-5%;} .pos-6 {top:60%;right:-5%;} .pos-7 {top:30%;left:15%;} .pos-8 {top:25%;right:20%;} .pos-9 {top:45%;left:25%;} @keyframes float {0% {transform:translate3d(0px,0px,0) rotate(0deg);} 50% {transform:translate3d(0px,-30px,0) rotate(8deg);} 100% {transform:translate3d(0px,0px,0) rotate(0deg);}} .container {width:100%;max-width:480px;background:rgba(255,255,255,0.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:2px solid #1e293b;border-radius:32px;padding:2.5rem 1.5rem;box-shadow:12px 12px 0px rgba(15,23,42,0.9);transform:translate(-6px,-6px);transition:all 0.3s ease;z-index:10;} .container:hover {transform:translate(-2px,-2px);box-shadow:6px 6px 0px rgba(15,23,42,0.9);} .profile {text-align:center;margin-bottom:2rem;opacity:0;transform:scale(0.95);animation:profileEnter 1s cubic-bezier(0.16,1,0.3,1) forwards;} @keyframes profileEnter {from {opacity:0;transform:scale(0.92) translateY(-15px);} to {opacity:1;transform:scale(1) translateY(0);}} .avatar-container {position:relative;display:inline-block;margin-bottom:1rem;} .avatar {width:100px;height:100px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 8px 16px rgba(13,138,188,0.15);transition:transform 0.3s ease;} .avatar:hover {transform:scale(1.05) rotate(5deg);} .verified-badge {position:absolute;bottom:0;right:0;background:#fff;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:#0ea5e9;font-size:1.1rem;box-shadow:0 2px 4px rgba(0,0,0,0.1);} .company-name {font-size:1.4rem;font-weight:700;color:#0f172a;margin-bottom:0.25rem;letter-spacing:-0.02em;} .company-subtitle {font-size:1rem;font-weight:600;color:#0284c7;margin-bottom:0.75rem;} .company-subtitle i {color:#38bdf8;} .company-desc {font-size:0.95rem;color:#475569;line-height:1.5;padding:0 1rem;} .links {display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem;} .link-category {text-align:left;margin:0.5rem 0 0.1rem 0.5rem;opacity:0;} .link-category span {font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;} .link-card {display:flex;align-items:center;padding:1rem 1.25rem;background:#ffffff;border-radius:16px;text-decoration:none;color:#1e293b;border:1px solid rgba(255,255,255,0.8);box-shadow:0 4px 6px -1px rgba(0,0,0,0.05),0 2px 4px -1px rgba(0,0,0,0.03);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden;opacity:0;} .animate-slide-up {animation:slideUp 0.6s cubic-bezier(0.16,1,0.3,1) forwards;} @keyframes slideUp {from {opacity:0;transform:translateY(20px);} to {opacity:1;transform:translateY(0);}} .link-card:before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.5),transparent);transform:translateX(-100%);transition:transform 0.6s;} .link-card:hover {transform:translateY(-2px);box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);border-color:#bae6fd;} .link-card:hover:before {transform:translateX(100%);} .link-icon {display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:#f0f9ff;color:#0284c7;font-size:1.25rem;margin-right:1rem;transition:all 0.3s ease;} .link-card:hover .link-icon {background:#0284c7;color:#fff;} .link-title {font-weight:600;font-size:1.05rem;flex:1;} .arrow-icon {color:#94a3b8;font-size:0.9rem;transition:transform 0.3s ease;} .link-card:hover .arrow-icon {transform:translateX(4px);color:#0284c7;} .highlight-link {background:#f97316;color:#fff;border:none;box-shadow:0 8px 20px rgba(249,115,22,0.25);overflow:hidden;} .highlight-link::after {content:'';position:absolute;top:0;left:0;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.5),transparent);transform:skewX(-25deg) translateX(-250%);animation:shimmer 3s infinite;will-change:transform;} @keyframes shimmer {0% {transform:skewX(-25deg) translateX(-250%);} 15% {transform:skewX(-25deg) translateX(300%);} 100% {transform:skewX(-25deg) translateX(300%);}} .highlight-link .link-icon {background:rgba(255,255,255,0.2);color:#fff;} .highlight-link:hover {background:#ea580c;} .highlight-link:hover .link-icon {background:#fff;color:#ea580c;} .highlight-link .arrow-icon {color:rgba(255,255,255,0.7);} .highlight-link:hover .arrow-icon {color:#fff;} .social-icons {display:flex;justify-content:center;gap:1.25rem;margin-bottom:2rem;} .social-icons a {display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:#ffffff;color:#64748b;font-size:1.25rem;text-decoration:none;box-shadow:0 4px 6px -1px rgba(0,0,0,0.05);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);border:1px solid rgba(255,255,255,0.8);} .social-icons a:hover {transform:translateY(-4px) scale(1.1);color:#0284c7;box-shadow:0 10px 15px -3px rgba(0,0,0,0.1);} .footer-text {text-align:center;font-size:0.85rem;color:#94a3b8;font-weight:500;} @media (max-width:480px) {body {padding:1rem;} .container {border-radius:24px;padding:2rem 1.25rem;border-width:2px;box-shadow:8px 8px 0px rgba(15,23,42,0.9);transform:translate(-4px,-4px);} .container:hover {transform:translate(-2px,-2px);box-shadow:4px 4px 0px rgba(15,23,42,0.9);}}