:root{
    --primary:#332a99; --black:#111113; --white:#ffffff; --gray-50:#f6f7f8; --gray-100:#eef0f2; --gray-200:#e3e6ea; --gray-400:#9aa1a9; --gray-600:#707782; --shadow:0 10px 25px rgba(0,0,0,.07), 0 2px 8px rgba(0,0,0,.06); --radius:18px; --radius-lg:26px; --maxw:1200px; --header-h:76px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color:var(--black); background:var(--white) }
a{color:inherit; text-decoration:none}
.container{max-width:var(--maxw); margin-inline:auto; padding:0 24px}

/* Header */
header{ position:sticky; top:0; z-index:1000; backdrop-filter:saturate(180%) blur(8px); background:rgba(255,255,255,.8); border-bottom:1px solid var(--gray-200); height:var(--header-h) }
.nav{display:flex; align-items:center; justify-content:space-between; height:var(--header-h)}
.brand{display:flex; align-items:center; gap:14px}
.brand img{height:45px; display:block}
.menu{display:flex; gap:18px; align-items:center}
.menu a{padding:10px 12px; border-radius:12px; font-weight:600; color:#1a1b1e}
.menu a:hover{background:var(--gray-100)}
.menu .btn{padding:10px 16px}
.hamb{display:none; border:1px solid var(--gray-200); background:var(--white); border-radius:12px; width:42px; height:42px; align-items:center; justify-content:center; position:relative; z-index:10001}
.hamb span{display:block; width:20px; height:2px; background:#202127; position:relative}
.hamb span::before,.hamb span::after{content:""; position:absolute; left:0; width:100%; height:2px; background:#202127}
.hamb span::before{top:-6px} .hamb span::after{top:6px}

/* Buttons, badges, cards */
.btn{display:inline-flex; align-items:center; gap:10px; border-radius:1px; border:1px solid transparent; cursor:pointer; transition:.2s ease; font-weight:700; padding:14px 28px}
.btn.primary{background:var(--primary); color:var(--white); box-shadow:0 6px 18px rgba(51,42,153,.28)}
.btn.deskt{background:var(--primary); color:var(--white); box-shadow:0 6px 18px rgba(51,42,153,.28)}
@media (max-width: 767px) {.btn.deskt{display: none;}}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:var(--white); border-color:var(--gray-200)}
.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; font-size:12px; background:var(--gray-100); color:#24262b; border:1px solid var(--gray-200)}
.card{background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius); box-shadow:var(--shadow)}

/* Hero */
section{scroll-margin-top:calc(var(--header-h) + 16px)}
.hero{position:relative; padding:80px 0 70px; overflow:hidden}
.hero .container{position:relative}
.hero h1{font-size:clamp(34px, 5vw, 56px); line-height:1.06; letter-spacing:-.02em; margin:18px 0}
.hero p{font-size:clamp(16px, 2.2vw, 20px); color:#343741; max-width:780px}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px}

/* Abstract background shapes */
.hero-bg{position:absolute; inset:-10% -5% auto -5%; height:480px; filter:blur(8px); pointer-events:none; z-index:-1}
.blob{position:absolute; border-radius:50%; opacity:.55; mix-blend-mode:multiply}
.blob.one{width:650px; height:650px; left:-5%; top:-10%; background:radial-gradient(closest-side, rgba(51,42,153,.75), rgba(51,42,153,.0) 60%)}
.blob.two{width:520px; height:520px; right:6%; top:-8%; background:radial-gradient(closest-side, rgba(0,0,0,.12), rgba(0,0,0,0) 65%)}
.blob.three{width:640px; height:640px; left:30%; top:28%; background:radial-gradient(closest-side, rgba(51,42,153,.35), rgba(51,42,153,0) 60%)}

/* Sections */
.section{padding:48px 0}
.section h2{font-size:clamp(26px,3.2vw,36px); letter-spacing:-.01em; margin:0 0 6px; color:#332a99}
.section p.lead{color:#343741; max-width:780px; margin:10px 0 26px}

/* Why */
.grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.feature{padding:22px}
.feature h3{margin:2px 0 8px; font-size:18px}
.feature p{color:#2b2f37}

/* Contact */
.contact-wrap{display:grid; grid-template-columns:1.2fr .8fr; gap:18px}
form.contact{padding:22px}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.field input,.field textarea, .field select{border:1px solid var(--gray-200); border-radius:12px; padding:12px 14px; font:inherit; resize:vertical}
.field small{color:var(--gray-600)}
.contact-aside{padding:22px}

footer{border-top:1px solid var(--gray-200); padding:28px 0; color:#2b2f37}

.muted{color:var(--gray-600)}
.accent{color:var(--primary)}

/* Map */
#map.section{background:var(--white); border-top:1px solid var(--gray-200); border-bottom:1px solid var(--gray-200)}
.map-grid{display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:28px; min-height:590px}
.map-text ul{margin:0 0 16px 18px}
.map-text li{margin-bottom:8px}
.map-media{display:flex; justify-content:center}
.map-media img{max-width:100%; height:auto; width:100%; object-fit:contain}

/* For publishers: redesigned stacked cards */
.fp-intro{max-width:900px}
#forpublishers .container{max-width:var(--maxw); margin-inline:auto; padding:0 24px}
#forpublishers .fp-stack{display:flex; flex-direction:column; gap:18px}
#forpublishers .fp-item{position:relative; padding:22px; border-radius:18px; border:1px solid var(--gray-200); box-shadow:var(--shadow); background:linear-gradient(180deg, rgba(105,128,198,.12), #fff)}
#forpublishers .fp-item::before{content:""; position:absolute; inset:0 auto 0 0; width:6px; border-radius:18px 0 0 18px; background:linear-gradient(180deg, rgba(51,42,153,.45), rgba(51,42,153,.10))}
#forpublishers .fp-head{display:flex; align-items:flex-start; gap:12px; margin-bottom:8px}
#forpublishers .fp-icon{flex:0 0 42px; height:42px; display:grid; place-items:center; border-radius:12px; background:rgba(51,42,153,.10); color:var(--primary); transition:transform .18s ease, box-shadow .18s ease}
#forpublishers .fp-item:hover .fp-icon{transform:translateY(-2px); box-shadow:0 8px 20px rgba(51,42,153,.18)}
#forpublishers h3{margin:0 0 2px; font-size:clamp(20px,2.2vw,24px); letter-spacing:-.01em}
#forpublishers .fp-sub{margin:0; color:#818388; font-weight:500}
#forpublishers .fp-body p{margin:10px 0}
#forpublishers .fp-list{list-style:none; padding:0; margin:12px 0 0}
#forpublishers .fp-list li{position:relative; padding-left:18px; margin:8px 0; line-height:1.5}
#forpublishers .fp-list li::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--primary); position:absolute; left:0; top:.7em; transform:translateY(-50%); box-shadow:0 0 0 2px rgba(51,42,153,.10)}

/* Advertisers CTA centering */
.fa-wrap{max-width:900px; margin:0 auto; text-align:center}
#foradvertisers .btn.fa-btn{display:inline-block; margin:12px auto 0; font-size:1.0em; padding:8px 20px; border-radius:0 !important; background:#332a99 !important}
.fa-footnote{opacity:.6; font-size:.95em; padding-top: 45px; padding-bottom: 0;}
#foradvertisers .fp-item{
    position:relative; padding:22px; border-radius:18px;
    border:1px solid var(--gray-200); box-shadow:var(--shadow);
    background:linear-gradient(180deg, rgba(105,128,198,.12), #fff);}
#foradvertisers .fp-item::before{
    content:""; position:absolute; inset:0 auto 0 0; width:6px;
    border-radius:18px 0 0 18px;
    background:linear-gradient(180deg, rgba(51,42,153,.45), rgba(51,42,153,.10));}
#foradvertisers .fp-head{display:flex; align-items:flex-start; gap:12px; margin-bottom:8px}
#foradvertisers .fp-icon{
    flex:0 0 42px; height:42px; display:grid; place-items:center;
    border-radius:12px; background:rgba(51,42,153,.10); color:var(--primary);
    transition:transform .18s ease, box-shadow .18s ease;}
#foradvertisers .fp-item:hover .fp-icon{transform:translateY(-2px); box-shadow:0 8px 20px rgba(51,42,153,.18)}
#foradvertisers h3{margin:0 0 2px; font-size:clamp(20px,2.2vw,24px); letter-spacing:-.01em}
#foradvertisers .fp-sub{margin:0; color:#818388; font-weight:500}
#foradvertisers .fp-body p{margin:10px 0}


/* „ForAdvertisers Button CSS Shape */
#foradvertisers .fp-icon{ position: relative; }
#foradvertisers .ads-glyph{
    display:grid; place-items:center;
    width:30px; height:18px;          /* middleSpace for ADS text */
    border:2px solid currentColor;
    border-radius:4px;
    font:800 9px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
    letter-spacing:.4px;
    user-select:none;
    transform: translateZ(0);          /* smoothness */}
#foradvertisers .fp-item:hover .ads-glyph{
    transform: translateY(-1px);       /* microHover */}



/* Partners marquee */
.marquee{overflow:hidden}
.marquee__track{display:flex; gap:10px; width:max-content; will-change:transform; animation:marquee 28s linear infinite}
.marquee__row{display:flex; gap:10px}
.tag{padding:8px 12px; border:1px solid var(--gray-200); border-radius:999px; background:var(--white)}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion: reduce){ .marquee__track{animation:none} }
.marquee:hover .marquee__track{animation-play-state:paused}

/* Our footprint bullets */
#map .map-text ul{list-style:none; padding:30px; margin:18px 0 16px}
#map .map-text li{position:relative; padding-left:18px; margin:10px 0; line-height:1.5}
#map .map-text li::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--primary); position:absolute; left:0; top:.7em; transform:translateY(-50%); box-shadow:0 0 0 2px rgba(51,42,153,.10)}
#map .map-text p{margin-top:14px}

/* Tablet & down: stack contact form ABOVE headquarters */
@media (max-width:1000px){
    .contact-wrap{ grid-template-columns:1fr; }
}

/* Mobile menu fixes */
@media (max-width:720px){
    .menu{ display:none !important; pointer-events:none !important; }
    .menu.open{
        display:flex !important; pointer-events:auto !important;
        position:fixed; top:calc(var(--header-h) + 6px); left:16px; right:16px;
        padding:12px; flex-direction:column; background:var(--white);
        border:1px solid var(--gray-200); border-radius:16px; box-shadow:var(--shadow);
        z-index:10000;
    }
    .hamb{ display:inline-flex; }
    .grid-3{grid-template-columns:1fr}
    .hero{padding:66px 0 56px}
    .map-grid{grid-template-columns:1fr}
}