/* v6 (11.10 night): the LIVE site plus surgical additions. Only what the live CSS does not have yet. Same tokens
   (--cyan, --purple, --text-m), same fonts (Space Grotesk, Inter), same card language (x-card, x-do-i, x-mod). */

/* ---- the infrastructure globe: city names off (the server list on the live page is not confirmed by the registry) */
.x-gl-lab, .x-infra-l{ display:none !important; }

/* ---- five model orbs: associations, not brands. orange · white with a black centre · Google colours ·
        black with a white centre · sky blue with a white centre */
.x-mdl .m-c{ --f:url(#mC); --m:#f0916b; --mg:rgba(232,131,95,.85); }
.x-mdl .m-o{ --f:#f4f6f8; --m:#e6e9ee; --mg:rgba(255,255,255,.7); }
.x-mdl .m-g{ --f:url(#mG); --m:#8ab4ff; --mg:rgba(111,155,255,.8); }
.x-mdl .m-v{ --f:#0b0b0d; --m:#cfd3da; --mg:rgba(220,224,230,.7); }
.x-mdl .m-d{ --f:#7dd3fc; --m:#7dd3fc; --mg:rgba(125,211,252,.85); }
.x-mdl-n circle{ fill:var(--f) !important; stroke:rgba(255,255,255,.35) !important; stroke-width:1.2 !important; opacity:.62; transition:opacity .35s, transform .35s;
  transform-box:fill-box; transform-origin:center; }
.x-mdl-n circle.m-v{ stroke:rgba(255,255,255,.65) !important; }
.x-mdl-n circle.on{ opacity:1; transform:scale(1.25); }
.x-mdl-dots{ pointer-events:none; }
.x-mdl-dots .dt-o{ fill:#0b0b0d; } .x-mdl-dots .dt-v, .x-mdl-dots .dt-d{ fill:#fff; }
body.light .x-mdl-n circle{ stroke:#94a3b8 !important; opacity:.85; }
body.light .x-mdl-n circle.on{ opacity:1; }

/* ---- pyramid: level labels readable */
.x-pyr-l span{ color:rgba(226,234,246,.78); font-size:.9rem; }
body.light .x-pyr-l span{ color:rgba(15,23,42,.72); }

/* ---- Mai: two plans as two cards under the three products */
.v6-mai{ margin-top:2.6rem; }
.v6-mai-h{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1rem; margin-bottom:1rem; }
.v6-mai-h h3{ font:700 clamp(1.25rem,2.2vw,1.6rem)/1.2 'Space Grotesk',sans-serif; letter-spacing:-.01em; color:#fff; margin:0; }
.v6-mai-h h3 em{ font-style:normal; background:linear-gradient(90deg,var(--cyan),var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent; }
body.light .v6-mai-h h3{ color:#0f172a; }
.v6-gift{ display:block; margin-top:.7rem; font-size:.8rem; color:#5cf2b8; }
.v6-gift[hidden]{ display:none; }
body.light .v6-gift{ color:#047857; }

/* ---- three steps: the line runs from number to number and stops at the last one (his word 11.10) */
.v6-steps{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin:2.2rem 0 0; padding:0; list-style:none; }
.v6-step{ position:relative; text-align:center; }
.v6-step:not(:last-child)::after{ content:''; position:absolute; top:27px; left:calc(50% + 34px); width:calc(100% + 1.6rem - 68px); height:2px;
  background:linear-gradient(90deg, rgba(0,212,255,.75), rgba(139,92,246,.75)); border-radius:2px; }
.v6-num{ position:relative; z-index:1; display:grid; place-items:center; width:56px; height:56px; margin:0 auto 1.1rem; border-radius:50%;
  background:#0b1430; border:2px solid rgba(0,212,255,.65); box-shadow:0 0 22px rgba(0,212,255,.3); font:700 1.25rem 'Space Grotesk',sans-serif; color:#fff; }
.v6-step:last-child .v6-num{ border-color:rgba(139,92,246,.8); box-shadow:0 0 22px rgba(139,92,246,.35); }
.v6-step h3{ font:700 1.18rem 'Space Grotesk',sans-serif; color:#fff; margin:0 0 .35rem; }
.v6-step p{ margin:0 auto; max-width:30ch; font-size:.93rem; line-height:1.5; color:var(--text-m); }
.v6-tag{ display:inline-block; margin:.1rem 0 .55rem; padding:.18rem .6rem; border-radius:999px; font:700 .68rem 'Inter',sans-serif; letter-spacing:.12em; text-transform:uppercase;
  color:#5cf2b8; background:rgba(52,211,153,.1); box-shadow:inset 0 0 0 1px rgba(52,211,153,.35); }
.v6-tag.pay{ color:#c4a5ff; background:rgba(139,92,246,.12); box-shadow:inset 0 0 0 1px rgba(139,92,246,.4); }
body.light .v6-num{ background:#fff; color:#0f172a; }
body.light .v6-step h3{ color:#0f172a; }
body.light .v6-tag{ color:#047857; } body.light .v6-tag.pay{ color:#6d28d9; }
.v6-cta{ display:flex; justify-content:center; margin-top:2.2rem; }
@media (max-width:760px){
  .v6-steps{ grid-template-columns:1fr; gap:1.4rem; }
  .v6-step{ text-align:left; padding-left:76px; min-height:56px; }
  .v6-num{ position:absolute; left:0; top:0; margin:0; }
  .v6-step:not(:last-child)::after{ top:60px; left:27px; width:2px; height:calc(100% - 64px + 1.4rem); background:linear-gradient(180deg, rgba(0,212,255,.75), rgba(139,92,246,.75)); }
  .v6-step p{ margin:0; }
}

/* ---- interactive: tasks pick the strongest model (B, C) */
.v6-mtasks{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.2rem 0 1rem; }
.v6-mtasks button{ font:600 .8rem 'Inter',sans-serif; color:var(--text-m); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:999px; padding:.38rem .8rem; cursor:pointer; transition:color .25s, border-color .25s, background .25s; }
.v6-mtasks button:hover, .v6-mtasks button.on{ color:#fff; border-color:rgba(0,212,255,.6); background:rgba(0,212,255,.12); }
body.light .v6-mtasks button{ background:#fff; border-color:rgba(15,23,42,.14); color:#334155; }
body.light .v6-mtasks button.on, body.light .v6-mtasks button:hover{ color:#0369a1; border-color:#0891b2; background:#ecfeff; }

/* ---- interactive pyramid (B, C): a level lights up and says what it does */
.v6-pyr .x-pyr-row{ cursor:pointer; border-radius:14px; outline:none; transition:background .3s; }
.v6-pyr .x-pyr-row:hover, .v6-pyr .x-pyr-row.on{ background:rgba(0,212,255,.06); }
.v6-pyr .x-pyr-row.on .x-pyr-l b{ color:#4fe3ff; }
.v6-pyr .x-pyr-row.on .x-pyr-v i{ transform:scale(1.18); }
body.light .v6-pyr .x-pyr-row.on .x-pyr-l b{ color:#0369a1; }
.v6-tip{ margin:.6rem 0 0; min-height:1.5em; text-align:center; font-size:.95rem; color:#fff; transition:opacity .3s; }
.v6-tip.dim{ color:var(--text-m); font-size:.85rem; }
body.light .v6-tip{ color:#0f172a; } body.light .v6-tip.dim{ color:#64748b; }

/* ---- B: the 3D company as a quiet background of the first screen only (paused when off screen) */
.v6-3d{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.72;
  -webkit-mask-image:radial-gradient(ellipse 50% 56% at 50% 44%, rgba(0,0,0,.22) 0, rgba(0,0,0,.45) 50%, #000 90%);
          mask-image:radial-gradient(ellipse 50% 56% at 50% 44%, rgba(0,0,0,.22) 0, rgba(0,0,0,.45) 50%, #000 90%); }
.v6-3d canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity 1.8s ease; }
.v6-3d canvas.is-live{ opacity:1; }
body.light .v6-3d{ opacity:.5; }
.x-hero .hero-content{ position:relative; z-index:1; }
@media (max-width:760px){ .v6-3d{ opacity:.3; -webkit-mask-image:linear-gradient(180deg,#000 0,transparent 30%,transparent 70%,#000 100%); mask-image:linear-gradient(180deg,#000 0,transparent 30%,transparent 70%,#000 100%); } }

/* ---- C: the selling line takes the place of the welcome word */
.v6-c-h1{ margin:.4rem 0 0; }
.v6-c-eye{ margin-top:1.2rem; }

/* ---- constructor page */
.v6-rg{ display:flex; align-items:center; gap:.6rem; margin:2.2rem 0 .9rem; font:700 .74rem 'Inter',sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--c); }
.v6-rg i{ width:8px; height:8px; border-radius:50%; background:var(--c); box-shadow:0 0 10px var(--c); }
.v6-rg small{ font-size:.7rem; padding:.05rem .45rem; border-radius:999px; border:1px solid var(--c); opacity:.85; letter-spacing:0; }
.v6-role{ cursor:pointer; text-align:left; width:100%; font:inherit; color:inherit; transition:transform .25s, box-shadow .25s, border-color .25s, background .25s; }
.v6-role .v6-val{ display:flex; align-items:center; gap:.35rem; margin-top:.45rem; font-size:.78rem; font-weight:600; color:#5cf2b8; }
.v6-role .v6-val::before{ content:'✓'; font-weight:800; }
body.light .v6-role .v6-val{ color:#047857; }
.v6-role .v6-pick{ position:absolute; top:.8rem; right:.8rem; width:22px; height:22px; border-radius:50%; border:1.5px solid rgba(255,255,255,.25);
  display:grid; place-items:center; font-size:.8rem; color:transparent; transition:all .25s; }
.v6-role.on{ box-shadow:inset 0 0 0 1.5px var(--m), 0 0 24px -6px var(--m); }
.v6-role.on .v6-pick{ background:var(--m); border-color:var(--m); color:#04060d; }
body.light .v6-role .v6-pick{ border-color:rgba(15,23,42,.25); }
.v6-role{ position:relative; }
.v6-own{ border-style:dashed !important; }
.v6-own .x-ic{ animation:v6pulse 2.4s ease-in-out infinite; }
@keyframes v6pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(236,72,153,.0); } 50%{ box-shadow:0 0 0 8px rgba(236,72,153,.18); } }
.v6-bar{ position:sticky; bottom:14px; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:1.6rem auto 0; max-width:720px;
  padding:.7rem .7rem .7rem 1.2rem; border-radius:18px; background:rgba(10,16,34,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 18px 40px -16px rgba(0,0,0,.6); }
.v6-bar b{ font:700 1.3rem 'Space Grotesk',sans-serif; color:#fff; margin-right:.35rem; }
.v6-bar span{ color:var(--text-m); font-size:.9rem; }
.v6-bar .x-btn{ white-space:nowrap; }
.v6-bar .x-btn.off{ opacity:.5; pointer-events:none; }
body.light .v6-bar{ background:rgba(255,255,255,.9); box-shadow:inset 0 0 0 1px rgba(15,23,42,.1), 0 18px 40px -16px rgba(15,23,42,.25); }
body.light .v6-bar b{ color:#0f172a; }
@media (max-width:560px){ .v6-bar{ padding:.6rem .6rem .6rem .9rem; } .v6-bar span{ font-size:.8rem; } .v6-bar .x-btn{ font-size:.82rem; padding:.6rem .8rem; } }
.v6-more{ display:flex; align-items:center; gap:1.4rem; margin-top:2.4rem; padding:1.6rem 1.8rem; border-radius:24px;
  background:linear-gradient(135deg, rgba(236,72,153,.1), rgba(139,92,246,.1) 50%, rgba(0,212,255,.08)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.v6-more h3{ font:700 1.35rem 'Space Grotesk',sans-serif; color:#fff; margin:0 0 .3rem; }
.v6-more h3 em{ font-style:normal; background:linear-gradient(90deg,var(--cyan),var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.v6-more p{ margin:0; color:var(--text-m); font-size:.95rem; line-height:1.5; }
.v6-more .x-btn{ flex:none; margin-left:auto; }
body.light .v6-more{ background:linear-gradient(135deg, rgba(236,72,153,.07), rgba(139,92,246,.07) 50%, rgba(0,212,255,.06)); box-shadow:inset 0 0 0 1px rgba(15,23,42,.08); }
body.light .v6-more h3{ color:#0f172a; }
@media (max-width:760px){ .v6-more{ flex-direction:column; align-items:flex-start; } .v6-more .x-btn{ margin-left:0; } }
.v6-ch{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.6rem; }
.v6-ch .x-do-i h3{ margin-bottom:.8rem; }
.v6-chips{ display:flex; flex-wrap:wrap; gap:.45rem; }
.v6-chips span{ padding:.38rem .75rem; border-radius:999px; font-size:.82rem; font-weight:600; color:#dbe7f7; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.v6-chips span:first-child{ color:#4fe3ff; box-shadow:inset 0 0 0 1px rgba(0,212,255,.5); }
body.light .v6-chips span{ color:#334155; background:#fff; box-shadow:inset 0 0 0 1px rgba(15,23,42,.12); }
body.light .v6-chips span:first-child{ color:#0369a1; }
@media (max-width:760px){ .v6-ch{ grid-template-columns:1fr; } }
.v6-cards3{ grid-template-columns:repeat(3,1fr); }
.x-card .v6-best{ position:absolute; top:1rem; right:1rem; padding:.18rem .6rem; border-radius:999px; font:700 .66rem 'Inter',sans-serif; letter-spacing:.1em; text-transform:uppercase;
  color:#04060d; background:linear-gradient(90deg,var(--cyan),var(--purple)); }
.v6-mai .x-cards.x-cards-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:760px){ .v6-mai .x-cards.x-cards-2, .v6-cards3{ grid-template-columns:1fr; } }

/* ---- Mai Pro gift as a promotion block (his word 12.10 day 2) */
.v6-gift{ display:flex; align-items:center; gap:.75rem; margin:1rem 0 .2rem; padding:.75rem .9rem; border-radius:14px; font-size:.84rem; line-height:1.4; color:#e9fff6;
  background:linear-gradient(120deg, rgba(52,211,153,.16), rgba(0,212,255,.10) 55%, rgba(139,92,246,.14)); box-shadow:inset 0 0 0 1px rgba(52,211,153,.4), 0 0 26px -10px rgba(52,211,153,.6); }
.v6-gift[hidden]{ display:none; }
.v6-gift-ic{ flex:none; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:#04060d; background:linear-gradient(135deg,#5cf2b8,#22d3ee); }
.v6-gift-ic svg{ width:19px; height:19px; }
.v6-gift-b{ display:inline-block; margin-right:.45rem; padding:.08rem .45rem; border-radius:6px; font:800 .62rem 'Inter',sans-serif; letter-spacing:.12em; text-transform:uppercase;
  color:#04060d; background:#5cf2b8; vertical-align:1px; }
body.light .v6-gift{ color:#064e3b; background:linear-gradient(120deg, rgba(52,211,153,.14), rgba(0,212,255,.08) 55%, rgba(139,92,246,.1)); box-shadow:inset 0 0 0 1px rgba(5,150,105,.35); }