:root{--navy:#06101d;--gold:#e2b65f;--gold2:#f2d38b;--white:#f6f4ef}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--navy)}
body{overflow:hidden;font-family:Arial,Helvetica,sans-serif}
.page{position:fixed;inset:0;background:var(--navy)}
.landscape-version,.landscape-version img{width:100%;height:100%;display:block}
.landscape-version img{object-fit:cover;object-position:center}
.portrait-version{display:none}

@media (orientation:portrait) and (max-width:1200px){
  .landscape-version{display:none}
  .portrait-version{display:block;position:absolute;inset:0;overflow:hidden;background:var(--navy)}
  .portrait-bg{position:absolute;inset:0;background:url('assets/cosviq-v4-portrait-bg.jpg?v=4') center/cover no-repeat}
  .portrait-content{position:absolute;z-index:2;top:max(5vh,28px);left:50%;transform:translateX(-50%);width:min(92vw,760px);text-align:center;color:var(--white);padding:0 14px}
  .orbit{height:78px;width:58%;min-width:220px;margin:0 auto 8px;position:relative}
  .arc{position:absolute;left:5%;right:5%;bottom:3px;height:56px;border-top:2px solid rgba(240,196,108,.95);border-radius:50% 50% 0 0}
  .star{position:absolute;left:50%;top:-4px;transform:translateX(-50%);font-size:34px;color:#ffe3a0;text-shadow:0 0 16px rgba(255,188,72,.95)}
  .wordmark{font-weight:300;letter-spacing:.17em;font-size:clamp(46px,14.5vw,108px);line-height:1;color:var(--gold2);white-space:nowrap;transform:translateX(.08em);text-shadow:0 1px 0 #8c6028}
  .divider{margin:26px auto 22px;width:54%;display:flex;align-items:center;gap:10px}
  .divider span{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);flex:1}
  .divider b{width:9px;height:9px;border-radius:50%;background:var(--gold2);box-shadow:0 0 8px rgba(255,196,84,.65)}
  .strapline{font-size:clamp(14px,4vw,28px);letter-spacing:.20em;line-height:1.55;white-space:nowrap}
  .glow{width:56px;height:2px;margin:28px auto 23px;background:#e7b961;box-shadow:0 0 14px 3px rgba(238,171,57,.42)}
  .coming{font-family:Georgia,'Times New Roman',serif;font-style:italic;color:#e7bd6d;font-size:clamp(20px,5.9vw,40px);line-height:1.35}
}
@media (orientation:portrait) and (max-width:390px){
  .portrait-content{top:4vh}
  .orbit{height:64px}
  .wordmark{font-size:13.4vw;letter-spacing:.13em}
  .strapline{font-size:3.8vw;letter-spacing:.16em}
  .coming{font-size:5.6vw}
}