/* ==========================================================================
   Maxelik, silo « Création de contenus » (classes cn-) : page mère, socle des pages filles
   Hero clair en collage, pour se distinguer du silo SEO aux héros sombres.
   ========================================================================== */

/* ---------- socle éditorial ---------- */
.cn-ek{font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.cn-top{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:end}
.cn-top h2{margin-top:10px}
.cn-def{font-size:1.08rem;line-height:1.75;color:var(--ink-2)}

/* ---------- hero clair ---------- */
.cn-hero{position:relative;overflow:clip;isolation:isolate;padding-block:clamp(24px,4vh,48px) clamp(36px,6vh,72px);background:radial-gradient(55% 80% at 100% 0%,rgba(0,186,255,.16),transparent 70%),radial-gradient(40% 60% at 0% 100%,rgba(0,131,255,.08),transparent 70%),#eef5fc}
.cn-hero-g{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4.5vw,72px);align-items:center}
.cn-k{display:inline-flex;align-items:center;gap:10px;font-size:.86rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.cn-k .ico{width:22px;height:22px}
.cn-hero h1{margin-top:12px;color:var(--slate)}
.cn-lead{margin-top:16px;font-size:1.08rem;line-height:1.65;color:var(--ink-2)}
.cn-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.cn-proofs{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cn-proofs li{padding:8px 14px;border-radius:999px;background:#fff;font-size:.9rem;color:var(--ink-2);box-shadow:0 10px 24px -18px rgba(10,40,80,.45)}
.cn-proofs b{color:var(--slate)}

/* collage : deux photos, une fiche de contenu, un graphique */
.cn-col{position:relative;height:clamp(360px,52vh,450px)}
.cn-col img{position:absolute;display:block;object-fit:cover;border-radius:var(--r);box-shadow:0 40px 70px -40px rgba(10,40,80,.6)}
.cn-col-a{top:0;right:0;width:78%;height:66%}
.cn-col-b{left:0;bottom:0;width:52%;height:46%;object-position:30% 50%}
.cn-col-f{position:absolute;right:4%;bottom:6%;width:min(300px,52%);padding:16px 18px;border-radius:var(--r);background:#fff;box-shadow:0 30px 60px -30px rgba(10,40,80,.55)}
.cn-col-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.92rem;color:var(--slate)}
.cn-col-h span{font-size:.72rem;color:#8a9aa4}
.cn-col-f dl{margin:0;display:grid}
.cn-col-f dl>div{display:grid;gap:1px;padding:7px 0;box-shadow:0 -1px 0 #edf2f6}
.cn-col-f dt{font-size:.68rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.cn-col-f dd{margin:0;font-size:.86rem;font-weight:700;color:var(--slate)}
.cn-col-g{position:absolute;left:6%;top:8%;display:flex;align-items:flex-end;gap:6px;width:150px;height:96px;padding:30px 14px 12px;border-radius:var(--r);background:#0f1a22;box-shadow:0 30px 60px -30px rgba(10,20,30,.7)}
.cn-col-g span{position:absolute;left:14px;top:10px;font-size:.68rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#7fd8ff}
.cn-col-g i{flex:1;height:var(--h);border-radius:3px 3px 0 0;background:var(--grad)}

/* ---------- rôles d’un contenu : cartes animées au survol ---------- */
.cn-ro{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.cn-ro>li{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:10px;padding:18px 18px 26px;border-radius:var(--r);background:var(--soft);overflow:clip;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.cn-ro>li::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(150deg,#0a4a91 0%,#112a40 60%,#0f1a22 100%);opacity:0;transition:opacity .45s var(--ease)}
.cn-ro>li:hover{transform:translateY(-8px);box-shadow:0 40px 70px -40px rgba(10,40,80,.6)}
.cn-ro>li:hover::before{opacity:1}
.cn-ro-n{position:absolute;right:16px;bottom:-14px;z-index:-1;font-size:6.5rem;font-weight:900;line-height:1;letter-spacing:-.05em;color:rgba(0,131,255,.08);transition:color .45s}
.cn-ro>li:hover .cn-ro-n{color:rgba(127,216,255,.1)}
.cn-ro h3{font-size:1.12rem;padding-inline:6px;transition:color .45s}
.cn-ro p{font-size:.94rem;line-height:1.6;padding-inline:6px;color:var(--ink-2);transition:color .45s}
.cn-ro>li:hover h3{color:#fff}
.cn-ro>li:hover p{color:#c8d3d9}
/* scène illustrée en tête de carte */
.cn-ro-v{position:relative;display:grid;align-content:center;gap:8px;height:150px;margin-bottom:8px;padding:16px;border-radius:var(--r);background:#fff;box-shadow:0 20px 40px -32px rgba(10,40,80,.5);overflow:clip;transition:transform .45s var(--ease)}
.cn-ro>li:hover .cn-ro-v{transform:scale(1.03)}
.cn-ro-q{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--soft);font-size:.82rem;font-weight:700;color:var(--slate)}
.cn-ro-q .ico{width:18px;height:18px}
.cn-ro-r{display:grid;gap:5px;padding:8px 10px;border-radius:6px;background:#eef6ff;transform-origin:left;transition:transform .5s var(--ease)}
.cn-ro-r b{font-size:.74rem;font-weight:900;color:var(--blue)}
.cn-ro-r i{display:block;height:5px;border-radius:3px;background:#cfe3f7}
.cn-ro-r i+i{width:70%}
.cn-ro-r.o{background:none;opacity:.6}
.cn-ro>li:hover .cn-ro-r:not(.o){transform:scale(1.05);box-shadow:0 10px 24px -14px rgba(0,131,255,.7)}
.cn-ro-b{max-width:88%;padding:8px 12px;border-radius:14px;font-size:.8rem;line-height:1.4;font-weight:700}
.cn-ro-b.q{justify-self:end;border-bottom-right-radius:4px;background:var(--grad);color:#fff}
.cn-ro-b.a{justify-self:start;border-bottom-left-radius:4px;background:var(--soft);color:var(--slate);opacity:.55;transform:translateY(6px);transition:opacity .45s,transform .45s var(--ease)}
.cn-ro>li:hover .cn-ro-b.a{opacity:1;transform:none}
.cn-ro-ph{padding:0}
.cn-ro-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.cn-ro>li:hover .cn-ro-ph img{transform:scale(1.1)}
.cn-ro-ph span{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:999px;background:rgba(15,26,34,.82);font-size:.74rem;font-weight:800;color:#fff}
.cn-ro-cta{justify-items:center}
.cn-ro-btn{padding:12px 22px;border-radius:var(--r);background:var(--grad);font-size:.88rem;font-weight:900;color:#fff;box-shadow:0 14px 30px -16px rgba(0,131,255,.9);transition:transform .3s .25s}
.cn-ro-cur{position:absolute;left:62%;top:62%;width:26px;height:26px;transition:transform .5s var(--ease)}
.cn-ro-ok{position:absolute;right:12px;top:12px;padding:5px 10px;border-radius:999px;background:#1fae6a;font-size:.72rem;font-weight:900;color:#fff;opacity:0;transform:translateY(-6px);transition:opacity .3s .45s,transform .3s .45s}
.cn-ro>li:hover .cn-ro-cur{transform:translate(-18px,-16px)}
.cn-ro>li:hover .cn-ro-btn{transform:scale(.96)}
.cn-ro>li:hover .cn-ro-ok{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.cn-ro>li,.cn-ro>li *{transition:none!important}}

/* ---------- prestations : sommaire ---------- */
.cn-pr-s{position:relative;overflow:clip;isolation:isolate;background:radial-gradient(60% 80% at 100% 0%,rgba(0,131,255,.24),transparent 70%),#0f1a22}
.cn-pr-s::after,.cn-ia-s::after,.cn-df-s::after{content:"";position:absolute;z-index:-1;width:420px;aspect-ratio:1;background:url("img/maxelik-symbole.svg") no-repeat center/contain;opacity:.05;filter:brightness(3)}
.cn-pr-s::after{left:-110px;bottom:-120px}
.cn-pr-top{margin-bottom:clamp(32px,4vw,52px)}
.cn-pr-s .cn-ek,.cn-ia-s .cn-ek,.cn-df-s .cn-ek{color:#7fd8ff}
.cn-pr-lead{font-size:1.06rem;line-height:1.7;color:#c8d3d9}
.cn-pr{list-style:none;margin:0;padding:0;display:grid}
.cn-pr>li{box-shadow:0 -1px 0 rgba(255,255,255,.1)}
.cn-pr>li:last-child{box-shadow:0 -1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1)}
.cn-pr a{display:grid;grid-template-columns:70px 64px minmax(0,1fr) 52px;align-items:center;gap:clamp(14px,2vw,28px);padding:clamp(22px,2.6vw,32px) clamp(8px,1.4vw,20px);border-radius:var(--r);color:inherit;text-decoration:none;transition:background .3s}
.cn-pr a:hover{background:rgba(255,255,255,.05)}
.cn-pr-n{font-size:2.6rem;font-weight:900;line-height:1;letter-spacing:-.04em;color:rgba(255,255,255,.22);transition:color .3s}
.cn-pr a:hover .cn-pr-n{color:#7fd8ff}
.cn-pr-i{display:grid;place-items:center;width:64px;height:64px;border-radius:var(--r);background:#fff}
.cn-pr-i .ico{width:40px;height:40px}
.cn-pr-t{display:grid;gap:8px}
.cn-pr-t h3{font-size:1.35rem;color:#fff}
.cn-pr-t>span:not(.cn-pr-c){font-size:.98rem;line-height:1.6;color:#b8c5cc}
.cn-pr-c{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.cn-pr-c em{padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.08);font-style:normal;font-size:.78rem;font-weight:700;color:#dbe4e8}
.cn-pr-go{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;transition:background .3s,transform .3s}
.cn-pr-go svg{width:18px;height:18px}
.cn-pr a:hover .cn-pr-go{background:var(--grad);transform:translateX(4px)}

/* ---------- profils ---------- */
.cn-pf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
.cn-pf>li{display:flex;flex-direction:column;gap:10px;padding:clamp(24px,2.6vw,30px);border-radius:var(--r);background:#fff;box-shadow:0 26px 54px -46px rgba(10,40,80,.5)}
.cn-pf-i{display:grid;place-items:center;width:52px;height:52px;margin-bottom:6px;border-radius:50%;background:#eef5fc}
.cn-pf-i .ico{width:30px;height:30px}
.cn-pf-k{font-size:.74rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.cn-pf h3{font-size:1.12rem}
.cn-pf ul{list-style:none;margin:6px 0 0;padding:0;display:grid}
.cn-pf ul li{position:relative;padding:9px 0 9px 22px;font-size:.92rem;color:var(--ink-2);box-shadow:0 -1px 0 #edf2f6}
.cn-pf ul li::before{content:"";position:absolute;left:0;top:17px;width:10px;height:3px;border-radius:2px;background:var(--grad)}

/* ---------- grille de relecture ---------- */
.cn-gr{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:center}
.cn-gr-t{display:grid;gap:16px}
.cn-gr-t>p:not(.cn-ek){font-size:1.04rem;line-height:1.7;color:var(--ink-2)}
.cn-sheet{margin:0;border-radius:var(--r);background:#fff;box-shadow:0 50px 90px -60px rgba(10,40,80,.6),0 0 0 1px rgba(10,40,80,.04);overflow:clip;transform:rotate(-1deg)}
.cn-sheet-h{display:flex;justify-content:space-between;gap:12px;padding:16px 26px;background:var(--slate);font-size:.9rem;font-weight:800;color:#fff}
.cn-sheet-h em{font-style:normal;font-weight:600;font-size:.78rem;color:#9fb0b9}
.cn-sheet ol{list-style:none;margin:0;padding:8px 26px 14px;display:grid;counter-reset:gr}
.cn-sheet li{position:relative;display:grid;gap:3px;padding:14px 0 14px 44px;font-size:.92rem;line-height:1.55;color:var(--ink-2);box-shadow:0 -1px 0 #edf2f6;counter-increment:gr}
.cn-sheet li:first-child{box-shadow:none}
.cn-sheet li b{font-size:1rem;color:var(--slate)}
.cn-sheet li::before{content:"";position:absolute;left:0;top:16px;width:26px;height:26px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat,#1fae6a}

/* ---------- contenus et IA ---------- */
.cn-ia-s{position:relative;overflow:clip;isolation:isolate;background:radial-gradient(60% 80% at 0% 100%,rgba(0,131,255,.22),transparent 70%),#0f1a22}
.cn-ia-s::after{right:-100px;top:-110px}
.cn-ia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.cn-ia-t{display:grid;gap:16px;justify-items:start}
.cn-ia-t>p:not(.cn-ek){font-size:1.04rem;line-height:1.7;color:#c8d3d9}
.cn-ia-a{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:#7fd8ff;text-decoration:none}
.cn-ia-a svg{width:16px;height:16px}
.cn-ia-l{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:ia}
.cn-ia-l li{position:relative;display:grid;gap:4px;padding:20px 22px 20px 70px;border-radius:var(--r);background:rgba(255,255,255,.05);font-size:.94rem;line-height:1.6;color:#b8c5cc;counter-increment:ia}
.cn-ia-l li::before{content:counter(ia);position:absolute;left:22px;top:20px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--grad);font-size:.9rem;font-weight:900;color:#fff}
.cn-ia-l b{font-size:1.04rem;color:#fff}

/* ---------- méthode ---------- */
.cn-me{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
.cn-me li{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px 22px 24px;border-radius:var(--r);background:#fff;box-shadow:0 26px 54px -46px rgba(10,40,80,.5)}
.cn-me span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--grad);font-size:1rem;font-weight:900;color:#fff}
.cn-me h3{font-size:1.06rem}
.cn-me p{font-size:.92rem;line-height:1.6;color:var(--ink-2)}

/* ---------- preuves ---------- */
.cn-cs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(40px,5vw,64px)}
.cn-cs-c{display:flex;flex-direction:column;gap:12px;padding:clamp(28px,3.4vw,44px);border-radius:var(--r);background:var(--soft)}
.cn-cs-big{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;padding-bottom:18px;margin-bottom:6px;box-shadow:0 1px 0 #dde6ee}
.cn-cs-big b{font-size:clamp(3rem,5vw,4.2rem);font-weight:900;line-height:.95;letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cn-cs-big sup{font-size:.45em}
.cn-cs-big span{font-size:1rem;font-weight:800;color:var(--slate)}
.cn-cs-k{font-size:.76rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.cn-cs-c h3{font-size:1.3rem}
.cn-cs-c>p:not([class]){font-size:.98rem;line-height:1.65;color:var(--ink-2)}
.cn-cs-n{margin-top:auto;font-size:.8rem;color:#7b8a94}

/* ---------- ce qui nous distingue ---------- */
.cn-df-s{position:relative;overflow:clip;isolation:isolate;background:radial-gradient(60% 80% at 100% 100%,rgba(0,131,255,.26),transparent 70%),#0f1a22}
.cn-df-s::after{left:-100px;top:-110px}
.cn-df-top{margin-bottom:clamp(36px,4vw,56px)}
.cn-df-lead{font-size:1.06rem;line-height:1.7;color:#c8d3d9}
.cn-df{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,44px)}
.cn-df li{display:grid;grid-template-columns:46px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:16px;row-gap:6px;padding:24px 0;box-shadow:0 -1px 0 rgba(255,255,255,.1)}
.cn-df-i{grid-row:span 2;display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r);background:#fff}
.cn-df-i .ico{width:28px;height:28px}
.cn-df h3{font-size:1.08rem;color:#fff}
.cn-df li>p{font-size:.92rem;line-height:1.6;color:#b8c5cc}

/* ---------- prix : carte d’appel en dégradé ---------- */
.cn-px{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(32px,4.6vw,64px);border-radius:var(--r);background:radial-gradient(70% 90% at 100% 0%,#00baff 0%,rgba(0,186,255,0) 60%),linear-gradient(120deg,#0060d6 0%,#0083ff 55%,#00a6ff 100%);box-shadow:0 60px 100px -60px rgba(0,90,200,.75);overflow:clip}
.cn-px::after{content:"";position:absolute;z-index:-1;right:-80px;bottom:-120px;width:380px;aspect-ratio:1;background:url("img/maxelik-symbole.svg") no-repeat center/contain;opacity:.12;filter:brightness(0) invert(1)}
.cn-px-t{display:grid;gap:16px;justify-items:start}
.cn-px-k{font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#d6efff}
.cn-px h2{color:#fff}
.cn-px-t>p:not([class]){font-size:1.08rem;line-height:1.7;color:#e6f3ff}
.cn-px-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:6px}
.cn-px-tel{display:inline-flex;align-items:center;gap:10px;font-size:1.15rem;font-weight:900;color:#fff;text-decoration:none}
.cn-px-tel .ico{width:26px;height:26px;padding:6px;box-sizing:content-box;border-radius:50%;background:rgba(255,255,255,.18);color:#fff}
.cn-px-n{font-size:.92rem;color:#d6efff}
.cn-px-n a{font-weight:800;color:#fff}
.cn-px-f{padding:clamp(22px,2.6vw,32px);border-radius:var(--r);background:rgba(8,30,70,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cn-px-fh{margin-bottom:8px;font-size:.78rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#d6efff}
.cn-px-f ol{list-style:none;margin:0;padding:0;display:grid;counter-reset:px}
.cn-px-f li{position:relative;display:grid;gap:2px;padding:13px 0 13px 46px;font-size:.9rem;line-height:1.5;color:#d6efff;box-shadow:0 -1px 0 rgba(255,255,255,.14);counter-increment:px}
.cn-px-f li:first-child{box-shadow:none}
.cn-px-f li::before{content:counter(px);position:absolute;left:0;top:13px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;font-size:.86rem;font-weight:900;color:var(--blue)}
.cn-px-f li b{font-size:1rem;color:#fff}

/* ---------- lexique ---------- */
.cn-lx{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cn-lx>div{display:grid;gap:6px;align-content:start;padding:20px 22px;border-radius:var(--r);background:#fff}
.cn-lx dt{font-size:1.08rem;font-weight:900;color:var(--slate)}
.cn-lx dt::before{content:"";display:inline-block;width:8px;height:8px;margin:0 10px .15em 0;border-radius:50%;background:var(--grad)}
.cn-lx dd{margin:0;font-size:.93rem;line-height:1.6;color:var(--ink-2)}

/* ---------- zone : Calvados puis Normandie, commune aux pages du silo ---------- */
.cn-zn-s{position:relative;overflow:clip;isolation:isolate;background:radial-gradient(60% 80% at 0% 100%,rgba(0,131,255,.24),transparent 70%),#0f1a22}
.cn-zn-s::after{content:"";position:absolute;z-index:-1;right:-100px;top:-110px;width:420px;aspect-ratio:1;background:url("img/maxelik-symbole.svg") no-repeat center/contain;opacity:.05;filter:brightness(3)}
.cn-zn{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:center}
.cn-zn-t{display:grid;gap:16px}
.cn-zn-t .cn-ek{color:#7fd8ff}
.cn-zn-t>p:not(.cn-ek){font-size:1.04rem;line-height:1.7;color:#c8d3d9}
.cn-zn-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
.cn-zn-c{display:grid;align-content:start;gap:14px;padding:clamp(22px,2.6vw,30px);border-radius:var(--r);background:rgba(255,255,255,.05)}
.cn-zn-c.is-main{grid-column:span 2;background:radial-gradient(120% 120% at 100% 0%,#0a4a91 0%,#112a40 60%,#141d22 100%);box-shadow:0 40px 80px -50px rgba(0,90,200,.7)}
.cn-zn-k{display:flex;align-items:center;gap:12px;font-size:1.15rem;font-weight:900;color:#fff}
.cn-zn-k span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--grad);font-size:.9rem}
.cn-zn-c ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cn-zn-c li{padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.08);font-size:.88rem;font-weight:700;color:#e6edf0;transition:background .3s}
.cn-zn-c li:hover{background:rgba(0,131,255,.35)}
.cn-zn-c.is-main li{background:rgba(255,255,255,.12);font-size:.94rem}
.cn-zn-n{font-size:.92rem;line-height:1.6;color:#b8c5cc}
@media (max-width:1000px){.cn-zn{grid-template-columns:1fr}}
@media (max-width:700px){.cn-zn-g{grid-template-columns:1fr}.cn-zn-c.is-main{grid-column:auto}}

/* ---------- responsive ---------- */
@media (max-width:1100px){.cn-ro,.cn-pf,.cn-me{grid-template-columns:repeat(2,minmax(0,1fr))}.cn-df{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1000px){
  .cn-col{display:none}
  .cn-hero-g,.cn-top,.cn-gr,.cn-ia,.cn-cs,.cn-px{grid-template-columns:1fr}
  .cn-sheet{transform:none}
  .cn-lx{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .cn-hero{padding-block:18px 40px}
  .cn-lead{font-size:1rem;margin-top:12px}
  .cn-ro,.cn-pf,.cn-me,.cn-df,.cn-lx{grid-template-columns:1fr}
  .cn-pr a{grid-template-columns:52px minmax(0,1fr) 40px;padding-inline:0}
  .cn-pr-n{display:none}
  .cn-pr-i{width:52px;height:52px}
  .cn-pr-go{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){.cn-pr a,.cn-pr-go{transition:none}}