:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  color: #163e30;
  background: #f6f5ef;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; }
::selection { background: #d6ebaa; color: #163e30; }
.page { max-width: 1600px; min-height: 100vh; min-height: 100svh; margin: auto; padding: 20px clamp(24px, 5vw, 80px) 24px; display: flex; flex-direction: column; }
.header, footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.header { padding-bottom: 20px; }
.brand { display: inline-flex; border-radius: 8px; }
.brand:focus-visible { outline: 3px solid #087a40; outline-offset: 5px; }
.brand img { display: block; width: 112px; height: 74px; object-fit: contain; }
.status { display: inline-flex; align-items: center; gap: 9px; border: 1px solid #d7ddcf; border-radius: 30px; padding: 10px 15px; font-size: 12px; color: #416347; }
.status > span { width: 6px; height: 6px; border-radius: 50%; background: #087a40; box-shadow: 0 0 0 4px #087a4010; }
main { display: grid; grid-template-columns: 1.12fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; flex: 1; padding: 24px 0 52px; }
.intro { padding: 28px 0; min-width: 0; }
.eyebrow { margin: 0 0 30px; font-size: 10px; font-weight: 700; letter-spacing: 2px; color: #54704e; }
h1 { margin: 0; font-size: clamp(46px, 5.5vw, 84px); font-weight: 600; letter-spacing: -0.065em; line-height: 1.07; }
h1 > span { display: block; margin-top: 7px; color: #078343; }
.description { max-width: 370px; margin: 28px 0 0; color: #626f65; font-size: 16px; line-height: 1.85; }
.launch-note { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; color: #31563c; font-size: 12px; line-height: 1.6; }
.launch-note > span { font-size: 22px; color: #087a40; }
.sign-off { margin: 44px 0 0; font-size: 12px; color: #68756c; line-height: 1.8; }
.sign-off strong { display: block; font-weight: 600; color: #244c38; }
.visual { min-width: 0; min-height: 560px; position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 30px; border-radius: 180px 180px 20px 20px; background: #164e38; color: #eaf0d5; }
.visual::before, .visual::after { content: ''; position: absolute; z-index: -1; width: 560px; height: 560px; border: 1px solid #f5ffd419; border-radius: 50%; pointer-events: none; }
.visual::before { top: 60px; left: -220px; }
.visual::after { top: 20px; left: -180px; }
.visual-heading { padding-top: 26px; text-align: center; font-size: 9px; line-height: 1.9; letter-spacing: 2px; color: #bed4bd; }
.orbit { width: 290px; height: 290px; margin: 20px auto 4px; position: relative; border: 1px solid #c4de9b40; border-radius: 50%; display: grid; place-items: center; }
.clock { position: relative; width: 228px; height: 228px; border: 10px solid #e5edce; border-radius: 50%; background: repeating-conic-gradient(from -1deg, #71916c 0deg 2deg, transparent 2deg 30deg), #f3f5e6; box-shadow: 12px 20px 0 #0a342740, inset 0 0 0 2px #d6dfc1; transform: rotate(-12deg); }
.clock::before { content: ''; position: absolute; inset: 14px; border-radius: 50%; background: #f3f5e6; }
.hand { position: absolute; bottom: 50%; left: calc(50% - 3px); width: 6px; background: #164e38; border-radius: 4px; transform-origin: bottom center; }
.hour { height: 51px; transform: rotate(115deg); }
.minute { height: 73px; animation: time-turn 60s linear infinite; }
.pin { position: absolute; width: 16px; height: 16px; left: calc(50% - 8px); top: calc(50% - 8px); border: 4px solid #164e38; border-radius: 50%; background: #b4cc76; }
.spark { position: absolute; color: #d4e8a8; }
.spark-one { right: -5px; top: 0; font-size: 43px; animation: float 6s ease-in-out infinite; }
.spark-two { left: -10px; bottom: 33px; font-size: 28px; animation: float 6s ease-in-out -3s infinite; }
.orbit-dot { position: absolute; right: 31px; bottom: 31px; width: 9px; height: 9px; border-radius: 50%; background: #d4e8a8; }
.moment { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 8px 30px; }
.moment > span:first-child { font-family: Georgia, 'Times New Roman', serif; font-size: 38px; font-style: italic; line-height: 1.1; letter-spacing: -1.5px; }
.moment-star { font-size: 60px; color: #c4db8f; }
.visual-footer { border-top: 1px solid #bdd5b733; padding-top: 16px; display: flex; justify-content: space-between; gap: 15px; font-size: 9px; letter-spacing: 1.5px; color: #bed4bd; }
footer { border-top: 1px solid #d9dfd1; padding-top: 21px; font-size: 11px; color: #637364; line-height: 1.6; }
footer > span:first-child { color: #35563d; }
@keyframes time-turn { to { transform: rotate(360deg); } }
@keyframes float { 50% { transform: translateY(-8px); } }

@media (min-width: 1400px) {
  .visual { min-height: 640px; }
}
@media (max-width: 1000px) {
  main { gap: 25px; }
  .visual { padding: 25px 20px; min-height: 530px; }
  .orbit { width: 240px; height: 240px; }
  .clock { width: 190px; height: 190px; }
  .moment > span:first-child { font-size: 32px; }
  .minute { height: 60px; }
}
@media (max-width: 700px) {
  .page { padding: 12px 24px 24px; }
  .header { padding-bottom: 0; }
  .brand img { width: 98px; height: 64px; }
  .status { font-size: 11px; padding: 9px 12px; }
  main { grid-template-columns: 1fr; gap: 15px; padding: 24px 0 34px; }
  .intro { padding: 12px 0 22px; }
  h1 { font-size: clamp(42px, 10vw, 68px); }
  .eyebrow { margin-bottom: 23px; font-size: 9px; letter-spacing: 1.5px; }
  .description { font-size: 15px; margin-top: 22px; }
  .sign-off { margin-top: 25px; }
  .visual { min-height: 490px; border-radius: 140px 140px 18px 18px; }
  .visual-heading { padding-top: 18px; }
  .orbit { width: min(240px, 100%); }
  .moment { padding: 14px 0 24px; }
  footer { flex-direction: column; align-items: flex-start; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}