/*
Theme Name: TelcoBee Executive Edition
Theme URI: https://talcobee.fr
Author: TelcoBee
Description: Ultra-premium, tech-forward WordPress theme for TelcoBee (Telecommunications & IT Engineering). Dark luxury + subtle motion, protocol-level positioning, bilingual FR/EN, Polylang-compatible.
Version: 4.0.2
License: GPL-2.0-or-later
Text Domain: telcobee
*/

/* =========================
   Design System
   ========================= */
:root{
  --bg0:#070A14;
  --bg1:#0A0F22;
  --bg2:#0B1228;

  --text:#F2F5FF;
  --muted:rgba(242,245,255,.72);
  --muted2:rgba(242,245,255,.58);
  --line:rgba(242,245,255,.12);

  --surface:rgba(255,255,255,.06);
  --surface2:rgba(255,255,255,.10);

  --accent:#7CB7FF;      /* blue */
  --accent2:#8B5CFF;     /* violet */
  --accent3:#22D3EE;     /* cyan */
  --glow: rgba(124,183,255,.14);

  --radius:22px;
  --shadow: 0 22px 70px rgba(0,0,0,.55);
  --shadow2: 0 12px 38px rgba(0,0,0,.42);
  --max:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 560px at 18% -10%, rgba(124,183,255,.18), transparent 62%),
    radial-gradient(760px 520px at 90% 6%, rgba(139,92,255,.14), transparent 62%),
    radial-gradient(820px 560px at 65% 112%, rgba(34,211,238,.10), transparent 58%),
    linear-gradient(180deg, var(--bg0), var(--bg2));
  line-height:1.62;
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.94}
img{max-width:100%; height:auto}

.container{max-width:var(--max); margin:0 auto; padding:0 22px}
.section{padding:112px 0; position:relative}
.section.soft{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}
@media(max-width:980px){ .section{padding:86px 0} }

.eyebrow{
  display:inline-flex; gap:10px; align-items:center;
  color:var(--muted2);
  font-weight:900;
  letter-spacing:2.2px;
  text-transform:uppercase;
  font-size:12px;
}
.eyebrow::before{
  content:"";
  width:14px; height:2px;
  background: linear-gradient(90deg, var(--accent3), var(--accent), var(--accent2));
  border-radius:999px;
  opacity:.9;
}

.h1{
  font-size:58px;
  line-height:1.02;
  margin:14px 0 14px;
  font-weight:950;
  letter-spacing:-1.35px;
}
.h2{
  font-size:38px;
  line-height:1.12;
  margin:0 0 14px;
  font-weight:950;
  letter-spacing:-.55px;
}
.p{font-size:18px; color:var(--muted); margin:0 0 18px}
.small{font-size:14px; color:var(--muted2)}

@media(max-width:980px){
  .h1{font-size:42px}
  .h2{font-size:30px}
  .p{font-size:17px}
}

/* Layout */
.grid{display:grid; gap:18px}
.grid.cols-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.grid.cols-2{grid-template-columns:repeat(2, minmax(0,1fr))}
@media(max-width:980px){ .grid.cols-3,.grid.cols-2{grid-template-columns:1fr} }

/* =========================
   Header
   ========================= */
.site-header{
  position:sticky; top:0; z-index:60;
  background: rgba(7,10,20,.55);
  border-bottom:1px solid rgba(242,245,255,.10);
  backdrop-filter: blur(16px) saturate(120%);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; min-height:78px}

.brand{display:flex; align-items:center; gap:12px}
.brand img{
  width:auto;
  height:19px;            /* premium size */
  max-height:19px;
  object-fit:contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.55));
}
.brand .title{display:flex; flex-direction:column; line-height:1.12}
.brand .name{font-weight:950; letter-spacing:.01em}
.brand .tag{
  font-size:12px;
  color:var(--muted2);
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase
}

.nav{display:flex; align-items:center; gap:16px; position:relative}
.nav ul{list-style:none; margin:0; padding:0; display:flex; gap:16px; align-items:center}
.nav a{font-weight:900; font-size:14px; color:rgba(242,245,255,.92)}
.nav a:hover{color:#fff}

.burger{display:none; background:transparent; border:0; padding:10px; cursor:pointer}
.burger span{display:block; width:24px; height:2px; background:rgba(242,245,255,.92); margin:5px 0}
@media(max-width:980px){
  .nav ul{display:none}
  .burger{display:block}
  .nav.open ul{
    display:flex; position:absolute; left:0; right:0; top:78px;
    background: rgba(7,10,20,.92);
    border-bottom:1px solid rgba(242,245,255,.12);
    padding:14px 20px;
    flex-direction:column; align-items:flex-start; gap:12px;
    box-shadow: 0 30px 70px rgba(0,0,0,.55);
  }
}

/* =========================
   Buttons
   ========================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  font-weight:950;
  border:1px solid rgba(242,245,255,.14);
  background: linear-gradient(90deg, rgba(124,183,255,.24), rgba(139,92,255,.20));
  color:#fff;
  box-shadow: var(--shadow2);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.btn:hover{transform: translateY(-2px); box-shadow: 0 22px 54px rgba(0,0,0,.52)}
.btn.secondary{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(242,245,255,.14);
  color:rgba(242,245,255,.94);
  box-shadow:none;
}
.btn.secondary:hover{background: rgba(255,255,255,.10); transform: translateY(-2px)}

/* =========================
   Hero
   ========================= */
.hero{padding:102px 0 66px; position:relative}
.hero .wrap{
  display:grid; gap:18px;
  grid-template-columns: 1.25fr .75fr;
  align-items:stretch;
}
@media(max-width:980px){
  .hero{padding:80px 0 54px}
  .hero .wrap{grid-template-columns:1fr}
}

.panel{
  border:1px solid rgba(242,245,255,.14);
  border-radius: calc(var(--radius) + 6px);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: var(--shadow);
  padding:32px;
  position:relative;
  overflow:hidden;
  transform: translateZ(0);
}
.panel::after{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(700px 280px at 18% 0%, rgba(34,211,238,.16), transparent 62%),
    radial-gradient(640px 280px at 82% 10%, rgba(124,183,255,.16), transparent 62%),
    radial-gradient(620px 260px at 60% 105%, rgba(139,92,255,.12), transparent 64%);
  pointer-events:none;
}
.panel > *{position:relative; z-index:1}

.kpi{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px}
.pill{
  border:1px solid rgba(242,245,255,.14);
  background: rgba(255,255,255,.06);
  padding:10px 12px;
  border-radius:999px;
  font-size:14px;
  font-weight:900;
  color:rgba(242,245,255,.92);
}

.meta{margin-top:18px; display:flex; gap:18px; flex-wrap:wrap; color:var(--muted); font-size:14px}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}

/* =========================
   Cards / Premium accents
   ========================= */
.card{
  border-radius: var(--radius);
  background: rgba(255,255,255,.055);
  border:1px solid rgba(242,245,255,.14);
  box-shadow: var(--shadow2);
  padding:24px;
  transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute; left:0; top:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--accent3), var(--accent), var(--accent2));
  opacity:.92;
}
.card:hover{
  transform: translateY(-10px);
  background: rgba(255,255,255,.085);
  box-shadow: 0 26px 66px rgba(0,0,0,.55);
}
.card h3{margin:0 0 10px; font-size:18px; font-weight:950}
.card ul{margin:0; padding-left:18px; color:var(--muted)}
.card li{margin:6px 0}

.badge{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:950; font-size:12px;
  color:rgba(242,245,255,.92);
  border:1px solid rgba(242,245,255,.14);
  background: rgba(255,255,255,.06);
  padding:8px 10px; border-radius:999px;
}

/* Subtle wave glow between sections */
.wave{
  position:absolute; left:-10%; right:-10%; bottom:-1px; height:130px;
  opacity:.22;
  background:
    radial-gradient(60% 130px at 50% 130px, rgba(124,183,255,.55), transparent 70%),
    radial-gradient(60% 130px at 30% 130px, rgba(34,211,238,.45), transparent 70%),
    radial-gradient(60% 130px at 70% 130px, rgba(139,92,255,.42), transparent 70%);
  filter: blur(18px);
  pointer-events:none;
}

/* =========================
   Footer
   ========================= */
.footer{
  border-top:1px solid rgba(242,245,255,.12);
  padding:44px 0;
  background: rgba(7,10,20,.58);
}
.footer .cols{
  display:grid; gap:18px;
  grid-template-columns: 1.4fr 1fr 1fr;
}
.footer a{color:rgba(242,245,255,.72); font-weight:900}
.footer a:hover{color:#fff}
.footer .cols h4{margin:0 0 10px; font-size:14px; color:rgba(242,245,255,.90)}
@media(max-width:980px){ .footer .cols{grid-template-columns:1fr} }

/* WordPress content styling */
.entry-content{max-width:920px}
.entry-content a{border-bottom:1px solid rgba(242,245,255,.28)}
.entry-content a:hover{border-bottom-color:rgba(242,245,255,.55)}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto}
  .card,.btn{transition:none}
  .card:hover,.btn:hover{transform:none}
}