:root {
  color-scheme: dark;
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, sans-serif;
  color: #fff;
  background: #020407;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("assets/plus-jakarta-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-024F;
}

@font-face {
  font-family: "Plus Jakarta Sans Fallback";
  src: local(Arial);
  ascent-override: 98.88%;
  descent-override: 21.15%;
  line-gap-override: 0%;
  size-adjust: 104.98%;
}

@font-face {
  font-family: Sora;
  src: url("assets/sora-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-024F;
}

@font-face {
  font-family: "Sora Fallback";
  src: local(Arial);
  ascent-override: 85.29%;
  descent-override: 25.5%;
  line-gap-override: 0%;
  size-adjust: 113.73%;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  min-height: 100vh;
  overflow: hidden;
  background: #020407;
  font-size: 16px;
  line-height: 1.5;
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, sans-serif;
}

.ambient {
  position: fixed;
  inset: 0;
  overflow: hidden;
  filter: hue-rotate(46deg) saturate(1.5) brightness(1.12);
  background:
    radial-gradient(900px 420px at 52% 58%, rgba(5,30,56,.34), transparent 72%),
    radial-gradient(640px 360px at 84% 72%, rgba(0,68,116,.20), transparent 70%),
    linear-gradient(#000 0%, #020509 54%, #010308 100%);
}

.ambient::before {
  content: "";
  position: absolute;
  inset: -14%;
  filter: blur(18px);
  opacity: .68;
  background:
    radial-gradient(520px 320px at 14% 74%, rgba(19,178,210,.14), transparent 68%),
    radial-gradient(620px 420px at 78% 64%, rgba(34,139,227,.18), transparent 66%);
  animation: ambient-drift 18s ease-in-out infinite alternate;
}

.background-vignette {
  position: absolute;
  z-index: 0;
  inset: -2px;
  background:
    radial-gradient(1100px 520px at 50% 58%, transparent 0%, rgba(0,0,0,.24) 48%, rgba(0,0,0,.94) 100%),
    linear-gradient(90deg, rgba(0,0,0,.90), transparent 34% 66%, rgba(0,0,0,.82)),
    linear-gradient(rgba(0,0,0,.86), transparent 38%, rgba(0,0,0,.28));
}

.ribbon-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .88;
  mix-blend-mode: screen;
}

.svg-ribbon {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: 50%;
  will-change: transform, opacity;
}

.svg-ribbon-shadow {
  stroke: rgba(20,92,173,.32);
  stroke-width: 120px;
  filter: url(#ribbonSoftBlur);
  opacity: .38;
  animation: svg-ribbon-drift 11s ease-in-out infinite alternate;
}

.svg-ribbon-main {
  stroke: url(#ribbonStrokeMain);
  stroke-width: 64px;
  filter: url(#ribbonBlur);
  opacity: .56;
  animation: svg-ribbon-drift 10s ease-in-out infinite alternate;
}

.svg-ribbon-left {
  stroke: url(#ribbonStrokeLeft);
  stroke-width: 52px;
  filter: url(#ribbonBlur);
  opacity: .5;
  animation: svg-ribbon-left-drift 12s ease-in-out infinite alternate;
}

.svg-ribbon-crest {
  stroke: url(#ribbonStrokeMain);
  stroke-width: 44px;
  filter: url(#ribbonBlur);
  opacity: .42;
  animation: svg-ribbon-crest-drift 9s ease-in-out infinite alternate;
}

.light-ribbon {
  position: absolute;
  display: block;
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
}

.ribbon-main {
  top: 41vh;
  left: 10vw;
  width: 78vw;
  min-width: 760px;
  height: 34vw;
  min-height: 330px;
  border-radius: 47% 53% 56% 44% / 38% 45% 55% 62%;
  background: linear-gradient(102deg,transparent 8%,rgba(11,59,108,.06) 28%,rgba(45,191,235,.58) 53%,rgba(33,112,202,.3) 70%,transparent 88%),radial-gradient(closest-side at 58%,rgba(100,232,255,.3),transparent 64%);
  filter: blur(15px);
  opacity: .36;
  animation: ribbon-main 8s ease-in-out infinite alternate;
}

.ribbon-left {
  top: 7vh;
  left: -10vw;
  width: 30vw;
  min-width: 270px;
  height: 70vw;
  min-height: 580px;
  border-radius: 58% 42% 52% 48% / 64% 38% 62% 36%;
  background: linear-gradient(126deg,transparent 18%,rgba(34,198,240,.82) 43%,rgba(21,76,149,.38) 59%,transparent 73%),radial-gradient(closest-side at 58% 26%,rgba(93,211,255,.32),transparent 66%);
  filter: blur(11px);
  opacity: .34;
  animation: ribbon-left 10s ease-in-out infinite alternate;
}

.ribbon-right {
  right: -9vw;
  bottom: -16vw;
  width: 32vw;
  min-width: 330px;
  height: 48vw;
  min-height: 460px;
  border-radius: 56% 44% 48% 52% / 44% 58% 42% 56%;
  background: radial-gradient(closest-side at 42% 36%,rgba(95,236,255,.42),transparent 56%),linear-gradient(118deg,rgba(34,98,196,.24),rgba(22,139,210,.30),transparent 72%);
  filter: blur(20px);
  opacity: .42;
  animation: ribbon-right 9s ease-in-out infinite alternate;
}

.ribbon-crest {
  top: 44vh;
  right: 5vw;
  width: 46vw;
  min-width: 430px;
  height: 18vw;
  min-height: 160px;
  border-radius: 55% 45% 60% 40% / 48% 42% 58% 52%;
  background: linear-gradient(98deg,transparent 0%,rgba(11,67,126,.16) 31%,rgba(88,223,255,.62) 54%,rgba(26,97,192,.36) 72%,transparent 100%);
  filter: blur(10px);
  opacity: .42;
  animation: ribbon-crest 7s ease-in-out infinite alternate;
}

.ribbon-veil {
  top: 27vh;
  left: 7vw;
  width: 78vw;
  min-width: 780px;
  height: 42vw;
  min-height: 400px;
  border-radius: 50%;
  background: radial-gradient(closest-side at 50% 56%,rgba(9,65,104,.27),rgba(7,28,58,.13) 58%,transparent 78%);
  filter: blur(26px);
  opacity: .34;
  animation: veil-breathe 18s ease-in-out infinite alternate;
}

.light-pulse {
  position: absolute;
  display: block;
  width: 24vw;
  min-width: 260px;
  height: 24vw;
  min-height: 260px;
  border-radius: 9999px;
  background: radial-gradient(circle,rgba(85,225,255,.55),rgba(24,116,198,.22) 42%,transparent 70%);
  filter: blur(22px);
  mix-blend-mode: screen;
  opacity: .26;
  will-change: transform, opacity;
}

.light-pulse-left { bottom: -8vw; left: -5vw; animation: pulse-left 10s ease-in-out infinite alternate; }
.light-pulse-right { right: 10vw; bottom: 19vh; animation: pulse-right 11s ease-in-out infinite alternate; }

.grain-layer {
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 60%,#000,transparent 72%);
}

@keyframes ambient-drift {
  from { opacity: .7; transform: translate(-2%,1%) scale(1); }
  to { opacity: .92; transform: translate(2%,-2%) scale(1.05); }
}

@keyframes svg-ribbon-drift {
  from { opacity: .36; transform: translate(-52px,30px) rotate(-3.2deg) scale(.96); }
  to { opacity: .64; transform: translate(56px,-34px) rotate(2.8deg) scale(1.06); }
}

@keyframes svg-ribbon-left-drift {
  from { opacity: .34; transform: translate(-44px,36px) rotate(-5deg) scale(.94); }
  to { opacity: .58; transform: translate(42px,-46px) rotate(5.5deg) scale(1.08); }
}

@keyframes svg-ribbon-crest-drift {
  from { opacity: .3; transform: translate(36px,16px) rotate(-4deg) scaleX(.96); }
  to { opacity: .52; transform: translate(-42px,-24px) rotate(4deg) scaleX(1.08); }
}

@keyframes ribbon-main { from { opacity:.46; transform:translate(-7%,5%) rotate(-13deg) skew(-21deg) scaleX(.94) scaleY(.96); } to { opacity:.84; transform:translate(8%,-7%) rotate(-4deg) skew(-11deg) scaleX(1.1) scaleY(1.04); } }
@keyframes ribbon-left { from { opacity:.42; transform:translate(-8%,7%) rotate(32deg) skewY(-28deg) scaleX(.92) scaleY(.94); } to { opacity:.78; transform:translate(10%,-8%) rotate(46deg) skewY(-17deg) scaleX(1.08) scaleY(1.12); } }
@keyframes ribbon-right { from { opacity:.38; transform:translate(8%,5%) rotate(18deg) scale(.9); } to { opacity:.82; transform:translate(-9%,-9%) rotate(30deg) scale(1.12); } }
@keyframes ribbon-crest { from { opacity:.36; transform:translate(8%,3%) rotate(9deg) skew(-28deg) scaleX(.9); } to { opacity:.76; transform:translate(-10%,-5%) rotate(19deg) skew(-18deg) scaleX(1.16); } }
@keyframes veil-breathe { from { opacity:.36; transform:scale(.96); } to { opacity:.62; transform:scale(1.06); } }
@keyframes pulse-left { from { opacity:.22; transform:translate(-4%,6%) scale(.9); } to { opacity:.48; transform:translate(10%,-8%) scale(1.12); } }
@keyframes pulse-right { from { opacity:.24; transform:translate(6%,5%) scale(.92); } to { opacity:.5; transform:translate(-8%,-7%) scale(1.1); } }

@media (prefers-reduced-motion: reduce) {
  .ambient::before, .svg-ribbon, .light-ribbon, .light-pulse, .logo, .logo-edge, .logo-sheen, .logo-spark { animation: none; }
}

.page-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: 32px 24px;
}

.layout {
  width: 100%;
  max-width: 1536px;
  min-height: calc(100vh - 64px);
  margin: 0 auto;
  padding: 0 36px;
  display: flex;
  justify-content: center;
  gap: 64px;
  align-items: center;
}

.news {
  min-width: 0;
  height: 534px;
  max-width: 646px;
  flex: 1 1 646px;
  position: relative;
}

.brand {
  isolation: isolate;
  position: relative;
  width: 321px;
  height: 215px;
  margin: 0 auto;
  animation: logo-enter .9s cubic-bezier(.2,.85,.22,1.15) both;
}

.brand::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: 11%;
  right: 6%;
  bottom: 5%;
  height: 31%;
  clip-path: polygon(25% 0,78% 0,100% 100%,0 100%);
  background: linear-gradient(125deg,transparent 10%,rgba(12,96,162,.46) 44%,rgba(58,222,255,.22) 100%);
  filter: blur(12px);
  opacity: .62;
  animation: logo-base-light 4.8s ease-in-out infinite alternate;
}

.logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.logo-shadow { z-index:-1; transform:translateY(11px) scale(1.02); opacity:.72; filter:blur(16px) drop-shadow(0 20px 24px rgba(0,0,0,.72)); animation:logo-glow-breathe 3.6s ease-in-out infinite alternate; }
.logo-glow { z-index:0; transform:translateY(2px) scale(1.018); opacity:.34; filter:blur(9px) drop-shadow(0 0 22px rgba(49,211,255,.72)) drop-shadow(0 0 42px rgba(10,112,220,.42)); animation:logo-cyan-breathe 2.8s ease-in-out infinite alternate; }
.logo-main { z-index:2; filter:drop-shadow(0 2px rgba(0,0,0,.84)) drop-shadow(0 12px 22px rgba(0,0,0,.46)); animation:logo-float 4.6s ease-in-out infinite; }

.logo-edge,.logo-sheen { position:absolute; inset:0; pointer-events:none; mask:url("assets/digi-logo.svg") 50%/contain no-repeat; }
.logo-edge { z-index:1; mix-blend-mode:screen; opacity:.28; background:radial-gradient(at 48% 39%,rgba(255,255,255,.56),rgba(91,225,255,.18) 24%,transparent 56%); animation:logo-edge-pulse 3.4s ease-in-out infinite alternate; }
.logo-sheen { z-index:3; mix-blend-mode:screen; opacity:0; background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.06) 41%,rgba(255,255,255,.85) 49%,rgba(133,236,255,.28) 56%,transparent 69%) 0 0/230% 100%; animation:logo-sheen-sweep 4.2s ease-in-out infinite; }
.logo-spark { position:absolute; z-index:4; width:8%; aspect-ratio:1; border-radius:999px; background:#fff; opacity:0; transform:scale(.3); box-shadow:0 0 12px rgba(255,255,255,.9),0 0 24px rgba(95,222,255,.72); animation:logo-tiny-glint 4.8s ease-in-out infinite; }
.logo-spark-one { top:24%; left:49%; animation-delay:1.15s; }
.logo-spark-two { top:19%; right:9%; animation-delay:2.55s; }

@keyframes logo-enter { 0%{opacity:0;filter:blur(8px);transform:translateY(18px) scale(.86) rotate(-3deg)}72%{opacity:1;filter:blur(0);transform:translateY(-3px) scale(1.035) rotate(1deg)}to{opacity:1;filter:blur(0);transform:none} }
@keyframes logo-float { 0%,to{transform:translate(0) rotate(-.4deg) scale(1)}50%{transform:translateY(-7px) rotate(.5deg) scale(1.018)} }
@keyframes logo-glow-breathe { from{opacity:.42;transform:translateY(13px) scale(.99)}to{opacity:.86;transform:translateY(9px) scale(1.045)} }
@keyframes logo-cyan-breathe { from{opacity:.16;transform:translate(-2px,4px) scale(.99)}to{opacity:.46;transform:translate(2px) scale(1.035)} }
@keyframes logo-sheen-sweep { 0%,52%{opacity:0;background-position:135%}62%{opacity:.82}78%,to{opacity:0;background-position:-35%} }
@keyframes logo-edge-pulse { from{opacity:.16;transform:translate(-2%,2%) scale(.98)}to{opacity:.38;transform:translate(2%,-1%) scale(1.02)} }
@keyframes logo-base-light { from{opacity:.36;transform:perspective(360px) rotateX(62deg) translate(-4%,8%) scaleX(.92)}to{opacity:.78;transform:perspective(360px) rotateX(62deg) translate(4%,-2%) scaleX(1.08)} }
@keyframes logo-tiny-glint { 0%,68%,to{opacity:0;transform:scale(.25)}73%{opacity:.95;transform:scale(1)}79%{opacity:0;transform:scale(.35)} }

.news > h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -.5px;
  font-family: Sora, "Sora Fallback", "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, sans-serif;
}

.news-list {
  height: 224px;
  margin-top: 20px;
  overflow: hidden;
}

.news-item {
  position: relative;
  min-height: 104px;
  display: grid;
  grid-template-columns: 74px minmax(0,1fr) 54px;
  align-items: center;
  gap: 20px;
  padding: 12px 4px;
}

.news-item:first-of-type { min-height: 118px; }

.news-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg,#8b3dff 0%,#7c3dff 35%,#246bff 78%,transparent 100%);
}

.news-icon {
  width: 64px;
  height: 80px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(183,242,255,.18);
  border-radius: 13px;
  background: rgba(5, 65, 83, .14);
  font-size: 30px;
}

.news-copy h2 {
  margin: 0 0 4px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: -.45px;
  font-family: Sora, "Sora Fallback", "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-copy p {
  margin: 0;
  max-width: 475px;
  color: rgba(255,255,255,.65);
  font-size: 13px;
  line-height: 20px;
  font-weight: 300;
  letter-spacing: .2px;
}

.meta { color: rgba(255,255,255,.45); font-size: 12px; }
.meta span { color: #62a8ff; }

.chevron {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: rgba(255,255,255,.62);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-area { width: 469px; }

.login-card {
  position: relative;
  width: 100%;
  min-height: 464px;
  padding: 20px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  background: rgba(2,11,24,.6);
  box-shadow: 0 24px 48px rgba(0,55,77,.3);
  backdrop-filter: blur(18px);
}

.login-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(145deg,#7d34f0 0%,rgba(72,44,183,.42) 25%,rgba(34,137,219,.26) 70%,rgba(54,116,238,.55) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.login-card h2 {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -.55px;
}

.intro {
  width: 90%;
  margin: 28px 0 0;
  color: rgba(255,255,255,.65);
  font-weight: 300;
  line-height: 24px;
  letter-spacing: .25px;
}

.login-card label {
  margin: 28px 0 6px;
  color: rgba(255,255,255,.65);
  font-weight: 300;
  line-height: 24px;
  letter-spacing: .1px;
}

.field-wrap {
  position: relative;
  width: 100%;
  height: 57px;
  margin-bottom: 0;
}

.field-wrap > svg {
  position: absolute;
  z-index: 2;
  left: 15px;
  top: 18px;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

input {
  width: 100%;
  height: 57px;
  padding: 10px 44px;
  border: 1px solid rgba(207,248,255,.2);
  border-radius: 7px;
  outline: none;
  background: rgba(4,20,38,.7);
  color: #fff;
  font: 400 14px/20px "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, sans-serif;
  cursor: default;
}

input::placeholder { color: #fff; opacity: 1; }

.eye {
  position: absolute;
  z-index: 2;
  right: 12px;
  top: 18px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
}

.eye svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-button {
  width: 100%;
  height: 58px;
  margin-top: 28px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(135deg,#0ca5d8,#176ee8 58%,#103f9f);
  font: 600 18px/28px "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, sans-serif;
  box-shadow: 0 8px 20px rgba(8,97,203,.22);
  cursor: default;
}

.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;
}

@media (max-width: 980px) {
  body { overflow: auto; }
  .page-shell { padding: 24px 18px; }
  .layout { flex-direction: column; gap: 34px; padding: 0; }
  .news { width: min(627px,100%); margin: 0 auto; }
  .login-area { width: min(469px,100%); margin: 0 auto 30px; }
}

@media (max-width: 560px) {
  .news { height: auto; }
  .brand { width: 250px; height: 170px; }
  .news-item { grid-template-columns: 54px 1fr 24px; gap: 12px; }
  .news-icon { width: 58px; height: 72px; }
  .news-copy h2 { font-size: 15px; }
  .news-copy p { font-size: 12.5px; }
  .login-card { padding: 18px; }
}