/* ARKHE / DESIGN VAULT — four genuine visual art-direction choices. */
.ak-vision-banner{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:20px;padding:23px clamp(16px,3vw,34px);
  border:1px solid rgba(124,240,213,.3);border-radius:22px;overflow:hidden;
  background:
    radial-gradient(ellipse at 80% 30%,rgba(67,226,185,.22),transparent 57%),
    radial-gradient(ellipse at 5% 100%,rgba(204,167,107,.10),transparent 60%),
    linear-gradient(115deg,#07171b,#10222a 72%,#111b27);
  box-shadow:inset 0 1px 0 #ddfff826,0 35px 75px -54px #000;
  margin:0 0 16px;isolation:isolate;
}
.ak-vision-banner::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:linear-gradient(#bcffed0c 1px,transparent 1px),linear-gradient(90deg,#bcffed0c 1px,transparent 1px);
  background-size:38px 38px;mask-image:linear-gradient(90deg,transparent 28%,black)}
.ak-vision-banner::after{content:"";position:absolute;top:0;left:18%;right:18%;height:1px;
 background:linear-gradient(90deg,transparent,#aefbe2,transparent)}
.ak-vision-text{position:relative;z-index:1;max-width:690px}
.ak-vision-overline{display:inline-flex;align-items:center;gap:9px;color:#b8f9e4;font:600 10px var(--f-mono);letter-spacing:.16em}
.ak-vision-overline i{width:6px;height:6px;border-radius:50%;background:#a0fddd;box-shadow:0 0 14px #81e7cc}
.ak-vision-text h2{font-family:var(--f-serif),Georgia,serif;font-size:clamp(2.15rem,4.4vw,4.2rem);font-weight:400;letter-spacing:-.05em;line-height:.99;margin:11px 0 10px;color:#f0fbf5}
.ak-vision-text h2 em{font-style:italic;color:#b0fbe3}
.ak-vision-text p{color:#b1cec9;font-size:12px;line-height:1.7;max-width:570px}
.ak-vision-graphic{position:relative;width:135px;height:135px;border-radius:50%;border:1px solid #b2ffe933;box-shadow:0 0 0 16px #90f7da0b,inset 0 0 65px #73c5b83d;
 background:radial-gradient(circle at 33% 28%,#ccfff5 0%,#79e8d4 13%,#1f665f 36%,#07181d 64%,#07181d 72%);
 transform:rotateX(24deg) rotateZ(-28deg);filter:drop-shadow(0 17px 30px #000)}
.ak-vision-graphic::before{content:"";position:absolute;inset:-18px;border:1px dashed #a0f7d286;border-radius:50%;animation:akVaultSpin 42s linear infinite}
.ak-vision-graphic::after{content:"";position:absolute;inset:17%;border:1px solid #b0fae288;border-radius:19%;transform:rotate(45deg);box-shadow:inset 0 0 23px #b2fcea2c}
@keyframes akVaultSpin{to{transform:rotate(360deg)}}
.ak-gallery-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:20px 0 11px}
.ak-gallery-header b{color:#e8faf2;font-size:14px;font-weight:700}
.ak-gallery-header span{color:#80aaa1;font:500 10px var(--f-mono);letter-spacing:.04em}
.ak-style-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:20px}
.ak-style{appearance:none;display:block;min-width:0;text-align:left;padding:0;overflow:hidden;position:relative;border-radius:16px;cursor:pointer;
 border:1px solid rgba(159,227,213,.19);background:#0a1920;box-shadow:0 20px 35px -23px #000;
 transition:transform .25s ease,border-color .25s,box-shadow .25s}
.ak-style:hover,.ak-style:focus-visible{transform:translateY(-5px);border-color:rgba(133,243,218,.66);box-shadow:0 25px 50px -22px #000}
.ak-style[aria-pressed=true]{border-color:#88eed7;box-shadow:0 0 0 1px #8af2d65c,0 23px 43px -20px #000}
.ak-style-preview{display:flex;flex-direction:column;justify-content:space-between;height:170px;position:relative;isolation:isolate;overflow:hidden;padding:14px}
.ak-style-preview::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.ak-style-preview::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.ak-style-top{display:flex;align-items:center;justify-content:space-between;gap:8px;color:inherit;font:600 9px var(--f-mono);letter-spacing:.12em;opacity:.85}
.ak-style-top i{height:1px;min-width:26px;flex:1;background:currentColor;opacity:.35}
.ak-style-content{position:relative;display:grid;gap:5px;max-width:91%}
.ak-style-content strong{display:block;font-size:clamp(21px,2.2vw,33px);font-weight:800;line-height:.93;letter-spacing:-.07em}
.ak-style-content small{font:500 8px var(--f-mono);letter-spacing:.05em;opacity:.72}
.ak-style-tag{position:relative;align-self:flex-start;border:1px solid currentColor;border-radius:3px;padding:4px 7px;font:600 8px var(--f-mono);opacity:.82}
.ak-style[data-skin=signal] .ak-style-preview{color:#e5fff5;background:#081919}
.ak-style[data-skin=signal] .ak-style-preview::before{background:radial-gradient(ellipse at 92% 35%,#54f6c799,transparent 53%),repeating-linear-gradient(90deg,#83f5d316 0 1px,transparent 1px 18px)}
.ak-style[data-skin=signal] .ak-style-preview::after{right:-28%;top:-38%;width:95%;aspect-ratio:1;border:25px solid #79ffe425;box-shadow:0 0 0 1px #91e2d7bb,0 0 0 36px #77ffe511,inset 0 0 36px #46edbe7c}
.ak-style[data-skin=heritage] .ak-style-preview{color:#f4e8d6;background:#241914}
.ak-style[data-skin=heritage] .ak-style-preview::before{background:radial-gradient(circle at 80% 30%,#dca46d70,transparent 58%),repeating-linear-gradient(125deg,#e1a36a0d 0 1px,transparent 1px 7px)}
.ak-style[data-skin=heritage] .ak-style-preview::after{right:-18%;top:-21%;width:83%;aspect-ratio:1;border:18px solid #e4b48827;transform:rotate(18deg);border-radius:25%}
.ak-style[data-skin=heritage] .ak-style-content strong{font:italic 400 clamp(24px,2.8vw,39px)/.95 Georgia,serif;letter-spacing:-.06em}
.ak-style[data-skin=atelier] .ak-style-preview{color:#181b1b;background:#ebe5d8}
.ak-style[data-skin=atelier] .ak-style-preview::before{background:radial-gradient(circle at 86% 28%,#d1bf9d77,transparent 58%),linear-gradient(135deg,#fbf8ef,#d9d1c3)}
.ak-style[data-skin=atelier] .ak-style-preview::after{right:-5%;top:4%;width:47%;aspect-ratio:1;border:1px solid #41443d66;box-shadow:0 0 0 14px #444a4111}
.ak-style[data-skin=atelier] .ak-style-content strong{font:400 clamp(26px,2.8vw,41px)/.89 Georgia,serif;letter-spacing:-.08em}
.ak-style[data-skin=chromatic] .ak-style-preview{color:#f1edff;background:#090b26}
.ak-style[data-skin=chromatic] .ak-style-preview::before{background:radial-gradient(ellipse at 95% 28%,#ef75ec82,transparent 52%),radial-gradient(ellipse at 35% 95%,#548ef47f,transparent 60%),linear-gradient(135deg,#0b0b26,#17174f)}
.ak-style[data-skin=chromatic] .ak-style-preview::after{right:-22%;top:-19%;width:79%;aspect-ratio:1;border:22px solid #b0b1ff46;transform:rotate(-22deg);border-radius:30%;box-shadow:0 0 30px #d178ff77}
.ak-style-bottom{display:flex;justify-content:space-between;align-items:center;gap:7px;padding:12px 12px 13px;background:linear-gradient(180deg,#101e26,#0a151b)}
.ak-style-bottom span{display:grid;gap:4px;min-width:0}.ak-style-bottom b{color:#ebfff4;font-size:11px;font-weight:700}.ak-style-bottom small{color:#8daaa4;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ak-style-bottom i{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:#8fecc819;color:#9df7d5;font-style:normal;font-size:13px}
@media(max-width:1080px){.ak-style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ak-style-preview{height:155px}.ak-style-content strong{font-size:32px}}
@media(max-width:600px){.ak-vision-banner{grid-template-columns:1fr;padding:16px;border-radius:16px}.ak-vision-text h2{font-size:2.6rem}.ak-vision-graphic{position:absolute;right:-25px;top:-29px;width:100px;height:100px;opacity:.65}.ak-vision-text{z-index:1}.ak-vision-text p{max-width:260px}.ak-gallery-header{flex-direction:column;align-items:flex-start}.ak-style-grid{gap:8px}.ak-style-preview{height:145px;padding:10px}.ak-style-content strong{font-size:clamp(22px,5vw,30px)}.ak-style-bottom{padding:9px}.ak-style-bottom b{font-size:10px}.ak-style-bottom small{font-size:8px}}
@media(prefers-reduced-motion:reduce){.ak-vision-graphic::before{animation:none}.ak-style{transition:none}.ak-style:hover{transform:none}}