/* =========================================================
   Affiox Ultra — Layout Spine (ULTRA PREMIUM FINAL)
   ========================================================= */

/* ---------- ROOT ---------- */
:root{
  --affiox-max: 1680px;
  --affiox-pad: 48px;

  --affiox-bg: #f6f7fb;
  --affiox-surface: #ffffff;
  --affiox-text: #0b0f19;
  --affiox-muted: rgba(11,15,25,.65);
  --affiox-border: rgba(11,15,25,.10);

  --affiox-accent: #2563eb;

  --affiox-radius: 18px;
  --affiox-shadow: 0 10px 40px rgba(0,0,0,.06);
}

/* ---------- DARK ---------- */
html[data-affiox-mode="dark"]{
  --affiox-bg:#0b1020;
  --affiox-surface:#0f172a;
  --affiox-text:#e6e8ef;
  --affiox-muted:rgba(230,232,239,.7);
  --affiox-border:rgba(230,232,239,.12);
  --affiox-accent:#60a5fa;
}

/* ---------- ULTRA ---------- */
html[data-affiox-mode="ultra"]{
  --affiox-bg:#080a1a;
  --affiox-surface:#0d1024;
  --affiox-text:#f4f6ff;
  --affiox-muted:rgba(244,246,255,.65);
  --affiox-border:rgba(244,246,255,.14);
  --affiox-accent:#7c6cff;
}

/* ---------- BASE ---------- */
*{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--affiox-bg);
  color:var(--affiox-text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto;
}

/* ---------- CONTAINERS ---------- */
.affiox-wide{
  max-width:var(--affiox-max);
  margin:0 auto;
  padding:0 var(--affiox-pad);
}

/* =========================================================
   HEADER — THICK / PREMIUM / APPLE STYLE
   ========================================================= */
.affiox-header{
  position:sticky;
  top:0;
  z-index:100;
  background:color-mix(in oklab, var(--affiox-bg) 85%, transparent);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--affiox-border);
}

.affiox-header-inner{
  height:96px; /* 🔥 THICK HEADER */
  display:flex;
  align-items:center;
  gap:48px;
}

/* Brand */
.affiox-brand-link{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:22px;
  font-weight:800;
}

/* Navigation */
.affiox-menu{
  list-style:none;
  display:flex;
  gap:42px;
  margin:0;
  padding:0;
}

.affiox-menu a{
  font-size:19px;        /* 🔥 BIG TEXT */
  font-weight:700;
  letter-spacing:.3px;
  padding:20px 6px;
  color:var(--affiox-text);
}

.affiox-menu a:hover{
  color:var(--affiox-accent);
}

/* Mode Button */
#affiox-mode-toggle{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--affiox-border);
  background:var(--affiox-surface);
  cursor:pointer;
}

/* =========================================================
   MAIN CONTENT — FULL SCREEN FEEL
   ========================================================= */
.affiox-main{
  padding:80px 0 120px;
}

/* World / Blog content full width */
.affiox-main .affiox-wide{
  max-width:100%;
  padding-left:clamp(32px,5vw,96px);
  padding-right:clamp(32px,5vw,96px);
}

/* Cards */
.affiox-card{
  background:var(--affiox-surface);
  border:1px solid var(--affiox-border);
  border-radius:18px;
  box-shadow:var(--affiox-shadow);
}

/* =========================================================
   FOOTER — FULL WIDTH
   ========================================================= */
.affiox-footer{
  padding:64px 0;
  border-top:1px solid var(--affiox-border);
}

.affiox-footer .affiox-wide{
  max-width:100%;
  padding-left:clamp(32px,5vw,96px);
  padding-right:clamp(32px,5vw,96px);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .affiox-header-inner{ height:84px; }
  .affiox-menu a{ font-size:17px; }
}

@media (max-width:768px){
  .affiox-menu{ display:none; }
  .affiox-main{ padding:56px 0 72px; }
}