/* ==========================
   ALIGNLOG.COM PREMIUM CSS
   Part 1
========================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
background:#050816;
color:#ffffff;
overflow-x:hidden;
line-height:1.7;
}

/* Animated Background */

.gradient-bg{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-2;
background:
radial-gradient(circle at 20% 20%,#2563eb55 0%,transparent 35%),
radial-gradient(circle at 80% 30%,#06b6d455 0%,transparent 35%),
radial-gradient(circle at 50% 80%,#7c3aed55 0%,transparent 35%),
#050816;
animation:bgMove 16s linear infinite alternate;
}

@keyframes bgMove{

0%{
transform:scale(1);
}

100%{
transform:scale(1.15);
}

}

.noise{

position:fixed;
inset:0;

background-image:
linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);

background-size:35px 35px;

z-index:-1;

}

/* Header */

header{

position:fixed;

top:0;

left:0;

width:100%;

padding:22px 8%;

display:flex;

justify-content:space-between;

align-items:center;

backdrop-filter:blur(18px);

background:rgba(5,8,22,.55);

border-bottom:1px solid rgba(255,255,255,.08);

z-index:1000;

}

.logo{

font-size:30px;

font-weight:900;

letter-spacing:2px;

}

.logo span{

color:#4ea8ff;

}

nav{

display:flex;

gap:35px;

}

nav a{

color:white;

text-decoration:none;

font-weight:600;

transition:.35s;

}

nav a:hover{

color:#4ea8ff;

}

.header-btn{

padding:13px 28px;

border-radius:40px;

background:#4ea8ff;

text-decoration:none;

font-weight:700;

color:white;

transition:.35s;

}

.header-btn:hover{

transform:translateY(-4px);

box-shadow:0 15px 35px rgba(78,168,255,.35);

}

/* Hero */

.hero{

min-height:100vh;

padding:120px 8% 80px;

display:grid;

grid-template-columns:1.2fr .8fr;

align-items:center;

gap:60px;

}

.badge{

display:inline-block;

padding:10px 20px;

border-radius:40px;

background:rgba(78,168,255,.12);

border:1px solid rgba(78,168,255,.30);

color:#7fc8ff;

font-weight:700;

margin-bottom:30px;

}

.hero h1{

font-size:78px;

line-height:1.05;

font-weight:900;

margin-bottom:25px;

}

.hero h1 span{

display:block;

color:#4ea8ff;

}

.hero p{

font-size:22px;

color:#d6d6d6;

max-width:650px;

}

.hero-buttons{

display:flex;

gap:20px;

margin-top:45px;

flex-wrap:wrap;

}
/* ==========================
   ALIGNLOG.COM PREMIUM CSS
   Part 2
========================== */

/* Hero Right Card */

.glass-card{

background:rgba(255,255,255,.06);

border:1px solid rgba(255,255,255,.12);

backdrop-filter:blur(18px);

padding:45px;

border-radius:28px;

box-shadow:0 20px 60px rgba(0,0,0,.35);

transition:.4s;

}

.glass-card:hover{

transform:translateY(-10px);

border-color:#4ea8ff;

box-shadow:0 25px 70px rgba(78,168,255,.18);

}

.glass-card h2{

font-size:32px;

margin-bottom:25px;

}

.glass-card p{

font-size:18px;

margin:14px 0;

color:#d9d9d9;

}

/* Buttons */

.primary,
.secondary{

padding:16px 34px;

border-radius:50px;

font-weight:700;

text-decoration:none;

transition:.35s;

display:inline-block;

}

.primary{

background:#4ea8ff;

color:#fff;

}

.primary:hover{

transform:translateY(-5px);

box-shadow:0 15px 35px rgba(78,168,255,.35);

}

.secondary{

border:1px solid rgba(255,255,255,.20);

color:#fff;

}

.secondary:hover{

background:rgba(255,255,255,.08);

}

/* Common Sections */

.section{

padding:110px 8%;

}

.dark{

background:rgba(255,255,255,.02);

}

.container{

max-width:1200px;

margin:auto;

}

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title h2{

font-size:52px;

margin-bottom:18px;

}

.section-title p{

max-width:850px;

margin:auto;

font-size:20px;

color:#cfcfcf;

}

/* Feature Cards */

.feature-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:28px;

}

.feature-card{

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

padding:35px;

border-radius:24px;

transition:.35s;

backdrop-filter:blur(14px);

}

.feature-card:hover{

transform:translateY(-10px);

border-color:#4ea8ff;

box-shadow:0 20px 50px rgba(78,168,255,.16);

}

.feature-card h3{

font-size:26px;

margin-bottom:18px;

}

.feature-card p{

color:#d4d4d4;

}

/* Industries */

.industry-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

gap:25px;

}

.industry{

background:rgba(255,255,255,.05);

border-radius:22px;

padding:35px;

text-align:center;

font-size:48px;

border:1px solid rgba(255,255,255,.08);

transition:.35s;

}

.industry:hover{

transform:translateY(-8px);

border-color:#4ea8ff;

}

.industry h4{

font-size:20px;

margin-top:18px;

}
/* ==========================
   ALIGNLOG.COM PREMIUM CSS
   Part 3
========================== */

/* Statistics */

.stats{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:28px;

margin-top:60px;

}

.stat-box{

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

border-radius:24px;

padding:40px 25px;

text-align:center;

transition:.35s;

backdrop-filter:blur(16px);

}

.stat-box:hover{

transform:translateY(-10px);

border-color:#4ea8ff;

box-shadow:0 20px 50px rgba(78,168,255,.18);

}

.stat-box h3{

font-size:42px;

color:#4ea8ff;

margin-bottom:15px;

}

.stat-box p{

color:#d7d7d7;

}

/* Contact Section */

.contact-section{

padding:120px 8%;

}

.contact-card{

max-width:900px;

margin:auto;

padding:70px 50px;

border-radius:30px;

background:linear-gradient(
135deg,
rgba(78,168,255,.16),
rgba(255,255,255,.05)
);

border:1px solid rgba(255,255,255,.10);

backdrop-filter:blur(20px);

text-align:center;

}

.offer-tag{

display:inline-block;

padding:10px 22px;

border-radius:40px;

background:rgba(78,168,255,.15);

color:#7fc8ff;

font-weight:700;

margin-bottom:25px;

}

.contact-card h2{

font-size:54px;

margin-bottom:20px;

}

.contact-card h2 span{

color:#4ea8ff;

}

.contact-card p{

font-size:20px;

color:#d4d4d4;

margin-bottom:30px;

}

.contact-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

margin-bottom:45px;

}

.contact-details{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:25px;

text-align:center;

}

.contact-details h4{

margin-bottom:10px;

font-size:22px;

}

.contact-details a{

color:#7fc8ff;

text-decoration:none;

}

.contact-details a:hover{

text-decoration:underline;

}

/* Floating WhatsApp */

.floating-whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;

border-radius:50%;

background:#25D366;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

text-decoration:none;

color:#fff;

box-shadow:0 15px 40px rgba(0,0,0,.35);

transition:.35s;

z-index:999;

}

.floating-whatsapp:hover{

transform:scale(1.12);

}

/* Footer */

footer{

padding:45px 8%;

border-top:1px solid rgba(255,255,255,.08);

background:#040611;

}

.footer-container{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:30px;

align-items:center;

}

footer h3{

font-size:28px;

}

footer h3 span{

color:#4ea8ff;

}

footer p{

color:#bcbcbc;

line-height:1.8;

}
/* ==========================
   ALIGNLOG.COM PREMIUM CSS
   Part 4 (Final)
========================== */

/* Fade-in Animation */

.fade-up{
opacity:0;
transform:translateY(40px);
transition:all .8s ease;
}

.fade-up.show{
opacity:1;
transform:translateY(0);
}

/* Selection */

::selection{
background:#4ea8ff;
color:#ffffff;
}

/* Scrollbar */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#050816;
}

::-webkit-scrollbar-thumb{
background:#4ea8ff;
border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
background:#7fc8ff;
}

/* Smooth hover effect */

.feature-card,
.industry,
.stat-box,
.contact-card,
.glass-card{

will-change:transform;

}

/* Responsive */

@media(max-width:992px){

.hero{

grid-template-columns:1fr;

text-align:center;

padding-top:140px;

}

.hero p{

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-right{

display:flex;

justify-content:center;

}

.glass-card{

max-width:500px;

width:100%;

}

header{

padding:18px 6%;

}

}

@media(max-width:768px){

header{

flex-direction:column;

gap:18px;

}

nav{

flex-wrap:wrap;

justify-content:center;

gap:18px;

}

.header-btn{

width:100%;
max-width:240px;
text-align:center;

}

.hero h1{

font-size:52px;

}

.hero p{

font-size:18px;

}

.section{

padding:80px 6%;

}

.section-title h2{

font-size:36px;

}

.section-title p{

font-size:17px;

}

.contact-card{

padding:40px 25px;

}

.contact-card h2{

font-size:36px;

}

.contact-card p{

font-size:17px;

}

.footer-container{

text-align:center;

}

.floating-whatsapp{

width:58px;
height:58px;
font-size:28px;
right:18px;
bottom:18px;

}

}

@media(max-width:480px){

.hero h1{

font-size:42px;

}

.logo{

font-size:24px;

}

.badge{

font-size:13px;

}

.primary,
.secondary{

width:100%;

text-align:center;

}

.contact-buttons{

flex-direction:column;

}

}