/* =====================================================
INFIPROJECTS MASTER STYLESHEET — FINAL POLISHED SYSTEM
===================================================== */

/* ===== Variables ===== */

:root{
--bg-primary:#ffffff;
--bg-secondary:#f9f9f9;
--text-primary:#1a1a1a;
--text-secondary:#666666;
--accent:#FF0000;
--border:#e0e0e0;
--nav-bg:rgba(255,255,255,0.8);
--card-bg:#ffffff;
--transition:0.4s cubic-bezier(0.165,0.84,0.44,1);
--max-width:1160px;
}

.dark{
--bg-primary:#0a0a0a;
--bg-secondary:#141414;
--text-primary:#f0f0f0;
--text-secondary:#a0a0a0;
--border:#2a2a2a;
--nav-bg:rgba(10,10,10,0.8);
--card-bg:#141414;
}

/* ===== Reset ===== */

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

body{
font-family:'Inter',sans-serif;
background:var(--bg-primary);
color:var(--text-primary);
line-height:1.6;
transition:background-color var(--transition),color var(--transition);
padding-left:24px;
padding-right:24px;
}

/* ===============================
   Layout Container
================================= */

.container{
max-width:var(--max-width);
margin:auto;
padding-left:40px;
padding-right:40px;
}

/* =====================================================
NAVIGATION
===================================================== */

nav{
position:fixed;
top:0;
left:0;
width:100%;
height:80px;
background:var(--nav-bg);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--border);
z-index:1000;
display:flex;
align-items:center;
}

.nav-inner{
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
}

.logo-box{
display:flex;
align-items:center;
gap:12px;
text-decoration:none;
color:inherit;
font-weight:800;
text-transform:uppercase;
letter-spacing:-1px;
}

.nav-links{
display:flex;
gap:32px;
list-style:none;
}

.nav-links a{
text-decoration:none;
color:var(--text-secondary);
font-size:13px;
font-weight:600;
text-transform:uppercase;
letter-spacing:1px;
}

.nav-links a:hover{
color:var(--accent);
}

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

.hero{
position:relative;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding-top:80px;
overflow:hidden;
}

.hero-bg{
position:absolute;
inset:0;
z-index:-1;
}

.hero-bg img{
width:100%;
height:100%;
object-fit:cover;
opacity:.25;
}

.hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(to bottom,transparent,var(--bg-primary));
}

.badge{
border:1px solid var(--border);
padding:6px 12px;
font-size:10px;
font-weight:800;
letter-spacing:3px;
margin-bottom:2rem;
display:inline-block;
}

.hero-title h1{font-size:44px;font-weight:800;}
.hero-title h2{font-size:40px;font-weight:700;}
.hero-title h3{font-size:30px;font-weight:700;}

.highlight{color:var(--accent);}

.hero-description{
margin-top:20px;
font-size:20px;
color:var(--text-secondary);
}

/* =====================================================
SECTIONS
===================================================== */

.section{padding:140px 0;}

.section-h2{
font-size:3rem;
font-weight:800;
}

/* =====================================================
GRIDS
===================================================== */

.grid-2{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
}

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

.grid-4{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1px;
background:var(--border);
}

/* =====================================================
MARKET
===================================================== */

.market-box{
background:var(--bg-secondary);
padding:80px;
position:relative;
overflow:hidden;
}

.market-accent{
position:absolute;
right:-40px;
top:0;
width:30%;
height:100%;
background:var(--accent);
opacity:0.05;
transform:skewX(-15deg);
}

/* =====================================================
ARBITRATOR
===================================================== */

.benefit-card{
padding:60px;
border:1px solid var(--border);
background:var(--bg-secondary);
}

/* =====================================================
FOOTER
===================================================== */

.footer{
background:#050505;
color:#fff;
padding:100px 0 40px;
}

.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:80px;
}

.footer-bottom{
border-top:1px solid #1a1a1a;
padding-top:40px;
display:flex;
justify-content:space-between;
font-size:10px;
}

/* =====================================================
RESPONSIVE SYSTEM
===================================================== */

/* -------- Tablet -------- */

@media (max-width:1024px){

.container{
padding-left:20px;
padding-right:20px;
}

.grid-2,
.grid-3,
.grid-4{
grid-template-columns:1fr;
gap:40px;
}

.section{
padding:100px 0;
}

.hero-title h1{font-size:32px;}
.hero-title h2{font-size:28px;}
.hero-title h3{font-size:22px;}

.hero-description{
font-size:16px;
}

/* Market fix */
.market-box{
padding:50px 30px;
}

.market-accent{
display:none;
}

/* Footer */
.footer-grid{
grid-template-columns:1fr;
gap:40px;
text-align:center;
}

.footer-bottom{
flex-direction:column;
gap:20px;
text-align:center;
}
}

/* -------- Mobile -------- */

@media (max-width:600px){

body{
padding-left:16px;
padding-right:16px;
}

.container{
padding-left:10px;
padding-right:10px;
}

.section{
padding:80px 0;
}

.hero{
padding-top:100px;
}

.hero-title h1{font-size:26px;}
.hero-title h2{font-size:22px;}
.hero-title h3{font-size:18px;}

.hero-description{
font-size:15px;
}

/* Cards tighter */
.benefit-card{
padding:30px;
}

/* Market */
.market-box{
padding:30px 20px;
}
}