/* Plain Days — desktop finish pass 08 */

@media (min-width: 721px) {
  .hero {
    min-height: 100svh;
    padding: 18px 26px 18px;
    overflow-x: hidden;
    overflow-y: auto;
    background:
      radial-gradient(circle at 50% 18%, rgba(255,255,255,.86), rgba(238,240,240,.88) 38%, rgba(214,218,219,.92) 100%),
      linear-gradient(135deg, #eef0f0, #dfe3e3);
  }

  .hero::before {
    background:
      linear-gradient(115deg, rgba(255,255,255,.58), transparent 34%, rgba(202,210,212,.18)),
      radial-gradient(circle at 82% 20%, rgba(194,214,218,.22), transparent 30%);
  }

  .topbar {
    width: min(1480px, 97%);
    font-size: 13px;
  }

  .ipad {
    width: min(1380px, 89vw);
    margin-top: clamp(16px, 2.2vh, 26px);
  }

  .ipad-frame {
    padding: 18px;
    border-radius: 38px;
    background: linear-gradient(
      145deg,
      rgba(255,255,255,.56) 0%,
      rgba(194,201,203,.42) 36%,
      rgba(249,250,250,.55) 66%,
      rgba(160,168,171,.38) 100%
    );
    box-shadow:
      0 30px 76px rgba(39,47,50,.13),
      inset 0 0 0 1px rgba(255,255,255,.76),
      inset 0 0 0 2px rgba(70,78,80,.035);
  }

  .ipad-frame::after {
    inset: 9px;
    border-radius: 32px;
    border-color: rgba(255,255,255,.48);
  }

  .ipad-screen {
    border-radius: 24px;
    background:
      radial-gradient(circle at 70% 15%, rgba(255,255,255,.54), transparent 35%),
      radial-gradient(circle at 20% 82%, rgba(191,207,210,.20), transparent 32%),
      linear-gradient(135deg, rgba(221,225,225,.72), rgba(247,249,248,.64) 48%, rgba(197,203,204,.60));
    box-shadow:
      inset 0 0 52px rgba(255,255,255,.40),
      inset 0 0 34px rgba(70,80,82,.035);
    backdrop-filter: blur(24px) saturate(112%);
    -webkit-backdrop-filter: blur(24px) saturate(112%);
  }

  .ipad-screen::before {
    background:
      linear-gradient(118deg, rgba(255,255,255,.46), transparent 37%, rgba(182,199,202,.10));
  }

  .ipad-camera {
    top: 8px;
    width: 6px;
    height: 6px;
  }

  .screen-top {
    top: 26px;
    left: 34px;
    right: 34px;
    font-size: 11px;
    color: rgba(36,36,36,.58);
  }

  .notification-area {
    top: 102px;
    right: 112px;
    width: 350px;
    gap: 12px;
  }

  .notification,
  .glass-card,
  .glass-enter {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .notification::before,
  .glass-card::before,
  .glass-enter::before {
    content: '';
    position: absolute;
    inset: -2px;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    background:
      linear-gradient(
        115deg,
        transparent 8%,
        rgba(196,231,238,.30) 28%,
        rgba(244,218,239,.28) 47%,
        rgba(218,227,255,.30) 63%,
        rgba(224,246,232,.26) 78%,
        transparent 94%
      );
    transform: translateX(-38%) skewX(-12deg);
    transition: opacity .38s ease, transform .72s cubic-bezier(.18,.75,.22,1);
    filter: saturate(125%);
  }

  .notification:hover::before,
  .glass-card:hover::before,
  .glass-enter:hover::before {
    opacity: 1;
    transform: translateX(18%) skewX(-12deg);
  }

  .notification::after,
  .glass-card::after,
  .glass-enter::after {
    content: '';
    position: absolute;
    inset: 1px;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.035));
  }

  .notification {
    grid-template-columns: 46px 1fr auto;
    gap: 13px;
    padding: 13px 15px;
    border-radius: 16px;
    border-color: rgba(255,255,255,.50);
    background: rgba(255,255,255,.13);
    backdrop-filter: blur(24px) saturate(120%);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
    box-shadow:
      0 10px 28px rgba(54,64,68,.08),
      inset 0 1px 0 rgba(255,255,255,.56),
      inset 0 -1px 0 rgba(255,255,255,.10);
  }

  .notification:hover {
    background: rgba(255,255,255,.19);
    border-color: rgba(255,255,255,.72);
    box-shadow:
      0 14px 34px rgba(55,68,74,.11),
      0 0 24px rgba(205,228,235,.16),
      inset 0 1px 0 rgba(255,255,255,.72);
  }

  .notification-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 16px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.42);
    box-shadow:
      0 6px 16px rgba(0,0,0,.035),
      inset 0 1px 0 rgba(255,255,255,.56);
  }

  .notification-meta {
    font-size: 10px;
  }

  .notification-meta strong {
    font-weight: 600;
    letter-spacing: .09em;
  }

  .notification p {
    margin-top: 5px;
    font-size: 9.5px;
    color: rgba(63,68,69,.66);
  }

  .notification-arrow {
    font-size: 11px;
  }

  .screen-center {
    top: calc(52% + 20px);
    width: min(760px, 64%);
  }

  .title-group {
    transform: translateY(-60px);
  }

  .pearl {
    width: 52px;
    height: 52px;
    margin-bottom: 12px;
    background: radial-gradient(
      circle at 32% 25%,
      rgba(255,255,255,.96) 0%,
      rgba(245,249,249,.80) 22%,
      rgba(192,205,208,.52) 48%,
      rgba(249,244,251,.74) 70%,
      rgba(173,187,191,.38) 100%
    );
    box-shadow:
      0 9px 24px rgba(68,81,85,.10),
      0 0 24px rgba(213,231,236,.22),
      inset -4px -5px 10px rgba(0,0,0,.025),
      inset 4px 4px 10px rgba(255,255,255,.72);
  }

  .screen-small {
    font-size: 15px;
    color: rgba(72,76,77,.58);
  }

  .title-group h2 {
    font-size: 58px;
    color: rgba(31,34,35,.84);
  }

  .glass-enter {
    margin-top: -9px;
    padding: 15px 18px;
    border-radius: 17px;
    border-color: rgba(255,255,255,.46);
    background: rgba(255,255,255,.085);
    backdrop-filter: blur(24px) saturate(120%);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
    box-shadow:
      0 9px 26px rgba(55,65,68,.055),
      inset 0 1px 0 rgba(255,255,255,.50);
    font-size: 11px;
    color: rgba(60,66,67,.64);
    letter-spacing: .07em;
  }

  .glass-enter:hover {
    border-color: rgba(255,255,255,.74);
    box-shadow:
      0 12px 30px rgba(55,68,74,.09),
      0 0 28px rgba(205,228,235,.18),
      inset 0 1px 0 rgba(255,255,255,.70);
  }

  .enter-cloud {
    font-size: 15px;
    opacity: .70;
  }

  .glass-menu {
    gap: 13px;
    margin-top: 13px;
  }

  .glass-card {
    min-height: 122px;
    padding: 18px;
    border-radius: 18px;
    border-color: rgba(255,255,255,.48);
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(24px) saturate(120%);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
    box-shadow:
      0 10px 28px rgba(55,65,68,.06),
      inset 0 1px 0 rgba(255,255,255,.54),
      inset 0 -1px 0 rgba(255,255,255,.08);
  }

  .glass-card:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.78);
    box-shadow:
      0 18px 38px rgba(48,61,65,.11),
      0 0 30px rgba(191,225,233,.18),
      0 0 44px rgba(230,205,235,.10),
      inset 0 1px 0 rgba(255,255,255,.78);
  }

  .glass-icon {
    height: 37px;
    font-size: 18px;
    color: rgba(55,61,62,.69);
  }

  .glass-card-text {
    gap: 7px;
  }

  .glass-card strong {
    font-size: 11px;
    letter-spacing: .15em;
    color: rgba(29,34,35,.82);
  }

  .glass-card span {
    font-size: 8.5px;
    color: rgba(64,70,71,.60);
  }

  .glass-arrow {
    top: 16px;
    right: 16px;
    font-size: 10px;
    color: rgba(60,66,67,.52);
  }

  .ipad-shadow {
    width: 84%;
    height: 22px;
    background: rgba(32,43,46,.10);
    filter: blur(20px);
  }

  .click-note {
    margin-top: 10px;
    font-size: 11px;
    color: rgba(80,86,87,.58);
  }

  .hero-footer {
    padding-top: 14px;
    gap: 34px;
    font-size: 11px;
    color: rgba(70,77,78,.52);
  }

  .hero-footer span + span::before {
    margin-right: 34px;
  }
}