/* Alacer Matrix - V9, premium editorial visuals and containment-safe case artwork */
:root{--v9-teal:#7bd0cb;--v9-ink:#0b2033;--v9-ivory:#f4f2ed}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Keep art and decorative elements confined to the actual card image viewport. */
.cs-card,.cs-card-art,.epif-app-card,.epif-app-visual{min-width:0;max-width:100%}
.cs-card-art{height:auto;aspect-ratio:2/1;overflow:hidden;display:block;position:relative;background:#10293b}
.cs-card-art img{position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:cover;object-position:center center;display:block;transform:none!important;filter:none!important;opacity:1!important;transition:filter .4s,scale .5s}
.cs-card:hover .cs-card-art img{scale:1.025;filter:brightness(1.1)!important}
.cs-art-number{left:16px;top:15px;z-index:3;color:#f1f7f2;background:#071d30b8;backdrop-filter:blur(7px);letter-spacing:.08em}
.cs-art-arrow{right:15px;top:14px;z-index:3}
.cs-card-art::before{background:none!important}
.cs-card-art::after{z-index:1;background:linear-gradient(0deg,#0b213733,transparent 28%)}
.cs-card{border:1px solid #23465b!important;border-top:0!important;border-radius:0;box-shadow:none;transition:transform .25s ease,border-color .25s ease}
.cs-card:hover{border-color:#72b6b3!important}
.cs-filter-row{overflow:visible!important;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-bottom:12px;scrollbar-width:none}
.cs-filter{white-space:normal;min-height:43px;flex:0 0 auto}
.epif-app-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.epif-app-card{overflow:hidden}
.epif-app-visual{aspect-ratio:2/1;min-height:0!important;height:auto!important;overflow:hidden;background:#0d283c;display:block}
.epif-app-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none!important;max-width:100%;display:block}
.epif-app-card:hover .epif-app-visual img{scale:1.025;transform:none!important}
/* Full-bleed editorial scene: visual metaphor built from a completely self-contained SVG image. */
.v9-editorial{position:relative;isolation:isolate;min-height:760px;overflow:hidden;background:#0b2033 url('assets/editorial-epif-landscape.svg') center center/cover no-repeat;color:#f5f2e9;display:flex;flex-direction:column;justify-content:center}
.v9-editorial-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,21,36,.98) 0%,rgba(5,21,36,.95) 26%,rgba(5,21,36,.49) 74%,rgba(5,21,36,.22) 100%);z-index:-1}
.v9-editorial-wrap{width:min(calc(100% - 120px),1480px);display:flex;align-items:center;justify-content:space-between;gap:6%;padding:115px 0 90px;position:relative;z-index:1}
.v9-editorial-copy{max-width:720px;flex:1.1}
.v9-editorial-copy h2{font:400 clamp(54px,6.7vw,105px)/.98 var(--serif,Georgia,serif);letter-spacing:-.045em;margin:25px 0 28px}
.v9-editorial-copy h2 em{color:#a9ddd7;font-weight:400}
.v9-editorial-copy>p:not(.eyebrow){font-size:clamp(16px,1.3vw,19px);line-height:1.85;color:#bbced0;max-width:540px}
.v9-editorial-link{display:inline-flex;gap:30px;align-items:center;padding:15px 0;border-bottom:1px solid #87c2bd;color:#eaf6f2;margin-top:18px;font-weight:700;letter-spacing:.01em}
.v9-editorial-link span{font-size:24px;color:#83d2cb}
.v9-editorial-plate{flex:0 1 395px;min-width:330px;background:#102d40d9;border:1px solid #77aeaf80;box-shadow:0 35px 90px #03101c8f;backdrop-filter:blur(16px);padding:29px;align-self:flex-end}
.v9-plate-label{font:700 10px var(--sans,Arial,sans-serif);color:#88d7cf;letter-spacing:.2em}
.v9-plate-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.v9-plate-grid>div{display:flex;gap:10px;padding:14px 6px;border-top:1px solid #9fced242;align-items:flex-start}
.v9-plate-grid b{font:400 28px var(--serif,Georgia,serif);color:#e0bb89}
.v9-plate-grid span{font-size:12px;line-height:1.5;color:#d7e5e5}
.v9-plate-trace{height:3px;background:#46697a;margin:27px 0;position:relative;overflow:hidden}
.v9-plate-trace span{display:block;width:34%;height:100%;background:#7fd4c9;box-shadow:0 0 16px #7fd4c9;animation:v9-trace 5s ease-in-out infinite alternate}
@keyframes v9-trace{from{transform:translateX(0)}to{transform:translateX(192%)}}
.v9-editorial-plate p{font:italic 20px/1.28 var(--serif,Georgia,serif);color:#e7f0e9;margin:0}
.v9-editorial-bottom{width:min(calc(100% - 120px),1480px);position:relative;z-index:1;display:flex;justify-content:space-between;gap:25px;padding:18px 0 27px;border-top:1px solid #9ec7c644;letter-spacing:.16em;font-size:10px;font-weight:700;color:#aac0c4}
/* Live visual comparisons use native CSS motion with accessible clickable tabs. */
.v9-proof{background:#f1f1eb;color:#163044}
.v9-proof-header{display:flex;justify-content:space-between;align-items:end;gap:60px;margin-bottom:54px}
.v9-proof-header>div{flex:1}
.v9-proof-header>p{max-width:420px;font-size:16px;line-height:1.8;color:#566c75;margin:0 0 6px}
.v9-proof-tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid #b4c8c7;padding-bottom:18px;margin-bottom:0}
.v9-proof-tab{font:700 12px var(--sans,Arial,sans-serif);cursor:pointer;padding:16px 18px;border:1px solid #c0cecf;background:transparent;color:#45626a;transition:background .2s,border-color .2s}
.v9-proof-tab.is-active,.v9-proof-tab[aria-selected="true"]{background:#133246;color:#edede8;border-color:#133246}
.v9-proof-tab:focus-visible{outline:3px solid #399e99;outline-offset:2px}
.v9-proof-panel{display:grid;grid-template-columns:.9fr 1.3fr;background:#0d263b;color:#eff3ef;min-height:385px}
.v9-proof-left{padding:45px 48px;display:flex;flex-direction:column;align-items:flex-start}
.v9-proof-kicker{font-size:10px;letter-spacing:.16em;font-weight:700;color:#8bd1c9}
.v9-proof-left>strong{font:400 clamp(95px,12vw,174px)/.92 var(--serif,Georgia,serif);letter-spacing:-.08em;color:#ecf1eb;margin:32px 0 16px}
.v9-proof-left>strong>span{font-size:.58em;color:#8cd3ca}
.v9-proof-left>p{font-size:15px;line-height:1.6;max-width:310px;color:#b8cdd1;margin:0 0 23px}
.v9-proof-left>a{font-size:13px;color:#a7e8df;border-bottom:1px solid #699c9f;margin-top:auto;padding-bottom:10px}
.v9-proof-chart{position:relative;overflow:hidden;padding:54px 52px;background:radial-gradient(circle at 80% 25%,#1a4b62 0,transparent 54%),#163649;display:flex;flex-direction:column;justify-content:center;gap:31px}
.v9-chart-graticule{position:absolute;inset:0;background:repeating-linear-gradient(90deg,#a1b9bf15 0,#a1b9bf15 1px,transparent 1px,transparent 20%);pointer-events:none}
.v9-chart-head{display:flex;justify-content:space-between;gap:20px;color:#a4d4d2;font-size:10px;letter-spacing:.12em;position:relative;z-index:1}
.v9-data-row{display:grid;grid-template-columns:150px 1fr 64px;gap:14px;align-items:center;position:relative;z-index:1}
.v9-data-row>span{color:#b6c8ce;font-size:10px;letter-spacing:.08em;font-weight:700;line-height:1.55}
.v9-data-row>b{font:400 29px var(--serif,Georgia,serif);color:#f0f4f0;text-align:right}
.v9-track{height:34px;background:#071d2a;border:1px solid #426471;overflow:hidden}
.v9-bar{height:100%;width:var(--bar-w);transform-origin:left;transform:scaleX(.02);transition:transform 1.1s cubic-bezier(.17,.66,.24,1);will-change:transform}
.v9-proof.is-visible .v9-bar{transform:scaleX(1)}
.v9-bar.before{background:linear-gradient(90deg,#4f8d9b,#7da8ae)}
.v9-bar.after{background:linear-gradient(90deg,#b28d5c,#ecc48d);transition-delay:.25s}
.v9-proof-chart>p{font-size:11px;line-height:1.6;color:#adbec6;margin:0;max-width:430px;position:relative;z-index:1}
@media(max-width:1150px){.v9-editorial-wrap{align-items:flex-start;gap:25px}.v9-editorial-plate{max-width:330px;min-width:290px;padding:20px}.v9-data-row{grid-template-columns:130px 1fr 54px}}
@media(max-width:950px){.v9-editorial-wrap{display:block}.v9-editorial-plate{margin-top:56px;max-width:480px}.v9-editorial{min-height:0}.v9-proof-header{display:block}.v9-proof-header>p{margin-top:27px}.v9-proof-panel{grid-template-columns:1fr}.v9-proof-left>strong{font-size:116px;margin:18px 0}.v9-proof-chart{min-height:305px}.epif-app-grid{grid-template-columns:1fr}}
@media(max-width:720px){.v9-editorial{background-position:63% center}.v9-editorial-overlay{background:linear-gradient(90deg,#051524f7,#051524d9)}.v9-editorial-wrap{padding:83px 0}.v9-editorial-copy h2{font-size:clamp(53px,10vw,76px)}.v9-editorial-plate{min-width:0;padding:20px}.v9-editorial-bottom{font-size:8px;gap:12px}.v9-proof-header{margin-bottom:32px}.v9-proof-tab{font-size:11px;padding:13px 11px}.v9-proof-left{padding:37px 29px}.v9-proof-chart{padding:37px 24px;gap:26px}.v9-data-row{grid-template-columns:1fr 58px;gap:8px}.v9-data-row>span{grid-column:1 / -1}.v9-track{height:29px}.cs-card-art{height:auto!important;aspect-ratio:2/1}.cs-filter{flex:1 0 auto;white-space:normal}.cs-filter-row{gap:7px}.cs-art-number{padding:6px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.v9-plate-trace span{animation:none}.v9-bar{transform:scaleX(1)!important;transition:none}.cs-card-art img,.epif-app-visual img{transition:none}}

@media(max-width:1230px){.v9-editorial-wrap,.v9-editorial-bottom{width:calc(100% - 80px)}}
@media(max-width:990px){.v9-editorial-wrap,.v9-editorial-bottom{width:calc(100% - 60px)}}
@media(max-width:720px){.v9-editorial-wrap,.v9-editorial-bottom{width:calc(100% - 42px)}}

.v9-interlude{background:#0b2337 var(--v9-interlude-art) center center /cover no-repeat;position:relative;isolation:isolate;min-height:420px;display:flex;align-items:center;color:#eef3ed;overflow:hidden}
.v9-interlude::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#081b2ff7 0%,#081b2fe8 38%,#081b2f30 90%);z-index:-1}
.v9-interlude-content{padding:66px 0;position:relative}
.v9-interlude-kicker{font:700 11px var(--sans,Arial,sans-serif);color:#85d0c7;letter-spacing:.17em}
.v9-interlude h2{font:400 clamp(55px,6vw,91px)/1 var(--serif,Georgia,serif);max-width:680px;margin:18px 0 24px;letter-spacing:-.035em}
.v9-interlude h2 em{color:#8ad0c5;font-weight:400}
.v9-interlude-content>p:not(.v9-interlude-kicker){max-width:600px;color:#cad8d7;line-height:1.8;font-size:16px}
.v9-interlude a{display:inline-block;margin-top:16px;padding-bottom:12px;border-bottom:1px solid #a4cdc6;color:#e4f5f1;font-weight:700;font-size:13px}
@media(max-width:720px){.v9-interlude{min-height:400px;background-position:60% center}.v9-interlude::before{background:linear-gradient(90deg,#081b2ff0,#081b2fb5)}.v9-interlude-content{padding:65px 0}.v9-interlude h2{font-size:clamp(50px,11vw,75px)}}
