:root{--bg:#030a15;--panel:#07172c;--panel2:#0a203b;--cyan:#55ddff;--blue:#397dff;--silver:#eef5fc;--muted:#a6c0d9;--line:rgba(255,255,255,.18);--glass:rgba(8,24,46,.85);--shadow:0 28px 80px rgba(0,0,0,.55);--max:1420px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#f8fcff;background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;z-index:-3;background:linear-gradient(145deg,rgba(2,8,18,.98),rgba(4,17,34,.97) 48%,rgba(2,9,20,.99))}body:after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(circle at 12% 8%,rgba(57,125,255,.16),transparent 30%),radial-gradient(circle at 88% 12%,rgba(85,221,255,.10),transparent 27%)}
a{color:inherit;text-decoration:none}button{font:inherit}.container{width:min(var(--max),calc(100% - 44px));margin:auto}.announcement{height:34px;display:grid;place-items:center;background:rgba(2,10,22,.95);border-bottom:1px solid var(--line);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#d2e3f5}header{position:sticky;top:0;z-index:80;background:rgba(3,12,25,.92);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.nav{min-height:96px;display:flex;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:14px;min-width:260px}.brand img{width:76px;height:76px;object-fit:cover;object-position:center;border-radius:18px;filter:drop-shadow(0 0 22px rgba(85,221,255,.32));transition:.35s}.brand:hover img{transform:scale(1.05)}.brand span{font:24px Georgia,serif;color:#ffffff;font-weight:600}.nav nav{display:flex;gap:24px;margin-left:auto;color:#d5e5f5;font-size:14.5px;font-weight:500}.nav nav a{padding:10px 0;position:relative}.nav nav a:after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;background:var(--cyan);transition:.3s}.nav nav a:hover:after{right:0}.nav-actions{display:flex;gap:8px}.icon{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;transition:.25s}.icon:hover{transform:translateY(-3px);border-color:var(--cyan)}
.option-dock{position:fixed;right:14px;top:128px;z-index:90;width:226px;max-height:calc(100vh - 148px);overflow:auto;padding:13px;border:1px solid var(--line);border-radius:18px;background:rgba(2,11,24,.88);backdrop-filter:blur(18px);box-shadow:var(--shadow);scrollbar-width:thin}.option-dock strong{display:block;margin:2px 4px 10px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#a9bfd3}.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.option-grid button{min-height:48px;padding:7px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.035);color:#aebfd0;font-size:10.5px;cursor:pointer;transition:.25s}.option-grid button:hover,.option-grid button.active{color:#fff;border-color:rgba(85,221,255,.55);background:linear-gradient(135deg,rgba(57,125,255,.45),rgba(85,221,255,.16));transform:translateY(-2px)}
.hero{padding:30px 0 0}.hero-frame{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:30px;box-shadow:var(--shadow);background:linear-gradient(135deg,#0a2444,#07162a)}.hero-frame img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .8s}.hero-frame:hover img{transform:scale(1.015)}.hero-intro{margin-top:16px;padding:28px 30px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(135deg,rgba(8,25,49,.92),rgba(4,14,29,.82));display:flex;align-items:center;justify-content:space-between;gap:30px;box-shadow:0 16px 44px rgba(0,0,0,.28)}.hero-copy{max-width:790px}.eyebrow,.kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8ce8ff;margin-bottom:8px}.hero h1,.section h2{font-family:Georgia,serif;font-weight:500;line-height:1.04;margin:0}.hero h1{font-size:clamp(36px,4.3vw,62px);margin-bottom:12px}.hero p,.section-sub{color:#a7bacd;line-height:1.68}.hero p{margin:0}.cta-row{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.06);transition:.25s;white-space:nowrap}.btn.primary{border-color:transparent;background:linear-gradient(135deg,#2466e7,#42c9ee);box-shadow:0 12px 30px rgba(57,125,255,.28)}.btn:hover{transform:translateY(-3px)}.trust-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}.trust-item{padding:13px 16px;text-align:center;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.035);color:#b8c9da;font-size:13px}
.section{padding:76px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:30px}.section h2{font-size:clamp(31px,4vw,54px)}.section-sub{max-width:660px;margin:10px 0 0}.view-link{color:#9eeaff;font-size:13px}.category-stage{position:relative;min-height:450px}.category-item{position:relative;cursor:pointer;outline:none;transition:transform .38s ease,border-color .38s ease,background .38s ease,color .38s ease,box-shadow .38s ease,opacity .38s ease}.category-item:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}.category-item .num{font-size:10px;letter-spacing:.16em;color:#718ba4}.category-item .name{font-family:Georgia,serif}.category-item .meta{font-size:12px;line-height:1.45;color:#8fa5ba;margin-top:7px}.category-item:after{content:attr(data-note);position:absolute;z-index:12;left:50%;bottom:calc(100% + 12px);width:230px;padding:11px 13px;border:1px solid rgba(85,221,255,.32);border-radius:12px;background:rgba(2,12,25,.96);color:#c8d8e6;font:11px/1.5 Inter,system-ui,sans-serif;box-shadow:0 15px 40px rgba(0,0,0,.42);opacity:0;pointer-events:none;transform:translate(-50%,8px);transition:.25s}.category-item:hover:after,.category-item:focus-visible:after{opacity:1;transform:translate(-50%,0)}
.feature-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}.feature-panel,.corporate-panel{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.02));padding:30px}.feature-panel{min-height:315px}.feature-panel:before{content:"";position:absolute;width:260px;height:260px;right:-100px;top:-110px;border-radius:50%;background:rgba(57,125,255,.13);filter:blur(28px)}.feature-panel h3{font:34px Georgia,serif;margin:0 0 12px}.feature-panel p{color:#99aec2;line-height:1.7}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}.step{border-top:1px solid var(--line);padding-top:17px;color:#c8d6e4}.step b{display:block;margin-bottom:8px;color:#66def8;font-size:11px;letter-spacing:.13em}.today-list{display:grid;gap:12px;margin-top:22px}.today-row{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;padding:15px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03);transition:.25s}.today-row:hover{transform:translateX(6px);background:rgba(255,255,255,.06)}.today-row small{color:#8299af}.collection-rail{display:flex;gap:16px;overflow:auto;padding:4px 2px 18px;scroll-snap-type:x mandatory}.collection-card{min-width:285px;scroll-snap-align:start;padding:24px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.035);transition:.35s}.collection-card:hover{transform:translateY(-7px);border-color:rgba(85,221,255,.45)}.collection-card h4{font:27px Georgia,serif;margin:34px 0 8px}.collection-card p{font-size:13px;line-height:1.58;color:#8fa5b9}.corporate-panel{display:flex;align-items:center;justify-content:space-between;gap:30px}.corporate-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:390px}.corporate-list div{padding:13px;border:1px solid var(--line);border-radius:14px;color:#b9cbdb;background:rgba(255,255,255,.03)}
footer{padding:46px 0 28px;border-top:1px solid var(--line);background:rgba(2,8,16,.54)}.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px}.footer-grid h5{font-size:11px;letter-spacing:.16em;text-transform:uppercase}.footer-grid a{display:block;margin:10px 0;color:#879db2;font-size:13px}.footer-grid p{color:#8196aa;line-height:1.7}.copyright{display:flex;justify-content:space-between;margin-top:34px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;color:#687f95}
/* 01 ORIGINAL ORBITAL REALM */
body[data-option="1"] .category-stage{display:grid;place-items:center;min-height:570px}body[data-option="1"] .category-stage:before,body[data-option="1"] .category-stage:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(85,221,255,.2)}body[data-option="1"] .category-stage:before{width:500px;height:500px}body[data-option="1"] .category-stage:after{width:330px;height:330px;box-shadow:0 0 70px rgba(57,125,255,.18)}body[data-option="1"] .category-core{display:grid;place-items:center;width:168px;height:168px;border-radius:50%;border:1px solid rgba(85,221,255,.45);background:radial-gradient(circle,rgba(57,125,255,.24),rgba(3,14,29,.94));font:22px Georgia,serif;box-shadow:0 0 70px rgba(57,125,255,.2)}body[data-option="1"] .category-item{position:absolute;width:158px;padding:16px;text-align:center;border:1px solid var(--line);border-radius:999px;background:rgba(5,19,38,.9);transform:rotate(calc(-90deg + (var(--i)*45deg))) translateX(255px) rotate(calc(90deg - (var(--i)*45deg)));box-shadow:0 10px 30px rgba(0,0,0,.32)}body[data-option="1"] .category-item:hover{transform:rotate(calc(-90deg + (var(--i)*45deg))) translateX(265px) rotate(calc(90deg - (var(--i)*45deg))) scale(1.08);border-color:var(--cyan)}
/* 02 ORIGINAL MOTION RIBBONS */
body[data-option="2"] .category-stage{display:flex;flex-direction:column;gap:8px;min-height:auto}body[data-option="2"] .category-item{display:grid;grid-template-columns:64px 1fr auto;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line);overflow:hidden}body[data-option="2"] .category-item:before{content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-102%);background:linear-gradient(90deg,rgba(57,125,255,.42),rgba(85,221,255,.09));transition:.65s cubic-bezier(.22,1,.36,1)}body[data-option="2"] .category-item:hover:before{transform:none}body[data-option="2"] .category-item:hover{padding-left:36px;color:white}body[data-option="2"] .name{font-size:30px}
/* 03 ORIGINAL PERSPECTIVE FAN */
body[data-option="3"] .category-stage{display:flex;align-items:center;justify-content:center;perspective:1200px;min-height:470px;overflow:hidden;padding-left:40px}body[data-option="3"] .category-item{width:170px;height:285px;margin-left:-42px;padding:22px;border:1px solid rgba(255,255,255,.18);border-radius:24px;background:linear-gradient(155deg,rgba(255,255,255,.09),rgba(5,17,35,.65));backdrop-filter:blur(15px);transform:rotateY(calc((var(--i) - 3.5)*-8deg)) translateY(calc(var(--fanY)*1px));box-shadow:0 22px 60px rgba(0,0,0,.32)}body[data-option="3"] .category-item:first-child{margin-left:0}body[data-option="3"] .category-item:hover{z-index:8;transform:translateY(-18px) rotateY(0) scale(1.09);border-color:var(--cyan);background:linear-gradient(155deg,rgba(85,221,255,.15),rgba(5,17,35,.88))}body[data-option="3"] .name{font-size:25px;margin-top:56px}
/* 04 ORIGINAL KINETIC TYPE */
body[data-option="4"] .category-stage{min-height:auto;overflow:hidden;border-block:1px solid var(--line);padding:14px 0}body[data-option="4"] .category-track{display:flex;gap:18px;width:max-content;animation:ticker 30s linear infinite}body[data-option="4"] .category-stage:hover .category-track{animation-play-state:paused}body[data-option="4"] .category-item{padding:22px 30px;white-space:nowrap;color:transparent;-webkit-text-stroke:1px #879db2;font:56px Georgia,serif}body[data-option="4"] .category-item:hover{color:#f5fbff;-webkit-text-stroke:0;transform:skewX(-8deg);text-shadow:0 0 28px rgba(85,221,255,.4)}body[data-option="4"] .num,body[data-option="4"] .meta{display:none}@keyframes ticker{to{transform:translateX(-50%)}}
/* 05 ORIGINAL CONSTELLATION */
body[data-option="5"] .category-stage{min-height:510px;border:1px solid var(--line);border-radius:32px;overflow:hidden;background:radial-gradient(circle at center,rgba(57,125,255,.14),transparent 58%)}body[data-option="5"] .category-stage:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.35) 1px,transparent 1px);background-size:42px 42px;opacity:.45}body[data-option="5"] .category-stage:after{content:"";position:absolute;inset:10%;background:linear-gradient(24deg,transparent 48%,rgba(85,221,255,.12) 49%,transparent 50%),linear-gradient(-18deg,transparent 48%,rgba(57,125,255,.12) 49%,transparent 50%)}body[data-option="5"] .category-item{position:absolute;left:var(--x);top:var(--y);z-index:2;min-width:155px;padding:15px 18px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(5,19,38,.82);backdrop-filter:blur(12px);transform:translate(-50%,-50%)}body[data-option="5"] .category-item:hover{transform:translate(-50%,-50%) scale(1.09);border-color:var(--cyan);box-shadow:0 0 34px rgba(85,221,255,.2)}
/* 06 VERTICAL PORTALS */
body[data-option="6"] .category-stage{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}body[data-option="6"] .category-item{min-height:220px;padding:22px;border:1px solid var(--line);border-radius:90px 90px 22px 22px;background:linear-gradient(180deg,rgba(85,221,255,.09),rgba(5,18,35,.76));display:flex;flex-direction:column;justify-content:flex-end}body[data-option="6"] .category-item:hover{transform:translateY(-10px);border-color:var(--cyan);box-shadow:0 0 45px rgba(85,221,255,.14)}body[data-option="6"] .name{font-size:25px}
/* 07 ORIGINAL LIQUID CAPSULES */
body[data-option="7"] .category-stage{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;padding:30px}body[data-option="7"] .category-item{width:calc(25% - 14px);min-width:210px;min-height:120px;padding:22px 26px;border:1px solid rgba(255,255,255,.17);border-radius:999px;background:linear-gradient(135deg,rgba(57,125,255,.19),rgba(85,221,255,.06));overflow:hidden}body[data-option="7"] .category-item:before{content:"";position:absolute;width:120px;height:120px;right:-45px;bottom:-55px;border-radius:50%;background:rgba(85,221,255,.19);filter:blur(8px);transition:.5s}body[data-option="7"] .category-item:hover{transform:translateY(-8px) scale(1.025);border-color:var(--cyan);background:linear-gradient(135deg,rgba(57,125,255,.33),rgba(85,221,255,.12))}body[data-option="7"] .category-item:hover:before{transform:scale(1.7) translate(-15px,-10px)}body[data-option="7"] .name{font-size:24px}
/* 08 SOFT SPOTLIGHT LIST */
body[data-option="8"] .category-stage{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px;border-radius:28px;background:rgba(255,255,255,.018)}body[data-option="8"] .category-item{padding:24px;border:1px solid transparent;border-radius:18px;opacity:.56;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(85,221,255,.10),transparent 42%)}body[data-option="8"] .category-stage:hover .category-item:not(:hover){opacity:.35}body[data-option="8"] .category-item:hover{opacity:1;border-color:rgba(85,221,255,.25);background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(85,221,255,.19),rgba(57,125,255,.05) 34%,transparent 65%);box-shadow:inset 0 0 48px rgba(85,221,255,.035)}body[data-option="8"] .name{font-size:29px}
/* 09 ORIGINAL ART GALLERY */
body[data-option="9"] .category-stage{display:flex;align-items:center;justify-content:center;gap:0;min-height:470px;perspective:1100px;overflow:hidden}body[data-option="9"] .category-item{width:185px;height:330px;margin-left:-22px;padding:22px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(5,17,35,.88));transform:rotateY(calc((var(--i) - 3.5)*3deg)) translateY(calc((var(--i)%2)*18px));box-shadow:0 25px 70px rgba(0,0,0,.3);display:flex;flex-direction:column;justify-content:flex-end}body[data-option="9"] .category-item:hover{z-index:5;transform:rotateY(0) translateY(-16px) scale(1.07);border-color:var(--cyan)}body[data-option="9"] .name{font-size:27px}
/* 10 COMMAND GRID */
body[data-option="10"] .category-stage{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}body[data-option="10"] .category-item{min-height:180px;padding:20px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.02))}body[data-option="10"] .category-item:hover{transform:translateY(-7px);border-color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(85,221,255,.15)}body[data-option="10"] .name{font-size:25px;margin-top:55px}
/* 11 ORIGINAL HOLOGRAPHIC DECK */
body[data-option="11"] .category-stage{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;perspective:1000px}body[data-option="11"] .category-item{min-height:220px;padding:22px;border:1px solid rgba(255,255,255,.2);border-radius:20px;background:linear-gradient(135deg,rgba(85,221,255,.10),rgba(225,105,255,.08),rgba(57,125,255,.13));overflow:hidden;transform-style:preserve-3d}body[data-option="11"] .category-item:before{content:"";position:absolute;inset:-70%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.28) 49%,transparent 56%);transform:translateX(-45%) rotate(10deg);transition:.7s}body[data-option="11"] .category-item:hover{transform:translateY(-9px) rotateX(4deg) rotateY(-4deg);border-color:#dca7ff;box-shadow:0 20px 60px rgba(100,120,255,.16)}body[data-option="11"] .category-item:hover:before{transform:translateX(45%) rotate(10deg)}body[data-option="11"] .name{font-size:25px;margin-top:75px}
/* 12 ORIGINAL MAGNETIC FLOW */
body[data-option="12"] .category-stage{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;padding:20px}body[data-option="12"] .category-item{min-height:170px;padding:22px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.035);transform:translate(var(--tx,0),var(--ty,0));transition:transform .16s ease-out,border-color .3s,background .3s}body[data-option="12"] .category-item:hover{border-color:var(--cyan);background:linear-gradient(145deg,rgba(57,125,255,.18),rgba(85,221,255,.05));box-shadow:0 22px 55px rgba(0,0,0,.28)}body[data-option="12"] .name{font-size:25px;margin-top:45px}
/* 13 ORIGINAL PRISM REALMS */
body[data-option="13"] .category-stage{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}body[data-option="13"] .category-item{min-height:210px;padding:22px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.035);overflow:hidden}body[data-option="13"] .category-item:before{content:"";position:absolute;inset:0;opacity:0;background:linear-gradient(135deg,hsla(calc(var(--i)*42),85%,62%,.28),rgba(85,221,255,.04));transition:.45s}body[data-option="13"] .category-item>*{position:relative;z-index:1}body[data-option="13"] .category-item:hover{transform:translateY(-8px);border-color:hsla(calc(var(--i)*42),90%,70%,.75)}body[data-option="13"] .category-item:hover:before{opacity:1}body[data-option="13"] .name{font-size:25px;margin-top:68px}
/* 14 NEURAL STREAM */
body[data-option="14"] .category-stage{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;background:repeating-linear-gradient(115deg,transparent 0 54px,rgba(85,221,255,.04) 55px 56px);padding:22px;border-radius:28px}body[data-option="14"] .category-item{min-height:185px;padding:22px;border:1px solid var(--line);border-radius:18px;background:rgba(5,18,35,.8);overflow:hidden}body[data-option="14"] .category-item:before{content:"";position:absolute;left:-30%;right:-30%;bottom:35%;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 17px var(--cyan);transition:.5s}body[data-option="14"] .category-item:hover:before{transform:translateY(-55px)}body[data-option="14"] .category-item:hover{transform:translateY(-7px);border-color:var(--cyan)}body[data-option="14"] .name{font-size:24px;margin-top:54px}
/* 15 ORIGINAL LUXE CAROUSEL */
body[data-option="15"] .category-stage{display:flex;align-items:center;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:30px 12vw 45px}body[data-option="15"] .category-item{flex:0 0 310px;min-height:390px;scroll-snap-align:center;padding:28px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(5,17,35,.88));display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 24px 70px rgba(0,0,0,.28)}body[data-option="15"] .category-item:hover{transform:translateY(-12px) scale(1.025);border-color:var(--cyan)}body[data-option="15"] .name{font-size:31px}
/* 16 NEW: CRYSTAL SHELVES */
body[data-option="16"] .category-stage{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 14px;padding:30px;background:linear-gradient(180deg,transparent,rgba(85,221,255,.035))}body[data-option="16"] .category-item{min-height:150px;padding:22px;border:1px solid rgba(255,255,255,.17);border-radius:18px;background:rgba(255,255,255,.045);box-shadow:0 18px 0 -16px rgba(85,221,255,.35)}body[data-option="16"] .category-item:hover{transform:translateY(-9px);background:rgba(85,221,255,.08);border-color:var(--cyan)}body[data-option="16"] .name{font-size:24px;margin-top:32px}
/* 17 NEW: SILK FOLD */
body[data-option="17"] .category-stage{display:grid;grid-template-columns:1fr 1fr;gap:12px}body[data-option="17"] .category-item{padding:27px 30px;border:1px solid var(--line);border-radius:18px 60px 18px 60px;background:linear-gradient(125deg,rgba(57,125,255,.13),rgba(255,255,255,.025));overflow:hidden}body[data-option="17"] .category-item:hover{transform:translateX(8px);border-radius:60px 18px 60px 18px;border-color:var(--cyan)}body[data-option="17"] .name{font-size:27px}
/* 18 NEW: CELESTIAL STACK */
body[data-option="18"] .category-stage{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:30px}body[data-option="18"] .category-item{min-height:210px;padding:22px;border:1px solid var(--line);border-radius:50% 50% 22px 22px;background:radial-gradient(circle at 50% 16%,rgba(85,221,255,.18),rgba(5,18,35,.84) 55%)}body[data-option="18"] .category-item:hover{transform:translateY(-10px) rotate(-1deg);border-color:var(--cyan)}body[data-option="18"] .name{font-size:25px;margin-top:76px}
/* 19 NEW: MONOLITH WALK */
body[data-option="19"] .category-stage{display:flex;gap:14px;align-items:stretch;overflow:auto;padding:20px}body[data-option="19"] .category-item{flex:1 0 150px;min-height:380px;padding:20px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(5,17,35,.94));writing-mode:vertical-rl;transform:rotate(180deg)}body[data-option="19"] .category-item:hover{flex-basis:230px;border-color:var(--cyan);background:linear-gradient(180deg,rgba(85,221,255,.12),rgba(5,17,35,.94))}body[data-option="19"] .meta{display:none}body[data-option="19"] .name{font-size:25px}
/* 20 NEW: AURORA WINDOWS */
body[data-option="20"] .category-stage{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}body[data-option="20"] .category-item{min-height:205px;padding:22px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(150deg,rgba(57,125,255,.08),rgba(85,221,255,.04));overflow:hidden}body[data-option="20"] .category-item:before{content:"";position:absolute;inset:-80% -40%;background:conic-gradient(from 90deg,transparent,rgba(85,221,255,.22),rgba(203,96,255,.16),transparent 55%);animation:aurora 8s linear infinite;opacity:.45}body[data-option="20"] .category-item>*{position:relative;z-index:1}body[data-option="20"] .category-item:hover{transform:translateY(-8px);border-color:#8ce8ff}body[data-option="20"] .name{font-size:25px;margin-top:62px}@keyframes aurora{to{transform:rotate(360deg)}}
.dev-note{position:relative}
@media(max-width:1100px){.option-dock{position:relative;right:auto;top:auto;width:min(var(--max),calc(100% - 44px));margin:18px auto 0;max-height:none}.option-grid{grid-template-columns:repeat(5,1fr)}.nav nav{display:none}.feature-grid{grid-template-columns:1fr}.corporate-panel{flex-direction:column;align-items:flex-start}.corporate-list{min-width:0;width:100%}body[data-option="6"] .category-stage,body[data-option="10"] .category-stage,body[data-option="11"] .category-stage,body[data-option="12"] .category-stage,body[data-option="13"] .category-stage,body[data-option="14"] .category-stage,body[data-option="16"] .category-stage,body[data-option="18"] .category-stage,body[data-option="20"] .category-stage{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.container{width:min(100% - 24px,var(--max))}.brand{min-width:auto}.brand span{display:none}.brand img{width:64px;height:64px}.nav{min-height:78px}.option-dock{width:calc(100% - 24px)}.option-grid{grid-template-columns:repeat(2,1fr)}.hero-frame img{aspect-ratio:16/9}.hero-intro{padding:23px;flex-direction:column;align-items:flex-start}.trust-strip{grid-template-columns:1fr}.section{padding:56px 0}.section-head{align-items:flex-start;flex-direction:column}.steps{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.copyright{flex-direction:column;gap:8px}.corporate-list{grid-template-columns:1fr}body[data-option="1"] .category-stage{display:flex;flex-direction:column;gap:10px;min-height:auto}body[data-option="1"] .category-stage:before,body[data-option="1"] .category-stage:after,body[data-option="1"] .category-core{display:none}body[data-option="1"] .category-item{position:relative;width:100%;transform:none!important}body[data-option="3"] .category-stage,body[data-option="9"] .category-stage{justify-content:flex-start;overflow:auto}body[data-option="5"] .category-stage{display:flex;flex-direction:column;gap:10px;padding:14px;min-height:auto}body[data-option="5"] .category-item{position:relative;left:auto;top:auto;transform:none!important}body[data-option="6"] .category-stage,body[data-option="8"] .category-stage,body[data-option="10"] .category-stage,body[data-option="11"] .category-stage,body[data-option="12"] .category-stage,body[data-option="13"] .category-stage,body[data-option="14"] .category-stage,body[data-option="16"] .category-stage,body[data-option="17"] .category-stage,body[data-option="18"] .category-stage,body[data-option="20"] .category-stage{grid-template-columns:1fr}body[data-option="7"] .category-item{width:100%;min-width:0}.category-item:after{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}


/* =========================================================
   ABSTRACTREALMSS HOMEPAGE v2.1
   Reviewer explanations, corrected icons and alignment
========================================================= */

/* Official navigation action icons */
.nav-actions .icon{
  display:inline-grid;
  place-items:center;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(255,255,255,.035);
  color:#eaf7ff;
  cursor:pointer;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,color .2s ease;
}
.nav-actions .icon svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.nav-actions .icon:hover,
.nav-actions .icon:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(85,221,255,.65);
  background:rgba(85,221,255,.09);
  color:#8eeaff;
}

/* Footer brand visual centring */
.footer-grid>div:first-child .brand{
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.footer-grid>div:first-child .brand span{
  display:flex;
  align-items:center;
  height:76px;
  line-height:1;
  transform:translateY(-2px);
}

/* Cursor-anchored explanation tooltip */
.floating-explanation{
  position:fixed;
  z-index:220;
  width:min(320px,calc(100vw - 24px));
  padding:11px 13px;
  border:1px solid rgba(85,221,255,.4);
  border-radius:13px;
  background:rgba(2,12,25,.98);
  color:#d9e8f3;
  font:12px/1.5 Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  box-shadow:0 16px 44px rgba(0,0,0,.48);
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:translateY(5px);
  transition:opacity .14s ease,transform .14s ease,visibility .14s ease;
}
.floating-explanation.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* Reviewer panel */
.review-toggle{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:110;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:10px 16px;
  border:1px solid rgba(85,221,255,.35);
  border-radius:999px;
  background:rgba(3,12,24,.92);
  color:#f7fbff;
  box-shadow:0 16px 42px rgba(0,0,0,.36);
  backdrop-filter:blur(18px);
  font:800 12px/1 Arial,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
.review-toggle:hover,.review-toggle:focus-visible{
  border-color:rgba(85,221,255,.78);
  background:rgba(8,27,50,.97);
}
.review-toggle-dot{
  width:9px;height:9px;border-radius:50%;
  background:#55ddff;
  box-shadow:0 0 16px rgba(85,221,255,.9);
}
.review-panel{
  position:fixed;
  inset:18px auto 18px 18px;
  z-index:130;
  width:min(460px,calc(100vw - 36px));
  overflow:auto;
  padding:22px;
  border:1px solid rgba(85,221,255,.28);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(4,16,31,.99),rgba(3,11,23,.99));
  box-shadow:0 28px 80px rgba(0,0,0,.58);
  transform:translateX(calc(-100% - 36px));
  opacity:0;
  visibility:hidden;
  transition:transform .3s ease,opacity .3s ease,visibility .3s ease;
}
.review-panel.is-open{transform:translateX(0);opacity:1;visibility:visible}
.review-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.1)}
.review-panel-head h2{margin:6px 0 0;font-size:24px;line-height:1.15}
.review-close{width:38px;height:38px;flex:0 0 auto;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(255,255,255,.06);color:#fff;font-size:25px;cursor:pointer}
.review-panel h3{margin:22px 0 12px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#b9d8ed}
.review-global-rules article,.review-section-list article{margin:0 0 12px;padding:15px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(255,255,255,.035)}
.review-global-rules strong,.review-section-list strong{display:block;margin-bottom:7px;color:#fff;font-size:14px}
.review-panel p{margin:5px 0 0;color:#b7c9d9;font-size:13px;line-height:1.55}
.review-backdrop{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.46);backdrop-filter:blur(2px)}
.review-backdrop.is-open{display:block}

@media(max-width:760px){
  .review-toggle{left:12px;bottom:12px}
  .review-panel{inset:10px;width:calc(100vw - 20px);padding:18px}
  .footer-grid>div:first-child .brand span{height:64px}
  .floating-explanation{display:none}
}
@media(prefers-reduced-motion:reduce){
  .floating-explanation,.review-panel{transition:none}
}


/* =========================================================
   ABSTRACTREALMSS HOMEPAGE v2.2
   Tablet and mobile responsive experience
   Desktop concept treatments remain inherited from v2.1.
========================================================= */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mobile-menu-toggle,.mobile-category-hint{display:none}

@media (max-width:1024px){
  :root{--max:960px}
  .container{width:min(var(--max),calc(100% - 32px))}
  .nav{min-height:82px;gap:14px}
  .brand{min-width:0;margin-right:auto}
  .brand img{width:62px;height:62px;border-radius:14px}
  .brand span{font-size:20px}
  .nav-actions .icon{width:40px;height:40px}
  .mobile-menu-toggle{display:grid;place-items:center;gap:4px;width:40px;height:40px;padding:9px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.035);color:#fff;order:3}
  .mobile-menu-toggle span:not(.sr-only){display:block;width:17px;height:1.5px;background:currentColor;border-radius:2px}
  .nav nav{position:absolute;top:calc(100% + 1px);left:16px;right:16px;display:grid;gap:0;padding:8px;border:1px solid var(--line);border-radius:18px;background:rgba(3,12,25,.98);box-shadow:0 22px 58px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.2s}
  .nav nav.is-open{opacity:1;visibility:visible;transform:none}
  .nav nav a{padding:14px 13px;border-radius:12px}
  .nav nav a:hover{background:rgba(85,221,255,.08)}
  .nav nav a:after{display:none}
  .option-dock{position:relative;right:auto;top:auto;width:calc(100% - 32px);max-height:none;margin:14px auto 0;padding:10px 12px;overflow:hidden}
  .option-dock strong{margin-bottom:8px}
  .option-grid{display:flex;gap:7px;overflow-x:auto;padding:1px 1px 6px;scroll-snap-type:x mandatory;scrollbar-width:thin}
  .option-grid button{flex:0 0 150px;min-height:42px;scroll-snap-align:start;font-size:10px}
  .hero{padding-top:18px}
  .hero-intro{padding:24px;align-items:flex-start}
  .hero h1{font-size:clamp(34px,6vw,52px)}
  .section{padding:62px 0}
  .section h2{font-size:clamp(32px,6vw,48px)}
  .section-head{margin-bottom:24px}
  .feature-grid{grid-template-columns:1fr}
  .corporate-panel{align-items:stretch}
  .footer-grid{grid-template-columns:1.35fr 1fr 1fr}
  .footer-grid>div:last-child{grid-column:2/4}
}

@media (max-width:760px){
  html{font-size:16px}
  .container{width:calc(100% - 24px)}
  .announcement{display:none}
  header{top:0}
  .nav{min-height:70px;gap:8px}
  .brand{gap:9px}
  .brand img{width:50px;height:50px;border-radius:11px}
  .brand span{display:block!important;font-size:15px;letter-spacing:-.02em;white-space:nowrap}
  .nav-actions{gap:5px}
  .nav-actions .icon{width:36px;height:36px}
  .nav-actions .icon svg{width:17px;height:17px}
  .mobile-menu-toggle{width:36px;height:36px}
  .option-dock{width:calc(100% - 24px);margin-top:10px;border-radius:15px}
  .option-dock strong{font-size:10px}
  .option-grid button{flex-basis:132px;min-height:40px}
  .hero-frame{border-radius:18px}
  .hero-frame img{aspect-ratio:16/9;object-fit:cover}
  .hero-intro{margin-top:10px;padding:18px;border-radius:18px;gap:18px}
  .hero h1{font-size:clamp(32px,10vw,43px);line-height:1.02;overflow-wrap:normal;word-break:normal}
  .hero p,.section-sub{font-size:14px;line-height:1.58}
  .cta-row{width:100%;display:grid;grid-template-columns:1fr;gap:9px}
  .btn{width:100%;min-height:46px}
  .trust-strip{display:none!important}
  .section{padding:44px 0}
  .section-head{display:block;margin-bottom:20px}
  .section h2{font-size:clamp(31px,9vw,41px);line-height:1.06;overflow-wrap:normal;word-break:normal}
  .section-sub{margin-top:8px}
  .view-link{display:none!important}
  .mobile-category-hint{display:block;margin:-7px 0 15px;color:#7f99ae;font-size:12px}

  /* Universal mobile category navigation: compact, two-column and touch-first. */
  body .category-stage,
  body[data-option] .category-stage{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    min-height:0!important;
    padding:0!important;
    overflow:visible!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    perspective:none!important;
  }
  body[data-option] .category-stage:before,
  body[data-option] .category-stage:after,
  body[data-option] .category-core{display:none!important}
  body[data-option] .category-item{
    position:relative!important;
    inset:auto!important;
    width:auto!important;
    min-width:0!important;
    min-height:126px!important;
    max-width:none!important;
    flex:none!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-end!important;
    padding:15px!important;
    border:1px solid rgba(255,255,255,.13)!important;
    border-radius:18px!important;
    background:linear-gradient(145deg,rgba(10,31,58,.92),rgba(4,15,30,.96))!important;
    box-shadow:0 12px 28px rgba(0,0,0,.22)!important;
    transform:none!important;
    writing-mode:horizontal-tb!important;
    clip-path:none!important;
    opacity:1!important;
    overflow:hidden!important;
    text-align:left!important;
    color:#fff!important;
    transition:transform .16s ease,border-color .16s ease,background .16s ease!important;
  }
  body[data-option] .category-item:before{
    content:""!important;
    position:absolute!important;
    inset:auto -20px -40px auto!important;
    width:95px!important;
    height:95px!important;
    border-radius:50%!important;
    background:radial-gradient(circle,rgba(85,221,255,.23),transparent 68%)!important;
    opacity:.75!important;
    transform:none!important;
    animation:none!important;
  }
  body[data-option] .category-item:after{display:none!important}
  body[data-option] .category-item:active,
  body[data-option] .category-item.is-expanded{transform:scale(.985)!important;border-color:rgba(85,221,255,.68)!important;background:linear-gradient(145deg,rgba(18,55,95,.96),rgba(5,19,38,.98))!important}
  body[data-option] .category-item .num{position:absolute;top:13px;left:15px;font-size:9px!important;color:#6ddff8!important}
  body[data-option] .category-item .name{position:relative;z-index:1;margin:0!important;font-size:clamp(20px,5.6vw,25px)!important;line-height:1.05!important;writing-mode:horizontal-tb!important;transform:none!important}
  body[data-option] .category-item .meta{position:relative;z-index:1;margin-top:8px!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11px!important;line-height:1.4!important;color:#9eb2c5!important;writing-mode:horizontal-tb!important}
  body[data-option] .category-item.is-expanded .meta{-webkit-line-clamp:unset;overflow:visible}

  /* Preserve a small visual signature from each concept family. */
  body[data-option="1"] .category-item{border-radius:999px 999px 22px 22px!important}
  body[data-option="2"] .category-item{border-left:3px solid rgba(85,221,255,.7)!important}
  body[data-option="3"] .category-item{transform:skewY(-1deg)!important}
  body[data-option="4"] .category-item .name{-webkit-text-stroke:.4px rgba(255,255,255,.35);color:transparent!important}
  body[data-option="4"] .category-item.is-expanded .name{color:#fff!important;-webkit-text-stroke:0}
  body[data-option="5"] .category-item{border-radius:28px!important}
  body[data-option="7"] .category-item{border-radius:999px!important;min-height:112px!important}
  body[data-option="9"] .category-item{border-radius:6px 24px 6px 24px!important}
  body[data-option="11"] .category-item:before{background:linear-gradient(115deg,transparent,rgba(255,255,255,.2),transparent)!important;width:150%!important;height:55%!important;inset:-20% auto auto -90%!important;border-radius:0!important;transform:rotate(12deg)!important}
  body[data-option="13"] .category-item{background:linear-gradient(145deg,rgba(53,91,150,.45),rgba(60,25,90,.4),rgba(4,15,30,.96))!important}
  body[data-option="15"] .category-item,body[data-option="19"] .category-item{min-height:150px!important}
  body[data-option="17"] .category-item{border-radius:16px 38px 16px 38px!important}
  body[data-option="18"] .category-item{border-radius:50% 50% 18px 18px!important}

  .feature-grid{gap:14px}
  .feature-panel,.corporate-panel{padding:20px;border-radius:20px}
  .feature-panel{min-height:0}
  .feature-panel h3{font-size:clamp(28px,8vw,36px);line-height:1.08}
  .steps{grid-template-columns:1fr;gap:10px;margin-top:18px}
  .step{padding-top:12px}
  .today-row{grid-template-columns:34px 1fr auto;padding:13px;gap:10px}
  .today-row small{font-size:11px}
  .collection-rail{margin-right:-12px;padding-right:12px;gap:12px}
  .collection-card{min-width:82vw;padding:21px;border-radius:19px}
  .collection-card h4{margin-top:28px}
  .corporate-panel{gap:22px}
  .corporate-list{grid-template-columns:1fr 1fr;gap:8px}
  .corporate-list div{padding:11px;font-size:12px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:22px}
  .footer-grid>div:first-child{grid-column:1/-1}
  .footer-grid>div:last-child{grid-column:auto}
  .copyright{font-size:11px}
  .review-toggle{font-size:0;width:44px;padding:0;justify-content:center}
  .review-toggle-dot{width:11px;height:11px}
}

@media (max-width:390px){
  .brand span{font-size:13px}
  .nav-actions .icon{width:33px;height:33px}
  .mobile-menu-toggle{width:33px;height:33px;padding:8px}
  body .category-stage,body[data-option] .category-stage{grid-template-columns:1fr 1fr!important;gap:8px!important}
  body[data-option] .category-item{min-height:116px!important;padding:13px!important;border-radius:16px!important}
  body[data-option] .category-item .name{font-size:20px!important}
  .corporate-list{grid-template-columns:1fr}
}


/* =========================================================
   VERSION 2.2 RESPONSIVE POLISH
   Final QA corrections from phone, tablet and desktop review.
========================================================= */

/* One tooltip system only. Prevent duplicate boxes and overlap. */
.category-item::after{
  display:none!important;
}

/* The floating explanation is intentionally compact and never scrolls with content. */
.floating-explanation{
  width:min(276px,calc(100vw - 24px));
  max-height:min(210px,calc(100vh - 24px));
  overflow:auto;
  overscroll-behavior:contain;
}

/* Make horizontal discovery obvious without relying only on convention. */
.collection-scroll-cue{
  display:none;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  margin:-10px 2px 10px;
  color:#8edff4;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.collection-scroll-arrow{
  display:inline-grid;
  place-items:center;
  width:25px;
  height:25px;
  border:1px solid rgba(85,221,255,.38);
  border-radius:50%;
  animation:collectionCue 1.8s ease-in-out infinite;
}
@keyframes collectionCue{
  0%,100%{transform:translateX(0);opacity:.65}
  50%{transform:translateX(4px);opacity:1}
}
.collection-rail{
  scrollbar-width:thin;
  scrollbar-color:rgba(85,221,255,.72) rgba(255,255,255,.07);
}
.collection-rail::-webkit-scrollbar,
.option-grid::-webkit-scrollbar{
  height:7px;
}
.collection-rail::-webkit-scrollbar-track,
.option-grid::-webkit-scrollbar-track{
  background:rgba(255,255,255,.06);
  border-radius:999px;
}
.collection-rail::-webkit-scrollbar-thumb,
.option-grid::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg,rgba(57,125,255,.82),rgba(85,221,255,.9));
  border-radius:999px;
}
.collection-rail:focus-visible{
  outline:2px solid rgba(85,221,255,.75);
  outline-offset:6px;
  border-radius:16px;
}

/* Tablet: avoid a sticky header covering short landscape viewports. */
@media (max-width:1024px){
  header{
    position:relative;
    top:auto;
  }
  .trust-strip{
    display:none!important;
  }
  .hero{
    padding-top:14px;
  }
  .section{
    scroll-margin-top:18px;
  }
  .category-stage{
    height:auto!important;
    max-height:none!important;
  }
  .collection-scroll-cue{
    display:flex;
  }
  .collection-rail{
    padding-bottom:16px;
  }
  .footer-grid{
    align-items:start;
  }
  .footer-grid>div{
    min-width:0;
  }
  .footer-grid p,
  .footer-grid a{
    overflow-wrap:anywhere;
  }
}

/* Phone and small tablet refinements. */
@media (max-width:760px){
  .section-head{
    max-width:100%;
  }
  .section h2,
  .feature-panel h3,
  .corporate-panel h2{
    max-width:100%;
    text-wrap:balance;
    hyphens:none;
  }
  .section-sub,
  .hero p,
  .feature-panel p,
  .corporate-panel p{
    overflow-wrap:break-word;
  }
  .collection-rail{
    margin-inline:0 -12px;
    padding-inline:0 12px;
    scroll-padding-inline:0 12px;
  }
  .collection-card{
    min-width:min(82vw,330px);
  }
  .collection-rail .collection-card:last-child{
    margin-right:12px;
  }
  .footer-grid{
    grid-template-columns:1fr 1fr;
    column-gap:18px;
    row-gap:26px;
  }
  .footer-grid>div:first-child{
    grid-column:1/-1;
  }
  .footer-grid>div:first-child p{
    max-width:34ch;
  }
  .copyright{
    padding-bottom:64px;
  }

  /* Compact information button that does not cover important content. */
  .review-toggle{
    left:auto!important;
    right:14px!important;
    bottom:14px!important;
    width:42px!important;
    height:42px!important;
    min-height:42px!important;
    padding:0!important;
    justify-content:center!important;
    border-radius:50%!important;
  }
  .review-toggle-dot{
    display:none!important;
  }
  .review-toggle-label{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }
  .review-toggle::before{
    content:"i";
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    color:#dff8ff;
    font:700 17px Georgia,serif;
    text-transform:none;
  }

  /* Hover explanations have no reliable equivalent on touch devices.
     The Reviewer Notes panel remains the mobile explanation interface. */
  .floating-explanation{
    display:none!important;
  }
}

/* Very narrow phones: protect the header from crowding. */
@media (max-width:350px){
  .brand span{
    display:none!important;
  }
  .nav{
    gap:6px;
  }
  .nav-actions{
    margin-left:auto;
  }
}

/* Short landscape screens need tighter rhythm, not clipped sections. */
@media (max-height:520px) and (max-width:1024px){
  .nav{
    min-height:68px;
  }
  .brand img{
    width:48px;
    height:48px;
  }
  .brand span{
    font-size:16px;
  }
  .option-dock{
    margin-top:8px;
  }
  .hero{
    padding-top:10px;
  }
  .hero-intro{
    padding-block:18px;
  }
  .section{
    padding-block:38px;
  }
  .review-panel{
    inset:8px;
    width:calc(100vw - 16px);
  }
}

@media(prefers-reduced-motion:reduce){
  .collection-scroll-arrow{
    animation:none;
  }
}


/* =========================================================
   VERSION 2.2 FINAL RESPONSIVE ALIGNMENT
   Sticky navigation, unified headings, footer compaction,
   collection-cue separation and small-card text protection.
========================================================= */

@media (max-width:1024px){
  html{
    scroll-padding-top:90px;
  }

  /* Keep the brand and commerce actions visible while the page scrolls. */
  header{
    position:sticky!important;
    top:0!important;
    z-index:100!important;
    background:rgba(3,12,25,.94)!important;
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    box-shadow:0 10px 30px rgba(0,0,0,.24);
  }

  .section,
  .hero,
  footer{
    scroll-margin-top:90px;
  }

  /* One consistent major-heading scale on tablet. */
  .hero h1,
  .section h2,
  .feature-panel h3,
  .corporate-panel h2{
    font-size:clamp(34px,5.2vw,42px)!important;
    line-height:1.08!important;
    letter-spacing:-.02em;
    text-wrap:balance;
  }

  /* The cue is a separate information row, never an overlay. */
  .collection-scroll-cue{
    position:relative!important;
    inset:auto!important;
    z-index:2;
    width:100%;
    min-height:30px;
    margin:0 0 12px!important;
    padding:0 4px;
    background:transparent!important;
    border:0!important;
    pointer-events:none;
  }

  .collection-rail{
    position:relative;
    margin-top:0!important;
  }

  /* Tablet footer stays in one row to avoid a detached Legal block. */
  .footer-grid{
    grid-template-columns:1.35fr repeat(3,minmax(0,1fr))!important;
    gap:24px!important;
    align-items:start!important;
  }

  .footer-grid>div:first-child,
  .footer-grid>div:last-child{
    grid-column:auto!important;
  }

  .footer-grid h5{
    margin-top:0;
  }
}

@media (max-width:760px){
  html{
    scroll-padding-top:78px;
  }

  header{
    top:0!important;
  }

  .nav{
    min-height:76px!important;
  }

  /* All primary homepage headings use one compact mobile scale. */
  .hero h1,
  .section h2,
  .feature-panel h3,
  .corporate-panel h2{
    font-size:clamp(28px,8vw,32px)!important;
    line-height:1.08!important;
    letter-spacing:-.018em;
    max-width:100%;
    text-wrap:balance;
  }

  .feature-panel h3,
  .corporate-panel h2{
    margin-bottom:12px;
  }

  /* Prevent two-column category labels from crowding or colliding. */
  body[data-option] .category-item{
    min-height:122px!important;
    padding:15px 13px 14px!important;
    overflow:hidden!important;
  }

  body[data-option] .category-item .name{
    font-size:clamp(18px,5.15vw,22px)!important;
    line-height:1.08!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
    text-wrap:balance;
  }

  body[data-option] .category-item .meta{
    font-size:10.8px!important;
    line-height:1.42!important;
  }

  .category-stage{
    margin-bottom:24px;
  }

  /* Clear separation between swipe cue and collection cards. */
  .collection-scroll-cue{
    justify-content:flex-end;
    min-height:28px;
    margin:0 0 14px!important;
    padding:0 2px;
  }

  .collection-rail{
    padding-top:0!important;
  }

  /* Compact footer: brand, Shop/Help, then Legal without a large blank row. */
  footer{
    padding-bottom:92px!important;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr!important;
    column-gap:22px!important;
    row-gap:24px!important;
  }

  .footer-grid>div:first-child{
    grid-column:1/-1!important;
  }

  .footer-grid>div:last-child{
    grid-column:1/-1!important;
    margin-top:0!important;
  }

  .footer-grid>div:last-child{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:18px;
    align-items:start;
  }

  .footer-grid>div:last-child h5{
    grid-column:1/-1;
    margin:0 0 4px;
  }

  .footer-grid>div:last-child a{
    margin:7px 0;
  }

  .copyright{
    margin-top:24px!important;
  }
}

@media (max-width:380px){
  .hero h1,
  .section h2,
  .feature-panel h3,
  .corporate-panel h2{
    font-size:28px!important;
  }

  body[data-option] .category-item .name{
    font-size:18px!important;
  }

  .footer-grid{
    column-gap:16px!important;
  }
}

@media (max-height:520px) and (max-width:1024px){
  /* Sticky remains enabled, but the compact height prevents obstruction. */
  header{
    position:sticky!important;
  }

  .nav{
    min-height:64px!important;
  }

  html{
    scroll-padding-top:70px;
  }

  .section,
  .hero,
  footer{
    scroll-margin-top:70px;
  }
}


/* =========================================================
   VERSION 2.2 FINAL QA PASS
========================================================= */

.footer-grid>div:first-child .brand{
  display:inline-flex!important;
  align-items:center!important;
  gap:14px!important;
  flex-wrap:nowrap!important;
  white-space:nowrap!important;
  max-width:100%;
}
.footer-grid>div:first-child .brand img{flex:0 0 auto!important}
.footer-grid>div:first-child .brand span{
  flex:0 1 auto!important;
  min-width:0!important;
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
  line-height:1!important;
}
.footer-grid{align-items:start!important}
.footer-grid>div{align-self:start!important}
.footer-grid h5{margin-top:0!important}

@media (min-width:761px) and (max-width:1024px){
  .footer-grid{
    grid-template-columns:minmax(250px,1.35fr) repeat(3,minmax(145px,1fr))!important;
    gap:28px!important;
  }
  .footer-grid>div:first-child .brand span{
    font-size:clamp(17px,2.1vw,22px)!important;
  }
  .footer-grid>div:first-child p{max-width:31ch!important}
}

@media (max-width:760px){
  .category-stage{gap:10px!important}
  body[data-option] .category-item{
    min-width:0!important;
    width:100%!important;
    min-height:124px!important;
    padding:15px 13px!important;
  }
  body[data-option] .category-item .name{
    font-size:clamp(17px,4.9vw,21px)!important;
    line-height:1.06!important;
    max-width:100%!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    text-wrap:balance;
  }
  body[data-option] .category-item .meta{
    max-width:100%!important;
    font-size:10.7px!important;
    line-height:1.38!important;
  }
  body[data-option] .category-item:nth-child(8) .name{
    font-size:clamp(16.5px,4.65vw,20px)!important;
  }

  footer{padding-top:34px!important}
  .footer-grid{
    grid-template-columns:1fr 1fr!important;
    gap:22px 18px!important;
  }
  .footer-grid>div:first-child{
    grid-column:1/-1!important;
    padding-bottom:4px!important;
  }
  .footer-grid>div:first-child .brand{gap:12px!important}
  .footer-grid>div:first-child .brand img{
    width:54px!important;
    height:54px!important;
  }
  .footer-grid>div:first-child .brand span{
    height:auto!important;
    transform:none!important;
    font-size:clamp(16px,4.8vw,19px)!important;
  }
  .footer-grid>div:first-child p{
    margin-top:18px!important;
    max-width:36ch!important;
  }
  .footer-grid>div:last-child{
    grid-column:1/-1!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:0 18px!important;
    margin-top:0!important;
  }
  .footer-grid>div:last-child h5{
    grid-column:1/-1!important;
    margin:0 0 4px!important;
  }
  .footer-grid>div:last-child a{margin:7px 0!important}
  .copyright{margin-top:20px!important}
}

@media (max-width:380px){
  .footer-grid>div:first-child .brand{gap:10px!important}
  .footer-grid>div:first-child .brand img{
    width:50px!important;
    height:50px!important;
  }
  .footer-grid>div:first-child .brand span{font-size:16px!important}
  .footer-grid{gap:20px 14px!important}
  body[data-option] .category-item{padding:14px 12px!important}
  body[data-option] .category-item .name{font-size:17px!important}
  body[data-option] .category-item:nth-child(8) .name{font-size:16.5px!important}
}


/* VERSION 2.2 BRAVE MOBILE POLISH */
@media (max-width:760px){
  .category-stage{gap:8px!important}
  body[data-option] .category-item{
    min-height:108px!important;
    padding:12px 12px 11px!important;
  }
  body[data-option] .category-item .index{margin-bottom:6px!important}
  body[data-option] .category-item .name{
    margin-bottom:6px!important;
    font-size:clamp(17px,4.8vw,20px)!important;
    line-height:1.04!important;
  }
  body[data-option] .category-item .meta{
    font-size:10.25px!important;
    line-height:1.34!important;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  body[data-option] .category-item:nth-child(8) .name{
    font-size:clamp(16px,4.55vw,19px)!important;
  }
  .review-toggle{
    right:10px!important;
    bottom:8px!important;
    width:38px!important;
    height:38px!important;
    min-height:38px!important;
    box-shadow:0 10px 24px rgba(0,0,0,.36)!important;
  }
  .review-toggle::before{font-size:15px!important}
}
@media (max-width:430px){
  body[data-option] .category-item{min-height:106px!important}
}
@media (max-width:390px){
  body[data-option] .category-item{
    min-height:104px!important;
    padding:11px 11px 10px!important;
  }
  body[data-option] .category-item .name{font-size:17px!important}
  body[data-option] .category-item:nth-child(8) .name{font-size:16px!important}
  body[data-option] .category-item .meta{font-size:10px!important}
}


/* =========================================================
   VERSION 2.2 FINAL COMPLETE POLISH
   Global active-tab border and subcategory clipping fixes.
========================================================= */

.option-dock{overflow:visible!important}
.option-grid{
  overflow-x:auto!important;
  overflow-y:visible!important;
  padding-top:8px!important;
  padding-bottom:8px!important;
  scroll-padding-inline:10px;
}
.option-grid button{
  position:relative;
  z-index:1;
  box-sizing:border-box;
  margin-top:2px;
  border:1px solid rgba(255,255,255,.18)!important;
  transform:translateY(0);
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease,color .2s ease;
}
.option-grid button:hover,
.option-grid button:focus-visible{
  z-index:3;
  transform:translateY(-2px);
  border-color:rgba(85,221,255,.58)!important;
}
.option-grid button.active{
  z-index:4;
  transform:translateY(-2px)!important;
  border-color:rgba(85,221,255,.92)!important;
  box-shadow:0 0 0 1px rgba(85,221,255,.16),0 10px 24px rgba(25,110,210,.28)!important;
}
.option-grid button.active::before{
  content:"";
  position:absolute;
  inset:-1px;
  border:1px solid rgba(85,221,255,.82);
  border-radius:inherit;
  pointer-events:none;
}

.category-stage{overflow:visible!important}
.category-item{box-sizing:border-box}
.category-item .name,
.category-item .meta{
  position:relative;
  z-index:2;
}
.category-item .meta{overflow-wrap:anywhere}

@media (min-width:1025px){
  .category-stage{
    padding-top:8px;
    padding-bottom:8px;
  }
  .category-item{overflow:visible!important}
}

@media (max-width:1024px){
  .option-dock{padding-top:4px!important}
  .option-grid{
    padding-top:9px!important;
    padding-bottom:10px!important;
  }
  .option-grid button{margin-top:2px!important}
  .category-item{overflow:hidden!important}
  .category-item .meta{max-width:100%}
}

@media (max-width:760px){
  .option-dock{overflow:visible!important}
  .option-grid{
    gap:8px!important;
    padding:10px 10px 11px!important;
  }
  .option-grid button{
    flex:0 0 auto;
    min-height:40px;
    transform:none!important;
  }
  .option-grid button:hover,
  .option-grid button:focus-visible,
  .option-grid button.active{
    transform:none!important;
  }
  .option-grid button.active{
    border-width:1px!important;
    box-shadow:inset 0 0 0 1px rgba(85,221,255,.28),0 6px 18px rgba(25,110,210,.22)!important;
  }
  .option-grid button.active::before{inset:0}
  body[data-option] .category-item{padding-inline:13px!important}
  body[data-option] .category-item .name,
  body[data-option] .category-item .meta{max-width:100%!important}
}

.option-grid button:focus-visible{
  outline:2px solid rgba(142,234,255,.88);
  outline-offset:2px;
}


/* PRODUCTION HOMEPAGE: Desktop Orbital Realm, Mobile Aurora Windows */
.option-dock,.review-toggle,.review-panel,.review-backdrop,.floating-explanation{display:none!important}

@media(max-width:760px){
  body.production-homepage[data-production-concept="aurora-windows"] .category-stage{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    height:auto!important;
    min-height:0!important;
    padding:2px 0 8px!important;
  }
  body.production-homepage[data-production-concept="aurora-windows"] .category-item{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    min-width:0!important;
    min-height:108px!important;
    padding:13px 13px 12px!important;
    border:1px solid rgba(139,220,255,.26)!important;
    border-radius:18px!important;
    background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025)),rgba(4,18,35,.88)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 34px rgba(0,0,0,.22)!important;
    overflow:hidden!important;
    transform:none!important;
    isolation:isolate;
  }
  body.production-homepage[data-production-concept="aurora-windows"] .category-item::before{
    content:"";
    position:absolute;
    inset:-45% -35%;
    z-index:0;
    background:
      radial-gradient(circle at 25% 35%,rgba(85,221,255,.34),transparent 34%),
      radial-gradient(circle at 72% 65%,rgba(57,125,255,.30),transparent 36%),
      radial-gradient(circle at 50% 50%,rgba(159,93,255,.18),transparent 46%);
    filter:blur(18px);
    opacity:.72;
    transform:translate3d(-4%,0,0);
    animation:auroraWindowDrift 10s ease-in-out infinite alternate;
    pointer-events:none;
  }
  body.production-homepage[data-production-concept="aurora-windows"] .category-item:nth-child(2n)::before{animation-delay:-2.5s}
  body.production-homepage[data-production-concept="aurora-windows"] .category-item:nth-child(3n)::before{animation-delay:-5s}
  body.production-homepage[data-production-concept="aurora-windows"] .category-item .num,
  body.production-homepage[data-production-concept="aurora-windows"] .category-item .name,
  body.production-homepage[data-production-concept="aurora-windows"] .category-item .meta{position:relative;z-index:2}
  body.production-homepage[data-production-concept="aurora-windows"] .category-item:active{
    transform:scale(.985)!important;
    border-color:rgba(85,221,255,.72)!important;
  }
}
@keyframes auroraWindowDrift{
  0%{transform:translate3d(-5%,-2%,0) rotate(-3deg) scale(1)}
  50%{transform:translate3d(4%,3%,0) rotate(2deg) scale(1.05)}
  100%{transform:translate3d(-1%,6%,0) rotate(5deg) scale(1.02)}
}
body.page-hidden .category-item::before{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){
  body.production-homepage .category-item::before{animation:none!important;transform:none!important}
}


/* =========================================================
   VERSION 2.3 - PRODUCTION READY
   Desktop: Orbital Realm | Mobile: Aurora Windows
========================================================= */

/* Collection cards retain the raised hover effect without clipping the top border. */
.collection-rail{
  padding-top:14px!important;
  scroll-padding-top:14px;
}
.collection-card{
  position:relative;
  margin-top:0!important;
}
.collection-card:hover,
.collection-card:focus-within{
  transform:translateY(-7px)!important;
  border-color:rgba(85,221,255,.58)!important;
  box-shadow:0 16px 34px rgba(0,0,0,.25)!important;
}

/* Mobile Aurora Windows: clean card geometry and a dedicated animated light layer. */
@media(max-width:760px){
  body.v23-production[data-production-concept="aurora-windows"] .category-stage{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    align-items:stretch!important;
    overflow:visible!important;
    padding:4px 0 10px!important;
  }

  body.v23-production[data-production-concept="aurora-windows"] .category-item{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    min-height:122px!important;
    padding:13px 12px 12px!important;
    border:1px solid rgba(139,220,255,.36)!important;
    border-radius:18px!important;
    background:linear-gradient(150deg,rgba(8,28,53,.96),rgba(3,14,29,.98))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 28px rgba(0,0,0,.24)!important;
    overflow:hidden!important;
    isolation:isolate;
    transform:none!important;
    color:#fff!important;
    text-align:left!important;
    text-shadow:none!important;
    -webkit-font-smoothing:antialiased;
  }

  /* Disable legacy pseudo animation. The dedicated child controls the effect. */
  body.v23-production[data-production-concept="aurora-windows"] .category-item::before{
    display:none!important;
    animation:none!important;
  }

  body.v23-production[data-production-concept="aurora-windows"] .aurora-field{
    position:absolute;
    inset:-38% -32%;
    z-index:0;
    display:block;
    pointer-events:none;
    opacity:.92;
    filter:blur(15px) saturate(1.2);
    background:
      radial-gradient(circle at 22% 30%,rgba(85,221,255,.46),transparent 31%),
      radial-gradient(circle at 78% 68%,rgba(57,125,255,.43),transparent 34%),
      radial-gradient(circle at 48% 48%,rgba(174,83,255,.25),transparent 44%);
    transform:translate3d(-6%,-2%,0) rotate(-4deg) scale(1.04);
    animation:v23AuroraDrift 7.5s ease-in-out infinite alternate;
    will-change:transform,opacity;
  }

  body.v23-production[data-production-concept="aurora-windows"] .aurora-field::after{
    content:"";
    position:absolute;
    inset:18% 10%;
    background:linear-gradient(115deg,transparent 30%,rgba(220,249,255,.22) 48%,transparent 66%);
    transform:translateX(-65%) rotate(8deg);
    animation:v23AuroraSheen 5.8s ease-in-out infinite;
  }

  body.v23-production[data-production-concept="aurora-windows"] .category-item:nth-child(2n) .aurora-field{animation-delay:-2.2s}
  body.v23-production[data-production-concept="aurora-windows"] .category-item:nth-child(3n) .aurora-field{animation-delay:-4.4s}

  body.v23-production[data-production-concept="aurora-windows"] .category-item .num{
    position:absolute!important;
    top:13px!important;
    left:13px!important;
    z-index:2!important;
    margin:0!important;
    color:#79e6ff!important;
    font-size:9px!important;
    letter-spacing:.16em!important;
  }

  body.v23-production[data-production-concept="aurora-windows"] .category-item .name{
    position:relative!important;
    z-index:2!important;
    display:block!important;
    margin:31px 0 7px!important;
    padding:0!important;
    font-size:clamp(17px,4.8vw,20px)!important;
    line-height:1.05!important;
    color:#fff!important;
    text-shadow:none!important;
    -webkit-text-stroke:0!important;
    transform:none!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }

  body.v23-production[data-production-concept="aurora-windows"] .category-item .meta{
    position:relative!important;
    z-index:2!important;
    display:-webkit-box!important;
    margin:0!important;
    color:#b4c7d8!important;
    font-size:10.2px!important;
    line-height:1.38!important;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden!important;
    text-shadow:none!important;
  }

  body.v23-production[data-production-concept="aurora-windows"] .category-item:active{
    transform:scale(.985)!important;
    border-color:rgba(85,221,255,.85)!important;
  }
  body.v23-production[data-production-concept="aurora-windows"] .category-item:active .aurora-field{
    opacity:1;
    filter:blur(12px) saturate(1.4);
  }
}

@media(max-width:390px){
  body.v23-production[data-production-concept="aurora-windows"] .category-stage{gap:8px!important}
  body.v23-production[data-production-concept="aurora-windows"] .category-item{
    min-height:116px!important;
    padding:12px 11px 11px!important;
  }
  body.v23-production[data-production-concept="aurora-windows"] .category-item .name{
    margin-top:29px!important;
    font-size:17px!important;
  }
  body.v23-production[data-production-concept="aurora-windows"] .category-item .meta{font-size:9.8px!important}
}

@keyframes v23AuroraDrift{
  0%{transform:translate3d(-7%,-4%,0) rotate(-5deg) scale(1.02);opacity:.72}
  50%{transform:translate3d(5%,3%,0) rotate(2deg) scale(1.09);opacity:1}
  100%{transform:translate3d(-1%,8%,0) rotate(6deg) scale(1.04);opacity:.84}
}
@keyframes v23AuroraSheen{
  0%,20%{transform:translateX(-75%) rotate(8deg);opacity:0}
  45%{opacity:.62}
  72%,100%{transform:translateX(75%) rotate(8deg);opacity:0}
}

body.page-hidden .aurora-field,
body.page-hidden .aurora-field::after{animation-play-state:paused!important}

@media(prefers-reduced-motion:reduce){
  body.v23-production .aurora-field,
  body.v23-production .aurora-field::after{
    animation:none!important;
    transform:none!important;
  }
}


/* v2.2 persistent cart icon */
.global-cart-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.global-cart-count{
  position:absolute;
  top:-5px;
  right:-5px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid #6bc4ff;
  background:linear-gradient(180deg,#2f9df5,#1269c7);
  color:#fff;
  font-size:.68rem;
  line-height:1;
  font-weight:850;
  box-shadow:0 4px 12px rgba(0,0,0,.36);
}
.global-cart-count[hidden]{display:none!important}


/* =========================================================
   AbstractRealmss v3.0 production-readiness baseline
   ========================================================= */
.skip-link{
  position:fixed;
  z-index:9999;
  top:10px;
  left:10px;
  transform:translateY(-160%);
  padding:10px 14px;
  border-radius:8px;
  background:#2f9df5;
  color:#fff;
  font-weight:800;
  text-decoration:none;
  transition:transform .2s ease;
}
.skip-link:focus{transform:translateY(0)}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid rgba(127,210,255,.95);
  outline-offset:3px;
}
:where(button,a).icon{touch-action:manipulation}
img{height:auto}
.category-item[data-sequence="1"]{order:1}
.category-item[data-sequence="2"]{order:2}
.category-item[data-sequence="3"]{order:3}
.category-item[data-sequence="4"]{order:4}
.category-item[data-sequence="5"]{order:5}
.category-item[data-sequence="6"]{order:6}
.category-item[data-sequence="7"]{order:7}
.category-item[data-sequence="8"]{order:8}
.form-error-summary{
  border:1px solid rgba(255,142,142,.55);
  border-radius:12px;
  background:rgba(80,20,32,.24);
  color:#ffd0d0;
  padding:14px 16px;
  margin-bottom:16px;
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}
@media(prefers-contrast:more){
  :root{--line:rgba(127,210,255,.65)}
  .btn,.button,input,select,textarea{border-width:2px!important}
}


/* Version 5.10.0: Locked AbstractRealmss portal-wide UI system */
.breadcrumbs{
  display:flex;align-items:center;gap:9px;padding-top:16px;padding-bottom:10px;
  color:#9eb0c4;font-size:.92rem;line-height:1.35;
}
.breadcrumbs a{color:#7bcaff;font-weight:500;text-decoration:none}
.breadcrumbs .breadcrumb-separator{color:#647b91;font-weight:400}
.breadcrumbs .breadcrumb-current{color:#dce7f5;font-weight:700}
.related-grid{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
.related-card{min-height:124px;display:flex;flex-direction:column;justify-content:center}
.related-card h3{min-height:1.3em;margin:8px 0}
.product-primary-action,.view-product{min-height:44px;display:inline-flex;align-items:center;justify-content:center;text-align:center}

@media(max-width:760px){
  .breadcrumbs{display:flex!important;flex-wrap:wrap!important;gap:5px 7px!important;padding:12px 12px 13px!important;font-size:.78rem!important;line-height:1.35!important}
  .breadcrumbs a,.breadcrumbs span{width:auto!important;min-width:0!important;white-space:normal!important;text-align:left!important}
  .breadcrumbs .breadcrumb-current{flex:1 1 145px}
  .related-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .related-card{min-height:132px;padding:16px!important}
  .related-card h3{font-size:1rem;line-height:1.2}
  .related-card p{font-size:.82rem;line-height:1.45}
}
@media(max-width:420px){.related-grid{grid-template-columns:1fr!important}.related-card{min-height:auto}}

/* ==========================================================================
   Version 6.0.0 — Home Page UI Foundation (home-page scoped)
   ========================================================================== */
.v60-homepage .hero{padding-bottom:24px}
.v60-homepage .hero-frame{margin-bottom:0}
.v60-homepage .section-head.centered{justify-content:center;text-align:center}
.v60-homepage .section-head.centered>div{max-width:850px;margin-inline:auto}
.v60-homepage .home-personalise-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}
.v60-homepage .home-step{min-height:220px;padding:28px;border:1px solid rgba(118,175,255,.22);border-radius:24px;background:linear-gradient(145deg,rgba(15,35,68,.82),rgba(4,13,31,.92));box-shadow:0 18px 50px rgba(0,0,0,.22);text-align:left;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.v60-homepage .home-step:hover{transform:translateY(-6px);border-color:rgba(118,175,255,.48);box-shadow:0 24px 60px rgba(0,0,0,.3)}
.v60-homepage .home-step span{display:inline-grid;place-items:center;width:48px;height:48px;margin-bottom:20px;border-radius:50%;background:rgba(71,134,255,.16);border:1px solid rgba(118,175,255,.35);font-weight:800;color:#bcd6ff}
.v60-homepage .home-step h3{margin:0 0 12px;font-size:clamp(1.25rem,2vw,1.65rem)}
.v60-homepage .home-step p{margin:0;color:var(--muted);line-height:1.7}
.v60-homepage .home-single-cta{display:flex;justify-content:center;margin-top:28px}
.v60-homepage .collection-card{display:block;text-decoration:none;color:inherit}
@media (max-width:780px){.v60-homepage .home-personalise-steps{grid-template-columns:1fr}.v60-homepage .home-step{min-height:auto}.v60-homepage .hero{padding-bottom:8px}}


/* v6.0.0 homepage section divider refinement: homepage only.
   Each divider is positioned by an explicit, balanced transition gap. */
.v60-homepage .hero{padding-bottom:0}
.v60-homepage .section{padding-top:0;padding-bottom:0}
.v60-homepage .home-section-divider{
  display:block;
  width:clamp(320px,34vw,440px);
  height:4px;
  background:#FFFFFF;
  opacity:1;
  filter:none;
  box-shadow:none;
  clip-path:polygon(0 50%,50% 0,100% 50%,50% 100%);
}
/* Tuned individually from the approved collections-to-business placement. */
.v60-homepage .home-section-divider.after-hero{margin:36px auto}
.v60-homepage .home-section-divider.after-categories{margin:38px auto}
.v60-homepage .home-section-divider.after-personalise{margin:38px auto}
.v60-homepage .home-section-divider.after-collections{margin:32px auto}
.v60-homepage #corporate{padding-bottom:32px}
@media (max-width:780px){
  .v60-homepage .home-section-divider{width:min(72vw,280px);height:3px;background:#FFFFFF;opacity:1;filter:none;box-shadow:none}
  .v60-homepage .home-section-divider.after-hero,
  .v60-homepage .home-section-divider.after-categories,
  .v60-homepage .home-section-divider.after-personalise{margin:28px auto}
  .v60-homepage .home-section-divider.after-collections{margin:24px auto}
  .v60-homepage #corporate{padding-bottom:24px}
}

/* =========================================================
   Version 7.1.0 — Locked Personalisation Journey component
   Reuses the approved Home Page three-card design on product
   category and listing pages without changing the Home Page.
   ========================================================= */
.personalisation-standard .section-head.centered{
  justify-content:center;
  text-align:center;
}
.personalisation-standard .section-head.centered>div{
  max-width:850px;
  margin-inline:auto;
}
.personalisation-standard .home-personalise-steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:28px;
}
.personalisation-standard .home-step{
  min-height:220px;
  padding:28px;
  border:1px solid rgba(118,175,255,.22);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(15,35,68,.82),rgba(4,13,31,.92));
  box-shadow:0 18px 50px rgba(0,0,0,.22);
  text-align:left;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.personalisation-standard .home-step:hover{
  transform:translateY(-6px);
  border-color:rgba(118,175,255,.48);
  box-shadow:0 24px 60px rgba(0,0,0,.3);
}
.personalisation-standard .home-step span{
  display:inline-grid;
  place-items:center;
  width:48px;
  height:48px;
  margin-bottom:20px;
  border-radius:50%;
  background:rgba(71,134,255,.16);
  border:1px solid rgba(118,175,255,.35);
  font-weight:800;
  color:#bcd6ff;
}
.personalisation-standard .home-step h3{
  margin:0 0 12px;
  font-size:clamp(1.25rem,2vw,1.65rem);
}
.personalisation-standard .home-step p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
}
.personalisation-standard .home-single-cta{
  display:flex;
  justify-content:center;
  margin-top:28px;
}
@media (max-width:780px){
  .personalisation-standard .home-personalise-steps{grid-template-columns:1fr}
  .personalisation-standard .home-step{min-height:auto}
}
@media (prefers-reduced-motion:reduce){
  .personalisation-standard .home-step{transition:none}
}


/* =========================================================
   v7.2.3 — AR Design System DS-003: Premium Section Divider v2
   Global locked specification for Home Page dividers.
   ========================================================= */
.v60-homepage .home-section-divider,
.v60-homepage .home-section-divider.after-hero,
.v60-homepage .home-section-divider.after-categories,
.v60-homepage .home-section-divider.after-personalise,
.v60-homepage .home-section-divider.after-collections{
  display:block;
  width:min(680px,82vw);
  height:3px;
  margin:70px auto;
  background:linear-gradient(90deg,transparent,rgba(74,187,255,.22) 18%,rgba(122,220,255,.88) 50%,rgba(74,187,255,.22) 82%,transparent);
  opacity:1;
  filter:none;
  box-shadow:0 0 18px rgba(35,169,255,.22);
  clip-path:none;
  border-radius:999px;
}
@media(max-width:780px){
  .v60-homepage .home-section-divider,
  .v60-homepage .home-section-divider.after-hero,
  .v60-homepage .home-section-divider.after-categories,
  .v60-homepage .home-section-divider.after-personalise,
  .v60-homepage .home-section-divider.after-collections{
    width:min(680px,82vw);
    height:3px;
    margin:70px auto;
    background:linear-gradient(90deg,transparent,rgba(74,187,255,.22) 18%,rgba(122,220,255,.88) 50%,rgba(74,187,255,.22) 82%,transparent);
    box-shadow:0 0 18px rgba(35,169,255,.22);
    clip-path:none;
  }
}