/*=========================================================    PREMIUM WEBSITE SHOWCASE    PART 1A.1.2.1    Global CSS + Variables + Base Layout==========================================================*//*=============================GOOGLE FONT==============================*/@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");/*=============================NOISE==============================*/.noise-overlay {position: absolute;inset: 0;opacity: 0.03;background-image: radial-gradient(#000 1px, transparent 1px);background-size: 8px 8px;}/*=============================ROW==============================*/.website-showcase .row {position: relative;z-index: 5;min-height: 720px;}/*=============================COMMON SPACING==============================*/.showcase-content {position: relative;z-index: 10;}/*=============================COMMON TRANSITION==============================*/.browser-wrapper,.gradient-orb,.ring,.floating-widget,.stat-item,.btn-main,.btn-outline {transition: var(--transition);}/*=============================SELECTION==============================*/::selection {background: var(--primary);color: #fff;}/*=============================GRID ANIMATION==============================*/.grid-overlay {animation: gridMove 18s linear infinite;}/*=============================KEYFRAMES==============================*/@keyframes auroraFloat {0% {transform: translate(0, 0) rotate(0deg) scale(1);}50% {transform: translate(40px, -60px) rotate(10deg) scale(1.08);}100% {transform: translate(-30px, 50px) rotate(-8deg) scale(0.95);}}@keyframes orbFloat1 {50% {transform: translateY(-45px) translateX(35px);}}@keyframes orbFloat2 {50% {transform: translateX(-50px) translateY(40px);}}@keyframes orbFloat3 {50% {transform: translateY(-35px) translateX(-30px);}}@keyframes orbFloat4 {50% {transform: translateY(30px) translateX(45px);}}@keyframes particleMove {0% {transform: translateY(0) scale(0.3);opacity: 0;}20% {opacity: 1;}80% {opacity: 1;}100% {transform: translateY(-120vh) scale(1.4);opacity: 0;}}@keyframes gridMove {0% {background-position:0 0,0 0;}100% {background-position:70px 70px,70px 70px;}}/*=========================================================    PREMIUM WEBSITE SHOWCASE    PART 1A.1.2.3    Browser Container + Glass Effect + 3D Perspective==========================================================*//*==========================================BROWSER SCENE==========================================*/.browser-screen {position: relative;display: flex;justify-content: center;align-items: flex-start;width: 100%;height: 655px;perspective: 2200px;z-index: 10;overflow:hidden;}/*=========================================    WRAPPER==========================================*/.browser-wrapper {position: relative;width: 100%;max-width: 900px;transform-style: preserve-3d;transition: 0.7s ease;}/*=========================================    REFLECTION==========================================*/.browser-reflection {position: absolute;inset: 0;border-radius: 34px;background: linear-gradient(125deg,rgba(255, 255, 255, 0.45),rgba(255, 255, 255, 0.05) 28%,transparent 55%);opacity: 0.7;pointer-events: none;z-index: 5;}/*=========================================    SHADOW==========================================*/.browser-shadow {position: absolute;width: 94%;height: 60px;left: 3%;bottom: -45px;background: rgba(15, 23, 42, 0.18);filter: blur(40px);border-radius: 50%;transform: translateZ(-100px);}/*=========================================    MAIN BROWSER==========================================*/.browser {position: relative;overflow: hidden;border-radius: 32px;min-height: 620px;background: rgba(255, 255, 255, 0.7);backdrop-filter: blur(35px);-webkit-backdrop-filter: blur(35px);border: 1px solid rgba(255, 255, 255, 0.55);box-shadow:0 30px 80px rgba(15, 23, 42, 0.1),0 15px 40px rgba(15, 23, 42, 0.08),inset 0 1px rgba(255, 255, 255, 0.8);}/*=========================================    TOP GLOW==========================================*/.browser::before {content: "";position: absolute;top: -2px;left: 15%;width: 70%;height: 4px;background: linear-gradient(90deg,transparent,rgba(255, 122, 0, 0.9),rgba(72, 110, 255, 0.8),transparent);filter: blur(2px);}/*=========================================    OUTER BORDER==========================================*//* .browser::after {content: "";position: absolute;inset: 0;border-radius: 32px;padding: 1px;background: linear-gradient(135deg,rgba(255, 255, 255, 0.7),rgba(255, 122, 0, 0.25),rgba(72, 110, 255, 0.18),rgba(255, 255, 255, 0.4));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite: xor;mask-composite: exclude;pointer-events: none;} *//*=========================================    FLOATING EFFECT==========================================*/.browser {animation: browserFloat 7s ease-in-out infinite;}/*=========================================    BODY==========================================*/.browser-body {position: relative;min-height: 560px;overflow: hidden;background: linear-gradient(180deg,rgba(255, 255, 255, 0.92),rgba(248, 250, 255, 0.96));}/*=========================================    KEYFRAMES==========================================*/@keyframes browserFloat {0% {transform: translateY(0);}50% {transform: translateY(-12px);}100% {transform: translateY(0);}}@keyframes ringRotate {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}@keyframes ringRotateReverse {from {transform: rotate(360deg);}to {transform: rotate(0deg);}}@keyframes ringPulse {0% {transform: scale(1);opacity: 0.35;}50% {transform: scale(1.05);opacity: 0.6;}100% {transform: scale(1);opacity: 0.35;}}/*=========================================================    PREMIUM WEBSITE SHOWCASE    PART 1A.1.2.4    Browser Header (Apple + Arc + Chrome Style)==========================================================*//*=========================================    HEADER==========================================*/.browser-header {position: relative;display: flex;align-items: center;justify-content: space-between;gap: 20px;height: 78px;padding: 0 22px;background: rgba(255, 255, 255, 0.78);backdrop-filter: blur(30px);-webkit-backdrop-filter: blur(30px);border-bottom: 1px solid rgba(15, 23, 42, 0.06);z-index: 10;}/* Soft Bottom Glow */.browser-header::after {content: "";position: absolute;left: 0;bottom: -1px;width: 100%;height: 2px;background: linear-gradient(90deg,transparent,rgba(255, 122, 0, 0.65),rgba(76, 110, 245, 0.4),transparent);}/*=========================================LEFT SECTION==========================================*/.browser-left {display: flex;align-items: center;gap: 10px;min-width: 90px;}/*=========================================MAC DOTS==========================================*/.dot {width: 14px;height: 14px;border-radius: 50%;position: relative;cursor: pointer;transition: 0.35s;}.dot::after {content: "";position: absolute;inset: 2px;border-radius: 50%;background: rgba(255, 255, 255, 0.45);}.dot.red {background: #ff5f57;box-shadow: 0 0 18px rgba(255, 95, 87, 0.35);}.dot.yellow {background: #febc2e;box-shadow: 0 0 18px rgba(254, 188, 46, 0.35);}.dot.green {background: #28c840;box-shadow: 0 0 18px rgba(40, 200, 64, 0.35);}.dot:hover {transform: scale(1.2);}/*=========================================ADDRESS BAR==========================================*/.browser-address {flex: 1;height: 48px;display: flex;align-items: center;justify-content: center;gap: 12px;border-radius: 16px;padding: 0 20px;background: linear-gradient(180deg,rgba(255, 255, 255, 0.95),rgba(245, 247, 255, 0.95));border: 1px solid rgba(15, 23, 42, 0.05);box-shadow:inset 0 1px rgba(255, 255, 255, 0.9),0 8px 20px rgba(15, 23, 42, 0.05);font-size: 14px;font-weight: 600;color: #667085;overflow: hidden;position: relative;}/* Animated Shine */.browser-address::before {content: "";position: absolute;top: 0;left: -120%;width: 60%;height: 100%;background: linear-gradient(90deg,transparent,rgba(255, 255, 255, 0.85),transparent);transform: skewX(-25deg);animation: urlShine 5s linear infinite;}/* Lock */.browser-address i {color: var(--primary);font-size: 14px;}/*=========================================RIGHT ICONS==========================================*/.browser-right {display: flex;align-items: center;gap: 10px;min-width: 110px;justify-content: flex-end;}.browser-right i {width: 42px;height: 42px;border-radius: 14px;display: flex;align-items: center;justify-content: center;color: #667085;background: rgba(255, 255, 255, 0.65);border: 1px solid rgba(15, 23, 42, 0.05);transition: 0.35s;cursor: pointer;backdrop-filter: blur(15px);}/* Hover */.browser-right i:hover {transform: translateY(-4px) scale(1.05);color: #fff;background: var(--primary);box-shadow: 0 12px 25px rgba(255, 122, 0, 0.3);}/*=========================================HEADER GLOW==========================================*/.browser-header:hover {box-shadow:inset 0 1px rgba(255, 255, 255, 0.9),0 12px 30px rgba(15, 23, 42, 0.05);}/*=========================================URL SHINE==========================================*/@keyframes urlShine {0% {left: -120%;}100% {left: 150%;}}/* SCALE HOLDER */.desktop-wrapper{position:absolute;top:0;left:0;width:1440px;height:900px;transform-origin:top left;}#websiteFrame{width:1440px;height:1100px;border:none;}