:root {
  color-scheme: dark;
  --blue: #0844d9;
  --deep-blue: #071f86;
  --ice: #eaf4ff;
  --orange: #ff8626;
}

* { box-sizing: border-box; }
html { background: var(--blue); min-width: 290px; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: #fff; }

.splash {
  min-height: 100vh;
  min-height: 100svh;
  background: radial-gradient(ellipse at 58% 34%, #3a82f7 0, #0e51e4 44%, #071e81 100%);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.desktop-composition {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #0642ce;
}
.backdrop {
  position: absolute;
  inset: -35px;
  background: url('assets/kubinsoft-plaza.webp') center / cover no-repeat;
  filter: blur(38px) saturate(1.3) brightness(.85);
  transform: scale(1.045);
}
.desktop-art {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: center;
  box-shadow: 0 0 75px rgba(4, 12, 77, .16);
}
.crt-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .095;
  background: repeating-linear-gradient(
    to bottom, transparent 0 3px, rgba(2, 11, 75, .5) 4px 5px
  );
  mix-blend-mode: multiply;
}
.light-sheen {
  position: absolute;
  inset: -30%;
  pointer-events: none;
  opacity: .065;
  background: linear-gradient(110deg, transparent 38%, #fff 50%, transparent 62%);
  transform: translateX(-85%);
  animation: sheen 18s ease-in-out infinite;
}
@keyframes sheen {
  0%, 18% { transform: translateX(-85%); }
  46%, 100% { transform: translateX(85%); }
}

.mobile-composition { display: none; }
.screenreader-desktop {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (max-width: 700px), (orientation: portrait) and (max-width: 980px) {
  .desktop-composition { display: none; }
  .screenreader-desktop { display: none; }
  .splash { overflow: visible; }
  .mobile-composition {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    position: relative;
    background:
      radial-gradient(ellipse at 90% 6%, rgba(92, 183, 255, .7), transparent 32%),
      linear-gradient(155deg, #0639db 0%, #0356ec 38%, #1431bb 78%, #07196c 100%);
  }
  .mobile-composition::before {
    content: '';
    position: absolute;
    top: -20%; right: -53%;
    width: 125%; aspect-ratio: 1 / 1;
    border: 2px solid rgba(255,255,255,.65);
    border-radius: 50%;
    transform: rotate(-22deg) scaleY(.43);
    filter: drop-shadow(0 0 9px #c3efff);
    pointer-events: none;
  }
  .mobile-top { padding: clamp(25px, 7vw, 40px) 24px 23px; z-index: 1; }
  .brand-header { display: flex; flex-direction: column; align-items: flex-start; gap: 23px; }
  .identity { position: relative; max-width: 100%; }
  .identity::before {
    content: '';
    position: absolute;
    width: 88%; height: 52%; top: 11%; left: -7%;
    border-top: 6px solid var(--orange);
    border-radius: 90% 55% 0 0;
    transform: rotate(-10deg);
    pointer-events: none;
    opacity: .95;
  }
  .brand-lockup { position: relative; display: flex; align-items: center; gap: 5px; }
  .arch-logo { width: clamp(48px, 14vw, 74px); height: auto; flex: 0 0 auto; color: white; filter: drop-shadow(0 2px 2px rgba(0,20,107,.2)); }
  .wordmark {
    font-size: clamp(36px, 9.5vw, 66px);
    font-style: italic;
    font-weight: 900;
    letter-spacing: -.07em;
    line-height: .95;
    text-shadow: 0 3px 3px rgba(5, 24, 111, .22);
  }
  .trademark { font-size: .26em; letter-spacing: 0; vertical-align: top; margin-left: 4px; }
  .brand-caption {
    margin: 6px 0 0 clamp(55px, 16vw, 82px);
    font-size: clamp(10px, 2.8vw, 15px);
    font-weight: 600;
    letter-spacing: .23em;
    font-style: italic;
    white-space: nowrap;
  }
  .status {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 10px; font-weight: 800; letter-spacing: .25em;
    font-style: italic;
    text-shadow: 0 2px 3px rgba(0,15,65,.25);
  }
  .status-pip {
    width: 0; height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid #52f14b;
    filter: drop-shadow(0 0 5px rgba(52,244,67,.8));
    animation: heartbeat 3s ease-in-out infinite;
  }
  @keyframes heartbeat { 50% { opacity: .56; } }
  .plaza-frame {
    flex: 1 0 290px;
    position: relative;
    min-height: 310px;
    margin: 0 14px;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid rgba(199, 231, 255, .85);
    background: #8fc5ff;
    box-shadow: 0 0 0 4px rgba(255,255,255,.095), 0 20px 40px rgba(0, 18, 94, .34);
  }
  .plaza-frame img {
    position: absolute;
    width: 100%; height: 100%; object-fit: cover;
    object-position: 44% 50%;
    filter: saturate(1.07) contrast(1.02);
  }
  .plaza-gloss {
    position: absolute; inset: 0;
    pointer-events: none;
    background: linear-gradient(155deg, rgba(255,255,255,.17) 0%, transparent 29%, transparent 76%, rgba(9,46,179,.25));
  }
  .frame-corner { position: absolute; width: 44px; height: 30px; pointer-events: none; }
  .frame-corner-top { top: 0; left: 0; border-top: 3px solid #fff; border-left: 3px solid #fff; }
  .frame-corner-bottom { bottom: 0; right: 0; border-bottom: 3px solid #fff; border-right: 3px solid #fff; }
  .mobile-bottom {
    z-index: 1;
    padding: 24px 25px 23px;
    background:
      radial-gradient(ellipse at 80% 0%, rgba(107, 179, 255, .4), transparent 65%),
      linear-gradient(180deg, rgba(10,66,217,.25), rgba(4,26,125,.75));
  }
  .slogan-block { display: flex; align-items: flex-start; gap: 13px; }
  .orange-arrow {
    margin-top: 5px; flex: 0 0 auto;
    width: 0; height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 17px solid var(--orange);
    filter: drop-shadow(0 1px 1px #fff);
  }
  .slogan-block h1 {
    margin: 0;
    font-size: clamp(21px, 6.2vw, 34px);
    line-height: 1.07;
    font-weight: 900; font-style: italic;
    letter-spacing: -.035em;
    text-shadow: 0 2px 3px rgba(1,16,82,.3);
  }
  .slogan-block p {
    margin: 9px 0 0;
    font-size: clamp(9px, 2.55vw, 13px);
    font-weight: 600;
    font-style: italic;
    letter-spacing: .16em;
    line-height: 1.5;
  }
  .bottom-rule {
    height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
    margin: 24px 0 17px;
  }
  footer {
    font-size: 9px; font-weight: 700; letter-spacing: .15em;
    opacity: .76; text-align: center;
  }
  footer span { margin: 0 9px; }
}

@media (max-width: 365px) {
  .mobile-top { padding-left: 17px; padding-right: 17px; }
  .mobile-bottom { padding-left: 17px; padding-right: 17px; }
  .brand-caption { letter-spacing: .13em; }
  .plaza-frame { margin: 0 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}