/* =========================================================
   GUADAGNI NEL WEB — STYLE 2026
   Fintech / Editorial / Modern UI
========================================================= */


/* =========================================================
   GOOGLE FONT
========================================================= */

/*
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
*/


/* =========================================================
   ROOT COLORS
========================================================= */

:root{

--bg:#f4f7fb;
--card:#ffffff;

--text:#111827;
--text-light:#6b7280;

--primary:#2563eb;
--primary-dark:#1d4ed8;

--gradient:
linear-gradient(
135deg,
#2563eb,
#7c3aed
);

--success:#10b981;
--danger:#ef4444;

--border:#e5e7eb;

--shadow-sm:
0 4px 12px rgba(0,0,0,0.04);

--shadow-md:
0 10px 30px rgba(0,0,0,0.08);

}


/* =========================================================
   RESET
========================================================= */

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


/* =========================================================
   BODY
========================================================= */

body{

font-family:'Inter',Arial,sans-serif;

background:var(--bg);

color:var(--text);

line-height:1.7;

-webkit-font-smoothing:antialiased;

}


/* =========================================================
   LINKS
========================================================= */

a{
color:var(--primary);
text-decoration:none;
transition:0.2s;
}

a:hover{
opacity:0.9;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

main{

max-width:960px;

margin:40px auto;

padding:30px;

background:var(--card);

border-radius:24px;

box-shadow:var(--shadow-sm);

}


/* =========================================================
   HEADER
========================================================= */

.site-header{

position:sticky;
top:0;

z-index:999;

backdrop-filter:blur(14px);

background:rgba(255,255,255,0.75);

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

}

.header-container{

max-width:1200px;

margin:auto;

display:flex;
align-items:center;
justify-content:space-between;

padding:16px 20px;

}


/* =========================================================
   LOGO
========================================================= */

.logo img{
height:72px;
display:block;
}


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

.main-nav ul{

list-style:none;

display:flex;
align-items:center;

gap:28px;

}

.main-nav a{

font-size:15px;
font-weight:700;

color:var(--text);

position:relative;

}

.main-nav a::after{

content:'';

position:absolute;

left:0;
bottom:-6px;

width:0;
height:2px;

background:var(--primary);

transition:0.25s;

}

.main-nav a:hover::after{
width:100%;
}


/* =========================================================
   HAMBURGER
========================================================= */

.hamburger{

display:none;

flex-direction:column;

gap:5px;

cursor:pointer;

}

.hamburger span{

width:26px;
height:3px;

background:var(--text);

border-radius:4px;

}


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

.hero{

background:
linear-gradient(
135deg,
#111827,
#1e293b
);

color:white;

padding:55px 40px;

border-radius:28px;

margin-bottom:40px;

position:relative;

overflow:hidden;

}

.hero::before{

content:'';

position:absolute;

width:320px;
height:320px;

background:rgba(37,99,235,0.25);

filter:blur(80px);

top:-120px;
right:-120px;

}

.hero h1{

font-size:42px;
line-height:1.1;

margin-bottom:16px;

position:relative;
z-index:2;

}

.hero p{

font-size:18px;

opacity:0.92;

max-width:720px;

position:relative;
z-index:2;

}


/* =========================================================
   ARTICLE HEADER
========================================================= */

.article-header h1{

font-size:38px;

line-height:1.15;

margin-bottom:20px;

font-weight:800;

}


/* =========================================================
   COVER IMAGE
========================================================= */

.article-cover{
margin:30px 0;
}

.article-cover img{

width:100%;

border-radius:22px;

display:block;

box-shadow:var(--shadow-md);

}


/* =========================================================
   META
========================================================= */

.article-meta{

font-size:14px;

color:var(--text-light);

margin-bottom:20px;

}


/* =========================================================
   TAGS
========================================================= */

.article-tags{
margin-bottom:25px;
}

.tag{

display:inline-block;

padding:6px 12px;

border-radius:999px;

background:#eef2ff;

color:var(--primary);

font-size:13px;
font-weight:600;

margin-right:8px;
margin-bottom:8px;

}


/* =========================================================
   ARTICLE CONTENT
========================================================= */

.article-content{

font-size:18px;

}

.article-content p{

margin-bottom:24px;

color:#1f2937;

}

.article-content h2{

font-size:30px;

line-height:1.2;

margin-top:50px;
margin-bottom:18px;

font-weight:800;

}

.article-content h3{

font-size:22px;

margin-top:35px;
margin-bottom:14px;

font-weight:700;

}

.article-content ul,
.article-content ol{

margin-left:22px;

margin-bottom:28px;

}

.article-content li{
margin-bottom:10px;
}


/* =========================================================
   TABLES
========================================================= */

.article-content table{

width:100%;

border-collapse:collapse;

margin-top:20px;

overflow:hidden;

border-radius:16px;

background:white;

box-shadow:var(--shadow-sm);

}

.article-content td{

padding:14px;

border:1px solid var(--border);

}


/* =========================================================
   PROMO BOX
========================================================= */

.promo-box{

padding:24px;

border-radius:20px;

background:
linear-gradient(
135deg,
rgba(37,99,235,0.08),
rgba(124,58,237,0.08)
);

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

margin:30px 0;

}


/* =========================================================
   BUTTONS
========================================================= */

.btn-main,
.btn-primary,
.hype-btn{

display:inline-flex;

align-items:center;
justify-content:center;

padding:14px 22px;

border-radius:14px;

background:var(--gradient);

color:#fff;

font-weight:700;

text-decoration:none;

transition:0.25s;

border:none;

cursor:pointer;

}

.btn-main:hover,
.btn-primary:hover,
.hype-btn:hover{

transform:translateY(-2px);

filter:brightness(1.05);

}


/* =========================================================
   CARDS
========================================================= */

.article-card,
.offer-card{

background:var(--card);

border-radius:22px;

overflow:hidden;

border:1px solid var(--border);

box-shadow:var(--shadow-sm);

transition:0.25s;

}

.article-card:hover,
.offer-card:hover{

transform:translateY(-4px);

box-shadow:var(--shadow-md);

}


/* =========================================================
   ARTICLES GRID
========================================================= */

.articles-grid{

display:grid;

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

gap:24px;

}


/* =========================================================
   CARD IMAGE
========================================================= */

.thumb img{

width:100%;
height:190px;

object-fit:cover;

display:block;

}


/* =========================================================
   CARD CONTENT
========================================================= */

.card-content{
padding:20px;
}

.category{

font-size:12px;

font-weight:700;

color:var(--primary);

text-transform:uppercase;

letter-spacing:0.5px;

}

.card-content h3{

font-size:21px;

margin:12px 0;

line-height:1.3;

}

.desc{

font-size:15px;

color:var(--text-light);

margin-bottom:16px;

}

.meta{

font-size:13px;

color:#9ca3af;

display:flex;
justify-content:space-between;

}


/* =========================================================
   OFFER GRID
========================================================= */

.offer-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:18px;

margin-top:20px;

}


/* =========================================================
   CONTACT FORM
========================================================= */

.contact-form{

display:flex;

flex-direction:column;

gap:14px;

margin-top:25px;

}

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

padding:14px;

border-radius:14px;

border:1px solid var(--border);

font-size:15px;

font-family:inherit;

background:white;

}

.contact-form textarea{

min-height:140px;

resize:vertical;

}

.contact-form button{

padding:14px;

border:none;

border-radius:14px;

background:var(--gradient);

color:white;

font-weight:700;

cursor:pointer;

}


/* =========================================================
   ALERT MESSAGES
========================================================= */

.msg{

padding:14px;

border-radius:14px;

margin-top:12px;

}

.msg.success{

background:#ecfdf5;
color:#065f46;

}

.msg.error{

background:#fef2f2;
color:#991b1b;

}


/* =========================================================
   COOKIE BANNER
========================================================= */

.cookie-banner{

position:fixed;

left:50%;
bottom:20px;

transform:translateX(-50%);

width:92%;
max-width:500px;

background:#111827;

color:white;

padding:20px;

border-radius:20px;

box-shadow:var(--shadow-md);

display:none;

z-index:9999;

}

.cookie-banner button{

margin-top:12px;

}


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

.site-footer{

margin-top:60px;

padding:50px 20px;

background:#111827;

color:#d1d5db;

text-align:center;

}

.footer-menu{

margin-bottom:18px;

}

.footer-menu a{

color:#d1d5db;

margin:0 12px;

font-size:14px;

}

.footer-menu a:hover{
color:white;
}

.copyright{

font-size:13px;

opacity:0.7;

}


/* =========================================================
   HYPE POPUP
========================================================= */

.hype-banner{

position:fixed;

left:50%;
bottom:20px;

transform:translateX(-50%);

width:92%;
max-width:440px;

padding:18px;

border-radius:22px;

background:#111827;

color:white;

box-shadow:0 20px 50px rgba(0,0,0,0.35);

z-index:99999;

animation:hypeFade 0.4s ease;

}

.hype-content strong{

display:block;

font-size:18px;

margin-bottom:8px;

}

.hype-content p{

font-size:14px;

opacity:0.9;

margin-bottom:12px;

}

.hype-buttons{

display:flex;

gap:10px;

margin-top:15px;

}

.hype-btn{
flex:1;
}

.hype-btn.secondary{

background:#1f2937;

border:1px solid #374151;

}

.hype-countdown{

margin-top:10px;

font-size:13px;

font-weight:700;

color:#34d399;

}

.hype-close{

position:absolute;

top:10px;
right:14px;

cursor:pointer;

font-size:18px;

opacity:0.7;

}


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

@keyframes hypeFade{

from{
opacity:0;
transform:translate(-50%,20px);
}

to{
opacity:1;
transform:translate(-50%,0);
}

}


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

@media(max-width:768px){

main{

margin:20px;

padding:22px;

border-radius:20px;

}

.hero{

padding:40px 25px;

}

.hero h1{
font-size:32px;
}

.article-header h1{
font-size:32px;
}

.article-content h2{
font-size:26px;
}

.main-nav{

position:absolute;

top:90px;
left:0;
right:0;

background:white;

display:none;

padding:20px;

border-bottom:1px solid var(--border);

}

.main-nav.open{
display:block;
}

.main-nav ul{

flex-direction:column;

align-items:flex-start;

gap:18px;

}

.hamburger{
display:flex;
}

.offer-grid{
grid-template-columns:1fr;
}

.hype-buttons{
flex-direction:column;
}

}




/* =========================================================
   COOKIE BANNER FULL WIDTH
========================================================= */

.cookie-banner{

position:fixed;

/*
left: auto;
right:auto;
*/
bottom:0;

width:100%;

background:
rgba(17,24,39,0.96);

backdrop-filter:blur(12px);

color:white;

padding:18px 22px;

z-index:999999;

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

box-shadow:
0 -10px 40px rgba(0,0,0,0.25);

display:none;

animation:cookieFade 0.4s ease;

}

.cookie-content{

max-width:1200px;

margin:auto;

display:flex;

align-items:center;
justify-content:space-between;

gap:20px;

}

.cookie-text strong{

display:block;

font-size:16px;

margin-bottom:6px;

}

.cookie-text p{

font-size:14px;

line-height:1.6;

color:rgba(255,255,255,0.88);

}

.cookie-links{

margin-top:8px;

}

.cookie-links a{

color:#60a5fa;

font-weight:600;

text-decoration:none;

}

.cookie-links a:hover{
text-decoration:underline;
}

.cookie-actions{

display:flex;

align-items:center;

}

.cookie-btn{

padding:13px 24px;

border:none;

border-radius:14px;

background:
linear-gradient(
135deg,
#2563eb,
#7c3aed
);

color:white;

font-weight:700;

font-size:14px;

cursor:pointer;

transition:0.25s;

white-space:nowrap;

}

.cookie-btn:hover{

transform:translateY(-2px);

filter:brightness(1.05);

}


/* =========================================================
   COOKIE MOBILE
========================================================= */

@media(max-width:768px){

.cookie-content{

flex-direction:column;

align-items:flex-start;

}

.cookie-actions{

width:100%;

}

.cookie-btn{

width:100%;

}

}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes cookieFade{

from{
opacity:0;
transform:translateY(20px);
}

to{
opacity:1;
transform:translateY(0);
}

}