/* =====================================================
   NEXUSREFER - STYLE.CSS
   PART 1 - FOUNDATION + NAVBAR + HERO BASE
===================================================== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

/* Reset */

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
background:#060B16;
color:#fff;
overflow-x:hidden;
line-height:1.6;
}

/* Variables */

:root{

--primary:#2563EB;
--primary-light:#3B82F6;
--secondary:#06B6D4;

--dark:#060B16;
--card:#101827;
--card2:#0F172A;

--text:#ffffff;
--text2:#94A3B8;

--border:rgba(255,255,255,.08);

--shadow:0 20px 60px rgba(37,99,235,.18);

}

/* Selection */

::selection{

background:var(--primary);

color:#fff;

}

/* Scrollbar */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#08101f;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:50px;

}

/* Links */

a{

text-decoration:none;

color:inherit;

}

/* Images */

img{

max-width:100%;

display:block;

}

/* Lists */

ul{

list-style:none;

}

/* Container */

.container{

width:92%;

max-width:1240px;

margin:auto;

}

/* Background Grid */

.bg-grid{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background-image:

linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),

linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);

background-size:50px 50px;

z-index:-4;

}

/* Blue Glow */

.glow{

position:fixed;

border-radius:50%;

filter:blur(140px);

z-index:-3;

opacity:.45;

}

.glow1{

width:420px;

height:420px;

background:#2563EB;

top:-150px;

left:-150px;

}

.glow2{

width:380px;

height:380px;

background:#06B6D4;

right:-120px;

bottom:-120px;

}

/* Navbar */

.navbar{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

padding:18px 0;

transition:.35s;

background:rgba(7,12,24,.35);

backdrop-filter:blur(16px);

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

}

.navbar .container{

display:flex;

align-items:center;

justify-content:space-between;

}

/* Logo */

.logo{

font-size:30px;

font-weight:800;

font-family:'Space Grotesk',sans-serif;

letter-spacing:.5px;

}

.logo span{

color:var(--primary);

}

/* Navigation */

.nav-links{

display:flex;

align-items:center;

gap:34px;

}

.nav-links a{

font-size:15px;

color:var(--text2);

font-weight:500;

transition:.3s;

position:relative;

}

.nav-links a:hover{

color:#fff;

}

.nav-links a::after{

content:'';

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--primary);

transition:.3s;

}

.nav-links a:hover::after{

width:100%;

}

/* Right Buttons */

.nav-buttons{

display:flex;

align-items:center;

gap:14px;

}

/* Login */

.login-btn{

padding:12px 22px;

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

border-radius:12px;

transition:.3s;

font-weight:600;

}

.login-btn:hover{

background:#111827;

}

/* Join Button */

.join-btn{

padding:12px 26px;

border-radius:12px;

background:linear-gradient(135deg,#2563EB,#3B82F6);

font-weight:700;

box-shadow:0 15px 35px rgba(37,99,235,.35);

transition:.35s;

}

.join-btn:hover{

transform:translateY(-3px);

box-shadow:0 25px 45px rgba(37,99,235,.45);

}

/* Mobile Menu */

.menu-btn{

display:none;

cursor:pointer;

}

.menu-btn span{

display:block;

width:30px;

height:3px;

margin:6px;

background:#fff;

border-radius:20px;

}

/* Hero */

.hero{

min-height:100vh;

display:flex;

align-items:center;

padding-top:120px;

}

.hero-wrapper{

display:grid;

grid-template-columns:1.05fr .95fr;

align-items:center;

gap:60px;

}

/* Badge */

.badge{

display:inline-flex;

padding:10px 18px;

border-radius:50px;

background:rgba(37,99,235,.15);

border:1px solid rgba(37,99,235,.35);

font-size:14px;

color:#8fb5ff;

margin-bottom:25px;

font-weight:600;

}

/* Hero Heading */

.hero h1{

font-size:68px;

font-family:'Space Grotesk',sans-serif;

line-height:1.05;

margin-bottom:22px;

font-weight:700;

}

.hero h1 span{

display:block;

background:linear-gradient(90deg,#3B82F6,#06B6D4);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

/* Hero Paragraph */

.hero p{

font-size:18px;

max-width:620px;

color:var(--text2);

margin-bottom:40px;

}

/* Hero Buttons */

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.primary-btn{

padding:16px 34px;

background:linear-gradient(135deg,#2563EB,#3B82F6);

border-radius:14px;

font-weight:700;

transition:.35s;

box-shadow:0 20px 40px rgba(37,99,235,.30);

}

.primary-btn:hover{

transform:translateY(-4px);

}

.secondary-btn{

padding:16px 34px;

border-radius:14px;

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

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

font-weight:700;

transition:.35s;

}

.secondary-btn:hover{

background:#101827;

}

/* =====================================================
   NEXUSREFER - STYLE.CSS
   PART 2 - HERO RIGHT + STATS + FEATURES
===================================================== */

/* ==========================
   HERO RIGHT
========================== */

.hero-right{
position:relative;
height:650px;
display:flex;
align-items:center;
justify-content:center;
}

/* Main Circle */

.circle{
width:420px;
height:420px;
border-radius:50%;
background:radial-gradient(circle,#2563EB 0%,#0F172A 65%,transparent 100%);
position:absolute;
animation:floatCircle 6s ease-in-out infinite;
box-shadow:0 0 120px rgba(37,99,235,.35);
}

/* Orbit Ring */

.network{
position:absolute;
width:520px;
height:520px;
border:1px solid rgba(255,255,255,.08);
border-radius:50%;
animation:rotateSlow 40s linear infinite;
}

/* Floating Nodes */

.node{
position:absolute;
width:16px;
height:16px;
background:#3B82F6;
border-radius:50%;
box-shadow:0 0 18px #3B82F6;
}

.n1{top:20px;left:220px;}
.n2{bottom:30px;left:120px;}
.n3{top:180px;right:15px;}
.n4{bottom:90px;right:70px;}
.n5{top:100px;left:40px;}

/* Floating Cards */

.floating{
position:absolute;
background:rgba(16,24,39,.75);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.08);
padding:18px 24px;
border-radius:18px;
box-shadow:0 20px 50px rgba(0,0,0,.25);
animation:floating 5s ease-in-out infinite;
}

.floating h4{
font-size:18px;
font-weight:700;
color:#fff;
}

.card1{
top:90px;
left:20px;
}

.card2{
bottom:120px;
right:0;
animation-delay:1s;
}

.card3{
bottom:40px;
left:40px;
animation-delay:2s;
}

/* Mini Stats */

.hero-mini{
display:flex;
gap:18px;
margin-top:50px;
flex-wrap:wrap;
}

.mini-card{
padding:18px 24px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
min-width:150px;
transition:.35s;
}

.mini-card:hover{
transform:translateY(-8px);
border-color:#2563EB;
box-shadow:0 20px 50px rgba(37,99,235,.18);
}

.mini-card h3{
font-size:28px;
font-family:'Space Grotesk',sans-serif;
margin-bottom:6px;
}

.mini-card p{
font-size:14px;
margin:0;
color:#94A3B8;
}

/* ==========================
   STATS
========================== */

.stats{
padding:100px 0;
}

.stats .container{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.stat-box{
padding:45px 25px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.08);
border-radius:22px;
text-align:center;
transition:.35s;
}

.stat-box:hover{
transform:translateY(-10px);
border-color:#2563EB;
box-shadow:0 25px 60px rgba(37,99,235,.20);
}

.stat-box h2{
font-size:52px;
font-family:'Space Grotesk',sans-serif;
margin-bottom:12px;
background:linear-gradient(90deg,#3B82F6,#06B6D4);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.stat-box p{
font-size:16px;
color:#94A3B8;
}

/* ==========================
   FEATURES
========================== */

.features{
padding:120px 0;
}

.section-title{
text-align:center;
margin-bottom:70px;
}

.section-title h2{
font-size:48px;
font-family:'Space Grotesk',sans-serif;
margin-bottom:18px;
}

.section-title p{
max-width:720px;
margin:auto;
font-size:18px;
color:#94A3B8;
}

/* Feature Grid */

.feature-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;
}

.feature-card{
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.08);
border-radius:24px;
padding:38px;
transition:.35s;
position:relative;
overflow:hidden;
}

.feature-card::before{
content:'';
position:absolute;
left:-120px;
top:-120px;
width:220px;
height:220px;
background:rgba(37,99,235,.15);
border-radius:50%;
filter:blur(40px);
transition:.4s;
}

.feature-card:hover::before{
left:-40px;
top:-40px;
}

.feature-card:hover{
transform:translateY(-10px);
border-color:#2563EB;
box-shadow:0 25px 60px rgba(37,99,235,.20);
}

.icon{
width:70px;
height:70px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
font-size:32px;
margin-bottom:24px;
background:linear-gradient(135deg,#2563EB,#06B6D4);
}

.feature-card h3{
font-size:24px;
margin-bottom:14px;
font-family:'Space Grotesk',sans-serif;
}

.feature-card p{
color:#94A3B8;
font-size:16px;
line-height:1.7;
}

/* ==========================
   ANIMATIONS
========================== */

@keyframes rotateSlow{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}

@keyframes floatCircle{
0%{
transform:translateY(0);
}
50%{
transform:translateY(-20px);
}
100%{
transform:translateY(0);
}
}

@keyframes floating{
0%{
transform:translateY(0px);
}
50%{
transform:translateY(-14px);
}
100%{
transform:translateY(0px);
}
}

/* ======================================
   PART 3
   PUBLISHERS + ADVERTISERS
====================================== */

.publishers,
.advertisers{

padding:140px 0;

position:relative;

}

.pub-wrapper,
.adv-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:90px;

}

/* Badge */

.section-badge{

display:inline-block;

padding:10px 18px;

border-radius:50px;

background:rgba(37,99,235,.15);

border:1px solid rgba(37,99,235,.35);

color:#8fb5ff;

font-size:14px;

font-weight:700;

margin-bottom:20px;

letter-spacing:.5px;

}

/* Heading */

.pub-content h2,
.adv-content h2{

font-size:52px;

line-height:1.1;

margin-bottom:24px;

font-family:'Space Grotesk',sans-serif;

}

.pub-content p,
.adv-content p{

font-size:18px;

color:#94A3B8;

margin-bottom:34px;

max-width:620px;

}

/* Check Grid */

.check-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

margin-bottom:40px;

}

.check-grid div{

padding:16px 20px;

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

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

border-radius:14px;

transition:.35s;

font-weight:600;

}

.check-grid div:hover{

transform:translateY(-6px);

border-color:#2563EB;

}

/* Image Area */

.image-box{

position:relative;

height:520px;

display:flex;

align-items:center;

justify-content:center;

}

.image-glow{

position:absolute;

width:320px;

height:320px;

border-radius:50%;

background:#2563EB;

filter:blur(120px);

opacity:.35;

animation:floatCircle 6s ease-in-out infinite;

}

/* Dashboard */

.dashboard-card{

position:relative;

width:380px;

background:rgba(16,24,39,.78);

backdrop-filter:blur(20px);

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

padding:30px;

border-radius:26px;

box-shadow:0 30px 80px rgba(0,0,0,.35);

}

.dashboard-card h3{

font-size:24px;

margin-bottom:28px;

font-family:'Space Grotesk',sans-serif;

}

/* Bars */

.bar{

height:14px;

border-radius:30px;

background:linear-gradient(90deg,#2563EB,#06B6D4);

margin-bottom:16px;

}

.bar.short{

width:70%;

}

/* Stats */

.stats-row{

display:flex;

justify-content:space-between;

padding:16px 0;

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

}

.stats-row span{

color:#94A3B8;

}

.stats-row strong{

font-size:18px;

}

/* Chart */

.circle-chart{

width:130px;

height:130px;

margin:20px auto 30px;

border-radius:50%;

background:

conic-gradient(

#2563EB 0deg,

#06B6D4 260deg,

rgba(255,255,255,.08) 260deg

);

position:relative;

}

.circle-chart::after{

content:'';

position:absolute;

width:78px;

height:78px;

background:#101827;

border-radius:50%;

top:50%;

left:50%;

transform:translate(-50%,-50%);

}

/* Reverse Layout */

.advertisers{

background:linear-gradient(

180deg,

transparent,

rgba(255,255,255,.02),

transparent

);

}

.adv-wrapper{

grid-template-columns:1fr 1fr;

}

.adv-content{

order:1;

}

.adv-image{

order:2;

}

/* Hover */

.dashboard-card:hover{

transform:translateY(-10px);

transition:.4s;

box-shadow:0 40px 100px rgba(37,99,235,.20);

}

/* ======================================
PART 4
TECHNOLOGY + TRAFFIC
====================================== */

.technology{

padding:140px 0;

}

.tech-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:70px;

}

.tech-card{

padding:40px;

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

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

border-radius:24px;

transition:.35s;

position:relative;

overflow:hidden;

}

.tech-card:hover{

transform:translateY(-10px);

border-color:#2563EB;

box-shadow:0 30px 80px rgba(37,99,235,.18);

}

.tech-icon{

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

font-size:32px;

border-radius:18px;

background:linear-gradient(135deg,#2563EB,#06B6D4);

margin-bottom:22px;

}

.tech-card h3{

font-size:24px;

margin-bottom:15px;

font-family:'Space Grotesk',sans-serif;

}

.tech-card p{

color:#94A3B8;

line-height:1.7;

}

/* Traffic */

.traffic{

padding:120px 0;

}

.traffic-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:24px;

margin-top:60px;

}

.traffic-grid div{

padding:28px;

text-align:center;

font-size:20px;

font-weight:700;

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

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

border-radius:20px;

transition:.35s;

}

.traffic-grid div:hover{

transform:translateY(-8px);

border-color:#2563EB;

background:rgba(37,99,235,.08);

}
/* ======================================
PART 5
TRUSTED + PROCESS
====================================== */

.trusted{

padding:90px 0;

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

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

}

.trusted-title{

text-align:center;

font-size:18px;

color:#94A3B8;

margin-bottom:50px;

}

.logo-slider{

display:grid;

grid-template-columns:repeat(6,1fr);

gap:20px;

}

.logo-item{

height:90px;

display:flex;

align-items:center;

justify-content:center;

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

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

border-radius:18px;

font-weight:700;

font-size:18px;

color:#9FB4D9;

transition:.35s;

}

.logo-item:hover{

transform:translateY(-8px);

border-color:#2563EB;

background:rgba(37,99,235,.08);

}

/* Process */

.process{

padding:140px 0;

}

.process-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:28px;

margin-top:70px;

}

.process-card{

padding:40px;

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

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

border-radius:24px;

transition:.35s;

position:relative;

overflow:hidden;

}

.process-card:hover{

transform:translateY(-10px);

border-color:#2563EB;

box-shadow:0 25px 70px rgba(37,99,235,.18);

}

.number{

font-size:54px;

font-family:'Space Grotesk',sans-serif;

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

margin-bottom:25px;

}

.process-card h3{

font-size:24px;

margin-bottom:16px;

font-family:'Space Grotesk',sans-serif;

}

.process-card p{

color:#94A3B8;

line-height:1.8;

}

/* ======================================
PART 6
COMPARISON SECTION
====================================== */

.comparison{

padding:140px 0;

position:relative;

}

.comparison-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:40px;

margin-top:70px;

}

.compare-card{

position:relative;

padding:45px;

border-radius:28px;

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

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

transition:.35s;

overflow:hidden;

}

.compare-card:hover{

transform:translateY(-10px);

}

.compare-card h3{

font-size:32px;

margin-bottom:30px;

font-family:'Space Grotesk',sans-serif;

}

.compare-card ul{

display:flex;

flex-direction:column;

gap:18px;

}

.compare-card li{

padding:16px 20px;

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

border-radius:14px;

font-weight:500;

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

}

.old{

border-color:rgba(255,255,255,.08);

}

.old h3{

color:#CBD5E1;

}

.new{

border:2px solid #2563EB;

box-shadow:0 30px 80px rgba(37,99,235,.18);

}

.new::before{

content:'';

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:linear-gradient(90deg,#2563EB,#06B6D4);

}

.best-badge{

position:absolute;

top:22px;

right:22px;

padding:8px 16px;

border-radius:30px;

background:#2563EB;

font-size:13px;

font-weight:700;

letter-spacing:.5px;

}

.new li{

border-color:rgba(37,99,235,.18);

}

.compare-card li:hover{

border-color:#2563EB;

background:rgba(37,99,235,.08);

}

/* ======================================
PART 7
CONTACT
====================================== */

.contact{

padding:140px 0;

}

.contact-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:start;

}

.contact-left h2{

font-size:52px;

font-family:'Space Grotesk',sans-serif;

margin:22px 0;

line-height:1.1;

}

.contact-left>p{

font-size:18px;

color:#94A3B8;

margin-bottom:40px;

max-width:560px;

}

.contact-info{

display:flex;

flex-direction:column;

gap:20px;

}

.info-card{

padding:24px;

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

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

border-radius:18px;

transition:.35s;

}

.info-card:hover{

transform:translateY(-6px);

border-color:#2563EB;

}

.info-card h4{

font-size:18px;

margin-bottom:10px;

font-family:'Space Grotesk',sans-serif;

}

.info-card p{

color:#94A3B8;

line-height:1.7;

}

/* Form */

.contact-form{
    
    margin-top:220px;

padding:40px;

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

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

border-radius:26px;

}

.form-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:18px;

margin-bottom:18px;

}

.contact-form input,
.contact-form select,
.contact-form textarea{

width:100%;

padding:16px 18px;

margin-bottom:18px;

background:#0F172A;

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

border-radius:14px;

color:#fff;

font-size:15px;

outline:none;

transition:.3s;

}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{

border-color:#2563EB;

box-shadow:0 0 0 4px rgba(37,99,235,.15);

}

.contact-form textarea{

resize:vertical;

min-height:160px;

}

.contact-form button{

width:100%;

border:none;

cursor:pointer;

font-size:16px;

}

/* ======================================
PART 8
FINAL CTA
====================================== */

.final-cta{

padding:120px 0 80px;

}

.cta-box{

position:relative;

overflow:hidden;

padding:90px;

border-radius:34px;

background:linear-gradient(
135deg,
#2563EB,
#1E40AF,
#0F172A
);

box-shadow:0 40px 100px rgba(37,99,235,.30);

}

.cta-content{

position:relative;

z-index:2;

max-width:760px;

}

.cta-content h2{

font-size:56px;

line-height:1.1;

margin:22px 0;

font-family:'Space Grotesk',sans-serif;

}

.cta-content p{

font-size:19px;

color:rgba(255,255,255,.85);

max-width:640px;

margin-bottom:40px;

line-height:1.8;

}

.cta-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

/* Background Shapes */

.cta-shapes{

position:absolute;

right:-120px;

top:-100px;

width:600px;

height:600px;

pointer-events:none;

}

.shape{

position:absolute;

border-radius:50%;

filter:blur(10px);

opacity:.18;

}

.shape1{

width:260px;

height:260px;

background:#fff;

top:0;

right:80px;

}

.shape2{

width:180px;

height:180px;

background:#06B6D4;

bottom:140px;

left:120px;

}

.shape3{

width:420px;

height:420px;

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

right:0;

bottom:-100px;

}
/* ======================================
PART 9
FOOTER
====================================== */

.footer{

padding:90px 0 35px;

background:#040914;

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

}

.footer-top{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:60px;

padding-bottom:60px;

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

}

.footer-about p{

margin:24px 0;

color:#94A3B8;

line-height:1.9;

max-width:420px;

}

/* Links */

.footer-links{

display:flex;

flex-direction:column;

}

.footer-links h4{

font-size:20px;

margin-bottom:24px;

font-family:'Space Grotesk',sans-serif;

}

.footer-links a{

margin-bottom:14px;

color:#94A3B8;

transition:.3s;

}

.footer-links a:hover{

color:#fff;

padding-left:6px;

}

/* Social */

.social-links{

display:flex;

gap:14px;

margin-top:30px;

}

.social-links a{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

border-radius:14px;

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

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

transition:.35s;

font-size:18px;

}

.social-links a:hover{

background:#2563EB;

border-color:#2563EB;

transform:translateY(-5px);

}

/* Bottom */

.footer-bottom{

display:flex;

justify-content:space-between;

align-items:center;

padding-top:30px;

color:#6B7280;

font-size:15px;

flex-wrap:wrap;

gap:15px;

}

/* =====================================
RESPONSIVE CSS
PART 1
===================================== */

@media (max-width:1200px){

.container{

width:94%;

}

.hero h1{

font-size:58px;

}

.pub-content h2,
.adv-content h2,
.contact-left h2,
.cta-content h2{

font-size:44px;

}

}

@media (max-width:992px){

.hero-wrapper,
.pub-wrapper,
.adv-wrapper,
.contact-wrapper{

grid-template-columns:1fr;

gap:60px;

}

.hero{

padding-top:140px;

text-align:center;

}

.hero p{

margin:auto auto 40px;

}

.hero-buttons,
.hero-mini{

justify-content:center;

}

.hero-right{

height:500px;

}

.stats .container{

grid-template-columns:repeat(2,1fr);

}

.feature-grid,
.tech-grid,
.process-grid,
.traffic-grid,
.logo-slider,
.comparison-grid,
.footer-top{

grid-template-columns:1fr 1fr;

}

.contact-right{

padding-top:0 !important;

}

.footer-about{

grid-column:1/-1;

}

}
/* =====================================
RESPONSIVE CSS
PART 2 (MOBILE)
===================================== */

@media (max-width:768px){

/* Navbar */

.navbar{

padding:15px 0;

}

.logo{

font-size:26px;

}

/* Hide Desktop Menu */

.nav-links,
.nav-buttons{

display:none;

}

/* Show Hamburger */

.menu-btn{

display:block;

}

/* Hero */

.hero{

padding-top:120px;

padding-bottom:60px;

min-height:auto;

}

.hero-wrapper{

grid-template-columns:1fr;

gap:40px;

text-align:center;

}

.hero h1{

font-size:42px;

line-height:1.15;

}

.hero p{

font-size:16px;

max-width:100%;

margin:0 auto 30px;

}

.badge{

font-size:13px;

padding:8px 16px;

}

/* Buttons */

.hero-buttons{

flex-direction:column;

align-items:stretch;

gap:15px;

}

.primary-btn,
.secondary-btn{

width:100%;

text-align:center;

}

/* Hero Right */

.hero-right{

height:350px;

}

.circle{

width:240px;

height:240px;

}

.network{

width:300px;

height:300px;

}

/* Floating Cards */

.floating{

padding:12px 16px;

}

.floating h4{

font-size:14px;

}

/* Mini Cards */

.hero-mini{

display:grid;

grid-template-columns:1fr;

gap:15px;

}

/* Stats */

.stats{

padding:70px 0;

}

.stats .container{

grid-template-columns:1fr;

}

.stat-box{

padding:35px 20px;

}

.stat-box h2{

font-size:40px;

}

/* Features */

.features{

padding:80px 0;

}

.feature-grid{

grid-template-columns:1fr;

}

.feature-card{

padding:28px;

}

/* Publishers */

.pub-wrapper{

grid-template-columns:1fr;

gap:40px;

}

.pub-content{

order:2;

}

.pub-image{

order:1;

}

/* Advertisers */

.adv-wrapper{

grid-template-columns:1fr;

gap:40px;

}

.adv-content{

order:2;

}

.adv-image{

order:1;

}

/* Dashboard */

.image-box{

height:380px;

}

.dashboard-card{

width:100%;

max-width:320px;

}

/* Technology */

.tech-grid{

grid-template-columns:1fr;

}

/* Traffic */

.traffic-grid{

grid-template-columns:1fr 1fr;

}

/* Trusted */

.logo-slider{

grid-template-columns:1fr 1fr;

}

/* Process */

.process-grid{

grid-template-columns:1fr;

}

/* Comparison */

.comparison-grid{

grid-template-columns:1fr;

}

/* Contact */

.contact{

padding:90px 0;

}

.contact-wrapper{

grid-template-columns:1fr;

gap:50px;

}

.form-row{

grid-template-columns:1fr;

}

/* CTA */

.cta-box{

padding:50px 25px;

text-align:center;

}

.cta-content h2{

font-size:34px;

}

.cta-buttons{

flex-direction:column;

}

.cta-buttons a{

width:100%;

}

/* Footer */

.footer-top{

grid-template-columns:1fr;

gap:40px;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

.section-title h2{

font-size:34px;

}

.pub-content h2,
.adv-content h2,
.contact-left h2{

font-size:34px;

}

}

/* =====================================
RESPONSIVE CSS
PART 3 (FINAL POLISH)
===================================== */

@media (max-width:576px){

/* Container */

.container{

width:92%;

}

/* Body */

body{

overflow-x:hidden;

}

/* Navbar */

.logo{

font-size:24px;

}

/* Hero */

.hero{

padding-top:100px;

}

.hero h1{

font-size:36px;

line-height:1.15;

letter-spacing:-1px;

}

.hero p{

font-size:15px;

line-height:1.8;

}

.badge{

font-size:12px;

padding:7px 14px;

}

/* Buttons */

.primary-btn,
.secondary-btn,
.join-btn,
.login-btn{

padding:15px 20px;

font-size:15px;

}

/* Hero Right */

.hero-right{

height:300px;

overflow:hidden;

}

.circle{

width:190px;

height:190px;

}

.network{

width:240px;

height:240px;

}

.node{

width:10px;

height:10px;

}

/* Floating Cards */

.floating{

padding:10px 14px;

border-radius:12px;

}

.card1{

top:20px;

left:5px;

}

.card2{

right:0;

bottom:60px;

}

.card3{

left:15px;

bottom:10px;

}

.floating h4{

font-size:12px;

}

/* Mini Cards */

.mini-card{

min-width:100%;

padding:18px;

}

/* Headings */

.section-title{

margin-bottom:45px;

}

.section-title h2{

font-size:30px;

line-height:1.2;

}

.section-title p{

font-size:15px;

}

/* Features */

.feature-card{

padding:24px;

}

.icon{

width:60px;

height:60px;

font-size:24px;

}

/* Dashboard */

.image-box{

height:320px;

}

.dashboard-card{

padding:24px;

}

.dashboard-card h3{

font-size:20px;

}

/* Comparison */

.compare-card{

padding:28px;

}

.compare-card h3{

font-size:24px;

}

/* Contact */

.contact-left h2{

font-size:30px;

}

.contact-form{

padding:25px;

}

/* CTA */

.cta-box{

padding:40px 20px;

border-radius:24px;

}

.cta-content h2{

font-size:28px;

}

.cta-content p{

font-size:15px;

}

/* Footer */

.footer{

padding-top:70px;

}

.footer-top{

gap:30px;

}

.social-links{

justify-content:flex-start;

flex-wrap:wrap;

}

.social-links a{

width:42px;

height:42px;

}

}

/* =====================================
SMALL DEVICES
===================================== */

@media (max-width:380px){

.hero h1{

font-size:31px;

}

.hero p{

font-size:14px;

}

.primary-btn,
.secondary-btn{

font-size:14px;

padding:14px 18px;

}

.section-title h2{

font-size:26px;

}

.pub-content h2,
.adv-content h2,
.contact-left h2{

font-size:26px;

}

.traffic-grid{

grid-template-columns:1fr;

}

.logo-slider{

grid-template-columns:1fr;

}

}

/* =====================================
GLOBAL FIXES
===================================== */

img{

max-width:100%;

height:auto;

}

section{

overflow:hidden;

}

.hero,
.publishers,
.advertisers,
.technology,
.traffic,
.process,
.comparison,
.contact,
.final-cta{

overflow:hidden;

}

input,
textarea,
select,
button{

font-family:inherit;

}

button{

cursor:pointer;

}

html{

scroll-padding-top:90px;

}

*{

word-wrap:break-word;

}

/* ==========================
MOBILE MENU
========================== */

.mobile-menu{

position:fixed;

top:82px;

left:0;

width:100%;

background:#08111f;

backdrop-filter:blur(20px);

padding:25px;

display:flex;

flex-direction:column;

gap:18px;

transform:translateY(-120%);

opacity:0;

visibility:hidden;

transition:.35s ease;

z-index:998;

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

}

.mobile-menu.active{

transform:translateY(0);

opacity:1;

visibility:visible;

}

.mobile-menu a{

padding:14px 18px;

border-radius:12px;

font-weight:600;

color:#fff;

transition:.3s;

}

.mobile-menu a:hover{

background:rgba(37,99,235,.15);

}

.mobile-login{

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

}

.mobile-join{

background:linear-gradient(135deg,#2563EB,#3B82F6);

text-align:center;

}

@media(min-width:769px){

.mobile-menu{

display:none;

}

}